Column width fixed too long using column filter extension

  • Resolved catherinekerr

    (@catherinekerr)


    4 years, 1 month ago

    Hi Tobias – loving your plgin and extensions!

    I have a very wide table – 15 columns – and I am using the Responsive and Columns Filter extensions.
    The column widths seem to be fixed to all the SAME length (150px) instead of fitting the data. This is particularly evident on my production site where I use the Extranews theme – see link above. This site will be replaced shortly but I can’t show you my test site as it’s currently only on XAMPP.

    The problem is not so bad in my test site which uses the Radiate theme. With this theme, the issue only occurs when I set datatables_columnfilter to true.
    My shortcode is [table id=16 responsive="scroll" datatables_columnfilter=true]
    I was able to get around the issue as follows:
    1. Add extra css class ‘wide-table’ to the table.
    2. In plugin options add

       .wide-table input {
	width: 50px;
   }

    The result is that each column is set to optimum width based on content, but the input box in the foot of each column is only 50px. It doesn’t look very pretty if the column is much wider than that, but it is far better than all columns being far wider than they need to be.
    Alternatively, I could make custom css for each column but I also noted that this only worked if I added the input tag to the css as follows:

    .tablepress-id-12 .column-2 input {
	width: 50px;
}

    I am using WP version 5.6 (on my test site) and tested on Chrome, Edge and Firefox. Any suggestions to improve upon this workaround?
    Thanks, Catherine

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    To work around this, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress th .filter_column input {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

    (starting from a “clean” “Custom CSS” text area, in regard to modifications for this table or the input fields).

    Regards,
    Tobias

    Thread Starter catherinekerr

    (@catherinekerr)

    Thanks Tobias – very prompt reply!
    That fix worked perfectly for my test site. It still doesn’t work for my public site but I am not going to worry about that as the theme is obsolete and will be replaced soon.

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!
    Yes, the current live theme would then probably need slightly different CSS code.

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Column width fixed too long using column filter extension’ is closed to new replies.