Column selector widget responsive is not working on safari

bibitoo commented 10 years ago

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!

thezoggy commented 10 years ago

does our example work? thus is it only your code?

bibitoo commented 10 years ago

The example isn't responsive on iphone 5, it show all content as on pc.

bibitoo commented 10 years ago

I've tested my code on chrome, it work perfect.

bibitoo commented 10 years ago

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="#" >&laquo;</a></li>'+
            '<li class="prev"><a href="#" >&lsaquo;</a></li>'+
            '<li class="pagenav" style="display:none"><a href="#" ></a></li>'+
            '<li class="next"><a href="#"  >&rsaquo;</a></li>'+
            '<li class="last"><a href="#">&raquo;</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);

Mottie commented 10 years ago

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 <head>:

<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.

bibitoo commented 10 years ago

Hi @Mottle, I've add this tag

<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?

Mottie commented 10 years ago

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.

bibitoo commented 10 years ago

Thanks Mottle, I'll try to find it out why

Mottie commented 10 years ago

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.

Mottie / tablesorter

Column selector widget responsive is not working on safari #739