Okay
  Public Ticket #3691448
Responsive table
Open

Comments

  • keerthiseelan started the conversation

    How to set scrollable table in mobile view and wrap table in desktop view.

  •  1,767
    Miloš replied

    Hello,

    If I understood, you would like to have one setting for Desktop screens on the table, to have it as "Limit table width to Page width";

    while for mobile screens, in the Responsive Mode, it should expand the table with a horizontal scroll?


    At the moment, that is not possible with our built in 'out of the box' options, because the "Limit table to page width" and "scrollable" ( horizontal scroll) options are mutually exclusive from each other, but there is a workaround we will share.


    As we explain on this Page for the built-in Display settings options :

    If you enable Limit Table Width, the Scrollable slider will be hidden from view. 

    The same logic applies in reverse fashion (if Scrollable is enabled, you won’t see Limit Table Width). Also, Word Wrap function appears, and can be enabled when Limit Table Width slider is enabled.


    If you wish to see a built-in easy option to customize having "Limit table width" for Desktop combined with "Horizontal scroll" for mobiles at the same time;  ( and vice-versa, basically to have different setting between mobile and desktop), you can make a development suggestion, but I can't say an ETA on it.

    Please feel free to search on our suggestions page

     to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there,  and as more people vote, the feature will move higher on the priority list.

    You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;

    and our newsletter, so you're informed about new features, bug fixes, freebies, etc.


    For now, you can only try with a custom solution.

    Please be advised that custom solutions are not covered by our support, we can only try to advise to get you started in the right direction.


    Here is one custom idea from our developers, it works for them, and a couple of other users confirmed it, but we can't guarantee it will work for everyone.

    You can check/enable the "scrollable" option in the table's Display settings, then add this to the Custom CSS in the Customize section of your Table :

    @media only screen and (min-width: 480px) {
        table.wpDataTable {
            table-layout: fixed !important;
        }
        
        .wdtscroll {
            overflow-x: unset !important;
        }
        
        table.scroll.wpDataTable.wpDataTableID-4 {
            width: 100% !important;
        }
    }

    Just make sure to change this ID '4' with your Table ID, and check if you edited what is the 'mobile responsive breakpoint' in your main Plugin settings.

    The default is 480px, but if you changed it, then change it accordingly in this "media Query" in our CSS code.


    I hope that helps.

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables