I've got an MVC 5 / Bootstrap app that has a table embedded in a panel, as follows:
<div class="panel panel-default col-md-3 col-md-offset-3">
<div class="panel-heading">Life List Counts</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-responsive table-hover">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
Col1Data
</td>
<td>
Col2Data
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
I'd like to limit the maximum height of the table to something like 200px and then have the rest of the contents scroll vertically inside the panel. I've been unsuccessful in all my attempts. I've tried putting style heights on the panel and table and neither seems to work.
You need to set the .panel-body height and overflow to auto
.panel-body {
height: 200px;
overflow: auto;
}
If you want to keep the table header fixed there is and article here: fixed header table
that looks quite interesting.
Related
I am using JQuery Mobile for show a data of Products, someone like this:
<table data-role="table" id="products-vip" data-column-btn-theme="b" data-column-popup-theme="a" data-mode="columntoggle" class="ui-responsive" data-column-btn-text="See">
<thead>
<tr>
<-- <th> with table heads -->
</tr>
</thead>
<tbody>
#foreach(Product in Model)
{
<tr>
<-- <td> with info of Products-->
</tr>
}
</tbody>
</table>
The table is "columntoggle".
My problem is that the Content of the cells exceed the width of the screen, for example, in a iOS browser, and JQuery Mobile truncate the content and do not allow move the page into left or right to see the content.
How I can say to JQuery Mobile that do not truncate the content, and make the table responsive, or the cell with a word wrap indicated.
Thanks!...
Put the table inside a div and allow the div to scroll when the table exceeds the div boundaries:
<div class="tableWrapper">
<table data-role="table" id="products-vip" data-column-btn-theme="b" data-column-popup-theme="a" data-mode="columntoggle" class="ui-responsive table-stroke" data-column-btn-text="See">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Col 1 Row 1 content</td>
<td>Col 2 Row 1 content</td>
<td>Col 3 Row 1 content</td>
<td>Col 4 Row 1 content</td>
</tr>
</tbody>
</table>
</div>
CSS:
.tableWrapper {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
The column contents automatically wraps to multiple line and the table stays within the div until the columns can no longer shrink. At that point, the table becomes wider than the div and the scrollbar appears.
DEMO
I have this list below, which I am generating on the fly using Razor view:
<table id="contractCoverablesGrid">
<tbody>
#foreach (var coverableItem in Model.ContractCoverablesList)
{
<tr>
<td>
#Html.Hidden("coverID",coverableItem.CoverID)
</td>
<td>
#Html.Label(coverableItem.Name)
</td>
<td>
<input type='checkbox' class='chkboxActive' checked='checked' />
</td>
</tr>
}
</tbody>
</table>
As you can imagine the outcome of this is a vertical list, which keeps extending downwards.
I would like to have this list 'wrapped' into three adjacent columns instead of one single long column; just as you would do this in ASP.net Datalist server control (in Webforms).
My initial thoughts were to limit the width & height of the table to set values and then keep floating the td(s) left. But how do I float a td. I cannot turn this into div.
Any thoughts?
Please let me know.
You might try a for instead of foreach. You would loop through the list divided by 3 and start a new td each time.
This is how I resolved it:
<table id="contractCoverablesGrid" width="600" align="center">
<tbody>
<tr>
#foreach (var coverableItem in Model.ContractCoverablesList)
{
<td>
<div id="dataListItem">
#Html.Hidden("coverableID", coverableItem.CoverID)
#Html.Label(coverableItem.Name)
<input type='checkbox' name="coverableItemCheckBox" id="coverableItemCheckBox" />
</div>
</td>
}
</tr>
</tbody>
</table>
<style>
#dataListItem {
float: left;
font-weight: normal;
}
</style>
I have nested tables where both the inner and outer tables have rows added to them dynamically. When I trigger an update of an inner table, after the inner table order has been changed, the order of the outer table is also changed. I've created a jsfiddle to demonstrate this:
http://jsfiddle.net/FZLxp/
which is forked from the OS question Nested jQuery Tablesorter tables, all sortable
To see the problem sort the outer table by Make so that Toyota is at the top and then click the "update" button. The update button triggers an update of the inner toyota table but also sorts the outer table as well to reflect the sort direction of the Toyota Doors column.
How can I sort the inner table after adding additional rows without sorting the outer table as well?
<script type="text/javascript">
function updateRW() {
$("#toyota").trigger("update", [true]);
}
</script>
<table class="tablesorter">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
</tr>
</thead>
<tbody>
<tr>
<td>Honda</td>
<td>Accord</td>
</tr>
<tr class="tablesorter-childRow">
<td colspan="2" style="padding: 0 30px 0 30px;">
<table class="tablesorter-child">
<thead>
<tr>
<th>Doors</th>
<th>Colors</th>
</tr>
</thead>
<tbody>
<tr>
<td>Honda 2-Door</td>
<td>Honda Red</td>
</tr>
<tr>
<td>Honda 4-Door</td>
<td>Honda Blue</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Toyota</td>
<td>Camry</td>
</tr>
<tr class="tablesorter-childRow">
<td colspan="2" style="padding: 0 30px 0 30px;">
<table id="toyota" class="tablesorter-child">
<thead>
<tr>
<th>Doors</th>
<th>Colors</th>
</tr>
</thead>
<tbody>
<tr>
<td>Toyota 2-Door</td>
<td>Toyota Yellow</td>
</tr>
<tr>
<td>Toyota 4-Door</td>
<td>Toyota Green</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<input type=button value="update" onclick="updateRW()">
$(document).ready(function()
{
$("table").tablesorter({selectorHeaders: '> thead > tr > th'});
});
This appears to be a bug in tablesorter!
I've opened an issue so we can track it, and I should have this fixed in the next update.
Thanks for reporting it!
I have a simple web page where for each row of data, I can pop up a jQuery UI dialog with the details of that row. Since there can be multiple rows in the sub-query a table is the best choice. The result is that I get an empty dialog box, and the table contained in that div (the one for the dialog) appears at the bottom of the page, whether the row is clicked to activate the dialog. Everything else works perfectly, the event for the click, the dialog popup, the passing of the right id for the div, all perfect.
But the dang table (the one inside the dialog, with the class of 'inner-table') appears at the bottom of the page, right off the bat.
The HTML is created in Groovy, with the HTMLMarkupBuilder, and the resulting HTML looks like the following:
<html>
<head>
<title>NAS Execution Groovy Servlet</title>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery-ui-1.8.23.custom.min.js'></script>
<script type='text/javascript' src='js/jquery.dataTables.min.js'></script>
<script type='text/javascript' src='js/executions.js'></script>
<link rel='stylesheet' type='text/css' href='css/jquery.dataTables_themeroller.css'></link>
<link rel='stylesheet' type='text/css' href='css/jquery-ui.css'></link>
<link rel='stylesheet' type='text/css' href='css/nas.css'></link>
</head>
<body>
<div id='results' class='execution-results'>
<p id='rpt-header'>
<span class='rpt-header-txt'>Backup Schedule Report for </span>
<span class='rpt-header-asset'>ret2w089n1t1</span>
</p>
<table id='nas-table'>
<thead>
<tr class='table-header'>
<th class='hidden'>Backup ID</th>
<th>Schedule Name</th>
<th>Backup Product</th>
<th>Size Mb</th>
<th>Start Time</th>
<th>Duration</th>
<th>Expiration Date</th>
<th>Mon 17</th>
</tr>
</thead>
<tbody>
<tr class='row'>
<td class='hidden'>12345678</td>
<td class='row-data'>null</td>
<td class='row-data'>Product One</td>
<td id='size-mb' class='row-data'>601.31</td>
<td class='row-data'>00:09:03</td>
<td class='row-data'>158 secs</td>
<td class='row-data'>2012-10-01</td>
<td class='row-center'>
<img id='success-fail' src='img/success.gif'></img>
</td>
</tr>
<tr class='row'>
<td class='hidden'>23456789</td>
<td class='row-data'>PolicyName</td>
<td class='row-data'>Product Two</td>
<td id='size-mb' class='row-data'>995.92</td>
<td class='row-data'>20:09:00</td>
<td class='row-data'>191 secs</td>
<td class='row-data'>2012-10-01</td>
<td class='row-center'>
<img id='success-fail' src='img/success.gif'></img>
</td>
</tr>
<div id='dialog-23456789' class='details-dialog'>
<table class='inner-table'>
<thead>
<tr>
<th>JOB_TYPE_NAME</th>
<th>VENDOR_STATUS_NAME</th>
<th>KILOBYTES</th>
</tr>
</thead>
<tbody>
<tr>
<td>Incr Backup</td>
<td>Successful</td>
<td>1019821</td>
</tr>
</tbody>
</table>
</div>
</tbody>
</table>
</div>
</body>
</html>
The jQuery for this is pretty simple; it uses the id from the row clicked on, and pops up a dialog window. That works fine, but the table that is contained in that div is actually at the bottom of the screen, even before anything is clicked:
$(document).ready(function() {
$('#nas-table').dataTable( {
"bJQueryUI": true,
"aaSorting": [[4, 'asc']]
} );
$('.row').live("click", function(){
var target = $(this);
var backupId = $(this).children(":first").html();
var thisId = '#dialog-' + backupId;
$(thisId).dialog(
{
title: "Backup Job Detail",
width: 800,
height: 450
}
);
$(thisId).dialog("open");
$(thisId).dialog("widget").position({
my: 'left top',
at: 'left bottom',
of: target
});
});
} );
At first, I thought the Groovy HTMLMarkupBuilder was outputting the DOM before everything happened, but when I do a view source, copy it to a file, and open the file in my browser, I get the same result.
I would appreciate any help with this. I asked this question earlier, in case you want to complain about that, but I had to follow up some other potential issues in the Groovy code, which I resolved. This example is more complete, and represents exactly what my code will do.
Brian
The problem is that you have a div nested within a table outside of a TR and TD, which will cause the rendering and DOM to be a bit wrong. If you adjust the html so that it resembles something like this it will work:
<div id='results' class='execution-results'>
<p id='rpt-header'>
<span class='rpt-header-txt'>Backup Schedule Report for </span>
<span class='rpt-header-asset'>ret2w089n1t1</span>
</p>
<table id='nas-table'>
<thead>
<tr class='table-header'>
<th class='hidden'>Backup ID</th>
<th>Schedule Name</th>
<th>Backup Product</th>
<th>Size Mb</th>
<th>Start Time</th>
<th>Duration</th>
<th>Expiration Date</th>
<th>Mon 17</th>
</tr>
</thead>
<tbody>
<tr class='row'>
<td class='hidden'>12345678</td>
<td class='row-data'>null</td>
<td class='row-data'>Product One</td>
<td id='size-mb' class='row-data'>601.31</td>
<td class='row-data'>00:09:03</td>
<td class='row-data'>158 secs</td>
<td class='row-data'>2012-10-01</td>
<td class='row-center'>
<img id='success-fail' src='img/success.gif'></img>
</td>
</tr>
<tr class='row'>
<td class='hidden'>23456789</td>
<td class='row-data'>PolicyName</td>
<td class='row-data'>Product Two</td>
<td id='size-mb' class='row-data'>995.92</td>
<td class='row-data'>20:09:00</td>
<td class='row-data'>191 secs</td>
<td class='row-data'>2012-10-01</td>
<td class='row-center'>
<img id='success-fail' src='img/success.gif'></img>
</td>
</tr>
</tbody>
</table>
<div id='dialog-23456789' class='details-dialog' style="display:none;">
<table class='inner-table'>
<thead>
<tr>
<th>JOB_TYPE_NAME</th>
<th>VENDOR_STATUS_NAME</th>
<th>KILOBYTES</th>
</tr>
</thead>
<tbody>
<tr>
<td>Incr Backup</td>
<td>Successful</td>
<td>1019821</td>
</tr>
</tbody>
</table>
</div>
</div>
The trick is to move the div outside of the parent table and also you need to set the display:none on the details table or it will be shown when the page is rendered.
I have a jquery dialog that contains a jquery accordion among other things. When I click the accordion headings to expand the different sections, the elements above the accordion lose their padding for the duration of the animation. The result is that these elements shift to the left for the duration of the animation. Below are the HTML/JS snippets in question.
Any thoughts?
HTML:
<div id="bodyDiv">
<!-- Dialog -->
<div id="patientPopup" title="Patient:" class="ui-widget">
<table style="width: 100%">
<tr>
<td class="AppointmentImage">
<img src="images/John-Petrucci-tn.jpg" alt="Patient Photo">
</td>
<td>
<b>Name:</b> Smith, Sally <b>DOB:</b> 02/15/1984 <br />
<b>SSN:</b> 999-99-9999 <b>Address:</b> 123 Main St Nashville, TN 37204
</td>
</tr>
<tr>
<td colspan="2" style="width: 100%">
<!--Accordion-->
<div id="patientSummary">
<h3>Encounters</h3>
<div>
<table class="PatientSummary">
<tr>
<th>12/03/2011</th>
<td>
Office visit - this is text for the office visit. some notes perhaps.
</td>
</tr>
<tr>
<th>10/16/2011</th>
<td>
GYN visit - this is text to fill some space.
</td>
</tr>
</table>
</div>
<h3>Alerts</h3>
<div>
<ul>
<li>Diabetic</li>
<li>Due for FluShot</li>
</ul>
</div>
<h3>Labs/Radiology</h3>
<div>
<table style="vertical-align: text-top;">
<tr>
<th>Date</th>
<th>Lab</th>
<th>Result</th>
</tr>
<tr>
<td>12/03/2011</td>
<td>Blood Panel</td>
<td>N</td>
</tr>
<tr>
<td>12/03/2011</td>
<td>Pregnancy Test</td>
<td>Y</td>
</tr>
<tr>
<td>12/03/2011</td>
<td>Blood Panel</td>
<td>N</td>
</tr>
<tr>
<td>12/03/2011</td>
<td>Pregnancy Test</td>
<td>Y</td>
</tr>
<tr>
<td>12/03/2011</td>
<td>Blood Panel</td>
<td>N</td>
</tr>
<tr>
<td>12/03/2011</td>
<td>Pregnancy Test</td>
<td>Y</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</div>
<button id="showPatient">Show Patient</button>
</div>
JavaScript:
$("#patientPopup").dialog({
autoOpen: false,
modal: true,
height: 530,
width: 600,
draggable: false,
resizable: false,
open: function () {
$("#patientSummary").accordion({
fillSpace: true,
autoHeight: true
});
}
});
$("#showPatient").button().click(
function () {
$("#patientPopup").dialog("open");
}
);
Any help would be appreciated. Thanks!
The solution was quite simple. I ended up putting the image and text in a completely separate table than the accordion.
Never determined exactly why the top elements were losing their padding though...