Okay
  Public Ticket #3301436
Horizontal scrollbar funtciont problem
Closed

Comments

  • Jorge Lopez started the conversation

    Hello, I have a table with many columns but in desktop mode I can see how the table leaves the screen and when I select the option to limit the width of the table I can solve the problem but there are columns that disappear, that is, they are hidden and I don't have the option to make a horizontal scroll bar to view the data.

    How is it possible that in wp datatables you don't have the option to limit the width to the block container but at the same time you can add the horizontal scroll bar to be able to navigate the different columns horizontally?


    Also I want to avoid having to use the option limit table width + wrap words in newlines. because this does not look good graphically

    Attached files:  Captura.PNG

  •  1,688
    Miloš replied

    Hi, Jorge.

    At the moment the logic for this in the table's Display settings is like this :

    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.

    Our developers made it like this because they found some issues happen when they tried to allow all the options at the same time.

    If you wish to see this improved, please make a development suggestion, and we will do our best.

    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 the time being, i can only share this custom workaround idea, if you wish to try.

    If you wish to use "scrollable" ( for the horizontal scroll)  in the Display options of the table;

    while being able to set a custom width for columns.

    First enable "scrollable" in the Display tab, 

    then you can add this custom CSS to the table's customize / Custom CSS tab :

    .wpDataTablesWrapper table.scroll.wpDataTableID-1 {  
      width: max-content !important;  
      table-layout: fixed !important;
    }
    .wpDataTableID-1 th.column-strap { 
        width:300px !important;
    }
    

    You will have to replace the table ID with your table's ID,

    and for the column name, you have to set the "origin header name" of the column, after this part : "th.column-"

    For example, on my test table here,

    3508070018.png

    if i wish to add the custom width in this CSS for the "firstname" column,

    it would be 

    .wpDataTableID-2671 th.column-firstname {  
       width:300px !important;
    }
    1421007837.png

    Let me know if that helped.

    Thank you

    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