Okay
  Public Ticket #3637301
Responsive Table
Closed

Comments

  • Nathan Hamilton started the conversation

    Is there a way to force the table included in the referenced page to be full width on desktop and horizontal scrolling responsiveness on mobile? If the table with the current settings has more columns, it'd horizontally scroll.

  •  1,767
    Miloš replied

    Hi Nathan,

    Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.

    -

    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?

    Sorry to disappoint you, but at the moment, that is not possible with any built in options, because the "Limit table to page width" and "scrollable" ( horizontal scroll) options are mutually exclusive from each other.


    As we explain on this Page for the 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 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, 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