Okay
  Public Ticket #3762283
Column wrap
Open

Comments

  • robertcabiyaan started the conversation

    Hello,

    I need help on how to wrap the text field in a column. Thanks


  •  1,825
    Miloš replied

    Hello,

    For word wrapping of the main cells of the Table, in the rows, you can easily achieve this.

    Just enable "Limit table width to page width" in the Table's Display settings, then you will see a new option 'word wrap' appear.

    7500551481.png

    Please check more about these options for Table's Display settings here.

     

    2. In case if you also need to 'word wrap' the Header Row as well, that needs a custom workaround.

    You can 'force' the Header row to have the 'word wrap' , with this CSS :

    .wpDataTablesWrapper table.wpDataTable > thead > tr > th {
        white-space: pre-wrap!important;
    }

    If you want all your Table headers to have this, add this to the main Plugin settings/Custom JS and CSS/Custom CSS.

    Or if you just need it for one Table, go in the Table's Customize/Custom CSS and insert it there.

    If you have multiple Tables on the same Page, and for example, if this CSS makes the 'other tables' wrap the Header row - but if you just want to 'target' a specific Table ID - you can use the Table ID like this :

    .wpDataTablesWrapper table.wpDataTableID-76 > thead > tr > th {
        white-space: pre-wrap!important;
    }

    Just change the 76 to your table ID.

    In this case, if you need multiple Tables on the same WP Page and to 'target' each table individually by ID, it is best to directly add this CSS to the Page.

    Custom code needs to be applied to the page where the booking form is. Depending on what you're using (Gutenberg blocks, or some page builder), adding the CSS or JS can be done in a few different ways. 

    If you need help with adding custom CSS to the page, please take a look at this article.

     

    Let me know if 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