Sortlist widget is not working on mobile versions of a webpage

Sortlist widget is not working on mobile versions of a webpage

  

Hello guys, I'm able to use the sortlist widget and it's working fine on my application when it's accessed through a desktop browser. But when accessing the same page through a mobile device, as the page is adjusted automatically, it also removes the link I used to have on my columns to sort the table....


I'm using Lisbon Theme and seems that this could be easily adjusted, maybe tweaking the CSS. Does anyone know how to make the widget work on mobile friendly pages?


Thanks, Daniel

Solution

Hi Daniel,

When you are in a mobile device the header of the table (where the sorting links are) is not displayed.

You can make for the header of the table to be always displayed by pasting this code into the CSS of your page:

.tablet.portrait .TableRecords:not(.NoResponsive) > thead, .phone .TableRecords:not(.NoResponsive) > thead {
    display: block;
}

.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > th, .tablet.portrait .TableRecords:not(.NoResponsive) > * > * > th, .phone .TableRecords:not(.NoResponsive) > * > * > th, .phone .TableRecords:not(.NoResponsive) > * > * > th {
    border-bottom: none;
    float: left;
    padding: 5px;
    width: 100%;
}

The first part will display the header in all devices. The second part just makes the cells of the header a little bit nicer in a mobile device (by using roughly the same formatting as the rest of the cells of the table).

Cheers,

José


Solution

José Costa wrote:

Hi Daniel,

When you are in a mobile device the header of the table (where the sorting links are) is not displayed.

You can make for the header of the table to be always displayed by pasting this code into the CSS of your page:

.tablet.portrait .TableRecords:not(.NoResponsive) > thead, .phone .TableRecords:not(.NoResponsive) > thead {
    display: block;
}

.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > th, .tablet.portrait .TableRecords:not(.NoResponsive) > * > * > th, .phone .TableRecords:not(.NoResponsive) > * > * > th, .phone .TableRecords:not(.NoResponsive) > * > * > th {
    border-bottom: none;
    float: left;
    padding: 5px;
    width: 100%;
}

The first part will display the header in all devices. The second part just makes the cells of the header a little bit nicer in a mobile device (by using roughly the same formatting as the rest of the cells of the table).

Cheers,

José


Hello Jose! Great !! It solved the problem! :)

Thank you so much!!