Okay
  Public Ticket #2779558
column width
Closed

Comments

  • Marcos started the conversation

    Hello,

    I understand that in customize you can have either a full word-wrap or a scrollable one. I've chose scrollable table, but would like to limit a specific column width and set it to word-wrap. Can this be done with CSS?

    I tried this css class for a column in my table but it did not have any effect.

    .col1 { width: 200px !important;  word-wrap: break-word !important;}

    Thanks


  •  471
    Isidora replied

    Hi Marcos,

    Thank you for your purchase.

    Can you try with this?

    .wpDataTable th.wdtheader.col1,
    .wpDataTable td.col1{
        width: 200px !important;
        word-wrap: break-word !important;
        white-space: normal !important;
    }
    

    Best regards.

    Kind Regards, 

    Isidora Markovic

    wpDataTables: FAQFacebookTwitterFront-end and back-end demoDocs

    Amelia: FAQFacebookTwitter |  Amelia demo sites | Docs

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

    Powerful FiltersGravity Forms Integration for wpDataTablesFormidable Forms Integration for wpDataTables

  • Marcos replied

    Dear Milan,

    Thanks for your reply. 

    col1 will be the name of the CSS class I have to specify in the column settings? right?

    I have tried this with mixed results.  The column changed, but I could not set the width. I have prepared a presentation with some pics of what I did, so you may check If i've done something wrong. Please see this link:  https://drive.google.com/file/d/1gzD5OtEQrKADpBSzSCvMnaiBzK1DHxvr/view?usp=sharing

    Please let me knw if you see something wrong. In the last slide I added all the CSS code in the table. 

    please keep in mind that at the end I need to change several columns to make the table thinner.

    Thanks

    Marcos


  •  471
    Isidora replied

    Hi Marcos,

    Yes, you need to insert that class in CSS class in column settings. Because this is working in our local environment, we need to investigate on your server what CSS rule(from other plugin or theme) have more priority then this.

    Please provide me a temporary WP-admin login for your site where this happens, so we could log in and take a look ‘from the inside’ as that’s the most efficient way to see and resolve the issue. We do not interfere with any data or anything else except for the plugin (in case that’s a production version of the site), and of course we do not provide login data to third party. You can write credentials here just check Private Reply so nobody can see them except us.

    Also provide us table id where this happens so we can investigate. Also if you are using it on some page please provide us as well.

    Kind Regards, 

    Isidora Markovic

    wpDataTables: FAQFacebookTwitterFront-end and back-end demoDocs

    Amelia: FAQFacebookTwitter |  Amelia demo sites | Docs

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

    Powerful FiltersGravity Forms Integration for wpDataTablesFormidable Forms Integration for wpDataTables

  •   Marcos replied privately
  •   Marcos replied privately
  •   Isidora replied privately
  •   Marcos replied privately
  •  471
    Isidora replied

    Hi Marcos,

    Yes, and that is the reason why those two options are not available to use it at once(Limit table width and Scrollable). First suggestion for one column is working, but not great in every cases. 

    Maybe you can try with Limit table width only and then other columns hide under Responsive feature. You can check out on this link https://wpdatatables.com/documentation/table-features/responsiveness/  and in video tutorial you can see how you can use it on desktop view as well.

    Best regards.

    Kind Regards, 

    Isidora Markovic

    wpDataTables: FAQFacebookTwitterFront-end and back-end demoDocs

    Amelia: FAQFacebookTwitter |  Amelia demo sites | Docs

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

    Powerful FiltersGravity Forms Integration for wpDataTablesFormidable Forms Integration for wpDataTables

  • Marcos replied

    Milan,

    Thanks. Moving to responsive and having the columns to collapse was definitely the way to go.  You can see the result in pic3 below. So I took out all the css regarding the column width.

    I have 2 more questions:

    1. at the bottom of the table, the current page got obscured  - see pic4 - is there a CSS option to fix this?

    2. I'd like to improve the appearance of the filter selection (see pic5), that doesn't look to good in RTL and the checkbox is to close to the categories.  any idea on how to go with this?

    Thanks again,

    Marcos

  •  471
    Isidora replied

    Hi Marcos,

    I am glad that you are satisfied with Responsive solution.

    About the questions, at the moment wpDataTables is not fully compatible with RTL so such CSS conflicts or weird layout are possible.

    For pagination color it is conflict with tablepress plugin that have CSS rule with higher priority. You can override it with CSS below. Arrows need to be reverted for RTL so below CSS fix it.

    For checkboxes in modal same about RTL. you can try with CSS below. Please note that you will probably find more of this, and like I explain we are not fully compatible with RTL and it should be implemented in near future. Thank you for understanding.

    // Pagination
    .wpDataTableID-10 .dataTables_paginate a.paginate_button.current {
        color: #FFFFFF !important;
    }
    .wpdt-c.wdt-skin-graphite .wpDataTableID-10.wpDataTablesWrapper .paginate_button.previous:before {
        content: "\e001" !important;
    }
    .wpdt-c.wdt-skin-graphite .wpDataTableID-10.wpDataTablesWrapper .paginate_button.next:before {
        content: "\e002" !important;
    }
    .wpdt-c.wdt-skin-graphite .wpDataTableID-10.wpDataTablesWrapper .paginate_button.first:before {
        content: "\e003" !important;
    }
    .wpdt-c.wdt-skin-graphite .wpDataTableID-10.wpDataTablesWrapper .paginate_button.last:before {
        content: "\e004" !important;
    }
    // Checkbox modal
    #wdt-frontend-modal.wdt-skin-graphite .wdt_checkbox_option input[type="checkbox"] {
        margin: 0 10px 0 10px !important;
    }
    #wdt-frontend-modal.wdt-skin-graphite .modal-title {
        float: right;
    }
    #wdt-frontend-modal.wdt-skin-graphite .modal-header button.close {
        float: left;
    }
    #wdt-frontend-modal.wdt-skin-graphite .wdt_checkbox_option label{
       display: flex !important;
    }
    

    Best regards.

    Kind Regards, 

    Isidora Markovic

    wpDataTables: FAQFacebookTwitterFront-end and back-end demoDocs

    Amelia: FAQFacebookTwitter |  Amelia demo sites | Docs

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

    Powerful FiltersGravity Forms Integration for wpDataTablesFormidable Forms Integration for wpDataTables

  • Marcos replied

    Milan

    Thanks. Following are comments on the 2 issues + an additional one.

    1. The page number worked very well. I did not notice the arrows direction in RTL, so thanks for that! - but the fix did not work. please see pic6.png

    2. The RTL CSS for the checkbox filter worked very good. I have now 2 active tables so I implemented this in the other table, which is in Aqua skin, and also worked fine (see pic70-...png)

    3. There is an additional problem in the SelectBox filter type in the graphite skin. The select arrow has a different background. Please see pic8.png. I tried to find how to set this element to gray and not blue, but did not succeed.   Is not critical, but I'd like to change it to the base color.

    Thanks for the explanation about the RTL. Generally it works fine, and the users response has been positive. But it means I may have to contact you for CSS fixes from time to time. 

    Regards,

    Marcos


  •  471
    Isidora replied

    Hi Marcos,

    Yes we notice that. We update CSS on your Custom CSS field for this and now is working fine.

    For icons it was necessary to add one more backslash because one is used for escaping.

    We add some margins in checkbox modal for buttons, and change background-color on that before element which is coming from your theme in  select-box filter.

     Please check on website.

    Best regards.

    Kind Regards, 

    Isidora Markovic

    wpDataTables: FAQFacebookTwitterFront-end and back-end demoDocs

    Amelia: FAQFacebookTwitter |  Amelia demo sites | Docs

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

    Powerful FiltersGravity Forms Integration for wpDataTablesFormidable Forms Integration for wpDataTables

  • Marcos replied

    Milan

    Thanks very much. It looks very good now. I will try other filter options, and if there are new issues I will write in a new post.

    I work with a high resolution screen laptop computer and a secondary screen.  Usually I work on the secondary screen, but yesterday I opened the table in the laptop and the fields collapsing did not work.  I thought something went wrong, but when I tried in a regular screen it did work again. Please see the picture attached. 

    Marcos



  •  471
    Isidora replied

    Hi Marcos,

    You are welcome.

    Yes and that is because you set Tablet width to be 1920 pixels in Settings of plugin. We increase it on 5920 and now is working fine.

    Also please set up view for mobile as well(hide columns that you need behind collapse button). You can do it for tablets as well by increasing Mobile width on 768 or what ever you need, it is just suggestion) Do not confuse, because tablet width you already set for desktops.

    Best regards.

    Kind Regards, 

    Isidora Markovic

    wpDataTables: FAQFacebookTwitterFront-end and back-end demoDocs

    Amelia: FAQFacebookTwitter |  Amelia demo sites | Docs

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

    Powerful FiltersGravity Forms Integration for wpDataTablesFormidable Forms Integration for wpDataTables

  • Marcos replied

    Yes, and it is working indeed.

    I think we can close now this ticket.

    When new issues arise I will open a new one.

    Thanks for all the help,

    Marcos

  •  471
    Isidora replied

    Hi Marcos,

    You are welcome.

    If you have any other issue or question please open new ticket, and we help you out.

    I’d like to ask you a favor. Would you mind taking a few minutes to write a review for us, please on this link

    Our free version is the only place where we can have proof for our hard work; your comments are beneficial for others to know what to expect when they’re looking for our plugin.

    Thank you in advance. It means a lot to us, and I am looking forward to reading your comment.

    Best regards.

    Kind Regards, 

    Isidora Markovic

    wpDataTables: FAQFacebookTwitterFront-end and back-end demoDocs

    Amelia: FAQFacebookTwitter |  Amelia demo sites | Docs

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

    Powerful FiltersGravity Forms Integration for wpDataTablesFormidable Forms Integration for wpDataTables

  • Marcos replied

    Milan

    Thanks. I left a review and was happy to see I'm not the only satisficed user.

    I'm sure I'll need more help as I continue exploring the wpDataTables options, I just started to touch.

    Marcos


  •  471
    Isidora replied

    Hi Marcos,

    Thank  you so much for great review, it means us a lot.

     No problem at all, if you have any issues or questions please open new ticket and we will help you out.

    Best regards.

    Kind Regards, 

    Isidora Markovic

    wpDataTables: FAQFacebookTwitterFront-end and back-end demoDocs

    Amelia: FAQFacebookTwitter |  Amelia demo sites | Docs

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

    Powerful FiltersGravity Forms Integration for wpDataTablesFormidable Forms Integration for wpDataTables