Using jQuery Mobile - and the new ui-responsive class for a table - the table is supposed to collapse into a single column if the viewport becomes too narrow.
However - when I drag the browser to make the viewport smaller, it takes the first column heading, and adds it to the table footer:
Viewport wide enough:
Narrow Viewport:
My HTML markup is:
<table data-role="table" class="ui-responsive">
<thead>
<tr class="ui-bar-b">
<th>Column Header 1</th>
<th>Column Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select></select>
</td>
<td>
<select></select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" style="text-align:center;">
<button data-icon="plus">Add</button>
</td>
</tr>
</tfoot>
</table>
I've added a demo to jsFiddle here: http://jsfiddle.net/mtait/44k3E/2/
Is this just a bug in the Mobile CSS - or is it known, and is there a work around?
Thank you,
Mark
It is not adding extra header. This is the way in which it works. It will put the heading above each column values when its width reduces.
For better understanding refer to the updated fiddle link. DEMO
<table data-role="table" class="ui-responsive">
<thead>
<tr class="ui-bar-b">
<th>Column Header 1</th>
<th>Column Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select></select>
</td>
<td>
<select></select>
</td>
</tr>
<tr>
<td>
<select></select>
</td>
<td>
<select></select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<button data-icon="plus">Add</button>
</td>
<td>
<button data-icon="plus">Add</button>
</td>
</tr>
</tfoot>
</table>
Related
I am replacing a plain HTML table like the one in the snippet below with an Angular.js ui-grid
<table border="1">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td colspan="3">
table data goes here...
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" style="text-align: center">
Footer heading
</td>
</tr>
<tr>
<td>Sum of col1</td>
<td>Sum of col2</td>
<td>Sum of col3</td>
</tr>
<tr>
<td colspan="3" style="text-align: right">
Footer notes
</td>
</tr>
</tfoot>
</table>
As you can see the footer layout is not very simple. I have seen that is possible to customize the gridFooterTemplate and the single columns footerTemplate. However the grid footer is always placed below the columns footer.
Is it possible to place the grid footer above the columns footer? Alternatively can I create a grid footer template that encloses the columns footer?
I am trying to generate a HTML Table, that has rowSpan (as you see in the picture)
I manage to generate the table for columns 1 and 2 and 3. Here is the code:
<td rowspan="2"> a</td>
<td>bb</td>
<td>d</td>
</tr>
<tr>
<td>c</td>
<td>e</td>
</tr>
but when it gets to column4, I can't figure out what to do. I create a nested table but it doesn't work properly.
Anyone has any idea?
I think you're looking for this - the first column spans 3 rows, the middle columns span just a single row, and the top right column is again 2 rows spanned:
<table border="1">
<tr>
<th>col 1</th>
<th>col 2</th>
<th>col 3</th>
<th>col 4</th>
</tr>
<tr>
<td rowspan="3">a</td>
<td rowspan="2">b</td>
<td rowspan="2">c</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
</tr>
<tr>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
</table>
See https://jsfiddle.net/gpnx0nqj/
Note that the second row only have two cells (td).
I have something like this for big screens:
<table>
<thead>
<tr>
<th>title and image</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
title
<br /><img scr="">
</td>
<td>
few words about...
</td>
</tr>
</tbody>
</table>
And I would like to change it to the following code for smaller screen:
<table>
<thead>
<tr>
<th>title and description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
title
<br />few words about...
</td>
</tr>
</tbody>
</table>
Do you know how to do that properly? :)
I'd like to do it with CSS only but I can code in PHP and JS as well.
Thanks all and have a good day!
You could - in a media query - use this CSS to convert the rows into cells and the cells into simple inline elements:
tr {
display: table-cell;
}
td {
display: inline;
}
<table>
<thead>
<tr>
<th>title and image</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
title
<br /><img scr="">
</td>
<td>
few words about...
</td>
</tr>
</tbody>
</table>
There's a css feature called a media query that allows you to apply css rules conditionally based on properties of the display. For instance, it could be used with a condition like min-width(700px) to target large screens and something like max-width(320px) for small screens.
The following approach will have repetition in your markup but if you're using PHP to render it, then you could reduce repeated code by storing the repeated markup in variables and referencing those.
CSS:
#media (min-width: 321px) {
.small-screen {
display: none;
}
}
#media (max-width: 320px) {
.large-screen {
display: none;
}
}
HTML:
<table>
<thead>
<tr class="large-screen">
<th>title and image</th>
<th>description</th>
</tr>
<tr class="small-screen">
<th>title and description</th>
</tr>
</thead>
<tbody>
<tr class="large-screen">
<td>
title
<br /><img scr="">
</td>
<td>
few words about...
</td>
</tr>
<tr class="small-screen">
<td>
title
<br />few words about...
</td>
</tr>
</tbody>
</table>
with css media queries, above a certain browser or screen width, show "wideDisplay" and hide "narrowDisplay". When the browser is small, hide "wideDisplay" and show "narrowDisplay".
<table>
<thead>
<tr>
<td class="wideDisplay">title and image</td>
<td class="wideDisplay">description</td >
<td class="narrowDisplay">title and description</td>
</tr>
</thead>
</table>
I have the following bootstrap table, I want to add a textarea for a row.
But that text area should expand to all the columns. I have included a image example.
For row 2 I want to have the 4 columns and the textarea. text area should cover all the column as show in the image below.
Is it possible to do?
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table id="table" class="table table-bordered">
<thead>
<tr>
<th data-field="state" data-radio="true"></th>
<th data-field="name">Name</th>
<th data-field="starts">Stars</th>
<th data-field="forks">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="radioGroup"></td>
<td>
bootstrap-table
</td>
<td>526</td>
<td>122</td>
<td>An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)
</td>
</tr>
<tr>
<td><input type="radio" name="radioGroup" checked></td>
<td>
multiple-select
</td>
<td>288</td>
<td>150</td>
<td>A jQuery plugin to select multiple elements with checkboxes :)
</td>
</tr>
<tr>
<td><input type="radio" name="radioGroup"></td>
<td>
bootstrap-show-password
</td>
<td>32</td>
<td>11</td>
<td>Show/hide password plugin for twitter bootstrap.
</td>
</tr>
</tbody>
</table>
You can achieve it in the following way--
Add colspan=12 to your <td> which contains the textarea and give the text area width:100%
Working snippet
textarea {
width:100%;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table id="table" class="table table-bordered">
<thead>
<tr>
<th data-field="state" data-radio="true"></th>
<th data-field="name">Name</th>
<th data-field="starts">Stars</th>
<th data-field="forks">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="radioGroup"></td>
<td>
bootstrap-table
</td>
<td>526</td>
<td>122</td>
<td>An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)
</td>
</tr>
<tr>
<td><input type="radio" name="radioGroup" checked></td>
<td>
multiple-select
</td>
<td>288</td>
<td>150</td>
<td>A jQuery plugin to select multiple elements with checkboxes :)
</td>
</tr>
<tr>
<td><input type="radio" name="radioGroup"></td>
<td>
bootstrap-show-password
</td>
<td>32</td>
<td>11</td>
<td>Show/hide password plugin for twitter bootstrap.
</td>
</tr>
<tr>
<td colspan="12">
<textarea></textarea>
</td>
</tr>
</tbody>
</table>
I am using sorttable to sort my columns in table.
Now I have a table as follows:
<table class="sortable draggable">
<thead>
<tr>
<th class="col-salesOrderId">Order Number</th>
<th class="col-orderDate">Date of Order</th>
<th class="col-party">Party</th>
<th class="col-edit">Edit</th>
<th class="col-delete">Delete</th>
</tr>
</thead>
<tbody>
{#orders}
<tr>
<td class="col-salesOrderId">{.salesOrderId}</td>
<td class="col-orderDate">{#formatDate date=orderDate format="DD-MM-YYYY" /}</td>
<td class="col-party">{.party.partyName}</td>
<td class="col-edit">
<button class="btn btn-info btn-edit">
</button>
</td>
<td class="col-delete">
<button class="btn btn-danger btn-delete">
</button>
</td>
</tr>
<tr class="row-details">
<td>{.salesOrderId}</td>
<td colspan="4">
<table class="sortable draggable">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<th class="col-rate">Rate</th>
<th class="col-amount">Amount</th>
</tr>
</thead>
<tbody>
{#items}
<tr>
<td>{.item.itemName}</td>
<td>{.quantity}</td>
<td>{.rate}</td>
<td>{#math key="{.quantity}" method="multiply" operand="{.rate}"/}</td>
</tr>
{/items}
</tbody>
</table>
</td>
</tr>
{/orders}
</tbody>
</table>
Have you noted in the above mentioned table I have row details for each row?
Now when I click on a column header to sort it, I get the row details first and then I get all the main rows.
Here is how my table looks before sorting:
Here is how my table looks after sorting:
Is there any solution to this problem still using sorttable?
Update:
Here is sample jsFiddle
Row details are now sorted correctly as shown in the above jsFiddle. But now the problem is :
When you click on City column everything looks fine. Now if we again click on City Column, the row details are displayed before the actual rows which is wrong.
Please look at the images below for more information on problem:
After Clicking on City Column: (Which looks perfect)
After Clicking on City Column Again: (Expected for a developer but unexpected for a user)
I'am guessing but maybe the problem is the empty td beside the row details. I added first name as value and set css style display:none. Now the row details will be sorted also correctly.
Updated answer:
try to just nest the table inside the td like the below example.
Try this:
<table class="sortable">
<thead>
<tr>
<th>First Name</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vishal</td>
<td> Sherathiya
<table>
<thead>
<tr>
<th>Degree</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.E.</td>
<td>67</td>
</tr>
</tbody>
</table>
<td>
</tr>
<tr>
<td>Nikunj</td>
<td>Ramani
<table>
<thead>
<tr>
<th>Degree</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.E.</td>
<td>80</td>
</tr>
<tr>
<td>M.E.</td>
<td>54</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Raj</td>
<td>Gosai</td>
</tr>
</tbody>
</table>