Column selector widget responsive is not working on safari #739
Comments
|
does our example work? thus is it only your code? |
|
The example isn't responsive on iphone 5, it show all content as on pc. |
|
I've tested my code on chrome, it work perfect. |
|
code //create sortable table
var tbl = ' <table id="'+settings.name+'ListTable" class="table table-striped table-bordered table-condensed ">';
tbl += '<thead><tr>';
tbl += '<th class="sequence">';
tbl += '<label class="checkbox"><input type="checkbox" class="checkAll">'+ (settings.messages[6]) + '</label>';
tbl += '</th>';
tbl += '<th class="lk-sequence">';
tbl += (settings.messages[7]) ;
tbl += '</th>';
for( var column=1; column<settings.columns.length; column++){
tbl += '<th data-priority="'+column+'">'+settings.columns[column].label+'</th>';
}
tbl += '</tr></thead>';
tbl += '<tfoot><tr><td colspan="'+(settings.isShowSequence?settings.columns.length+1:settings.columns.length)+'">';
tbl +='<div class="pagination tablepager pagination-right">';
tbl += '<ul >'+
'<li class="first"><a href="#" >«</a></li>'+
'<li class="prev"><a href="#" >‹</a></li>'+
'<li class="pagenav" style="display:none"><a href="#" ></a></li>'+
'<li class="next"><a href="#" >›</a></li>'+
'<li class="last"><a href="#">»</a></li>';
tbl += '</ul>';
tbl +='</div>';
tbl += '</td></tr></tfoot>';
tbl += '<tbody></tbody>';
tbl += '</table>';
//sorter options
var sorterOptions = {
headers: tableheaders,
sortList: sortList,
widgets: [ 'columnSelector',"uitheme", "stickyHeaders", "zebra"] ,
widgetOptions:{
columnSelector_mediaquery: true,
columnSelector_priority : 'data-priority'
}
};
$('#'+settings.name+'ListTable',paginationList).tablesorter(sorterOptions); |
|
Hi @bibitoo! I don't know why there is a difference between Safari and Chrome since they are both webkit browsers. If you are only having an issue with the widget on a mobile device, try adding this meta tag to your page <meta name="viewport" content="width=device-width" />I did find a minor issue with the widget when there are no set priorities, but I don't think it's related to this issue. |
|
Hi @Mottle, <meta name="viewport" content="width=device-width, initial-scale=1.0">I use bootstrap 2.3.2, Is the widget's css conflict with bootstrap on safari? |
|
When the widget hides a column, it adds css similar to this: /* .tablesorter0000 is a unique class name added to each table */
.tablesorter0000 tr th:nth-child(2),
.tablesorter0000 tr td:nth-child(2) {
display: none;
}and if media queries are active, css similar to this is added to the page: /* .tablesorter0000 is a unique class name added to each table */
@media only all { .tablesorter0000 tr th:nth-child(2),.tablesorter0000 tr td:nth-child(2) { display: none; } }
@media all and (min-width: 40em) { .tablesorter0000 tr th:nth-child(2),.tablesorter0000 tr td:nth-child(2) { display: table-cell; } }
@media all and (min-width: 50em) { .tablesorter0000 tr th:nth-child(3),.tablesorter0000 tr td:nth-child(3) { display: table-cell; } }
@media all and (min-width: 60em) { .tablesorter0000 tr th:nth-child(4),.tablesorter0000 tr td:nth-child(4) { display: table-cell; } }
@media all and (min-width: 70em) { .tablesorter0000 tr th:nth-child(5),.tablesorter0000 tr td:nth-child(5) { display: table-cell; } }So it shouldn't interfere, but the specificity of those selectors may not be enough to override other selectors that you have on your page. |
|
Thanks Mottle, I'll try to find it out why |
|
I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue this discussion. |
I've got it work in chrome , on iphone 5 responsive body column is hidden, but the table header still there! Any help would be appreciated!
The text was updated successfully, but these errors were encountered: