Limiting column Filter Dropdown widths

  • Resolved claing

    (@claing)


    6 years, 6 months ago

    Hello,

    Does anyone know how I might be able to limit the width of column filter dropdowns? Due to a lot of table data for a particular column, I’ve got a dropdown menu that is running 3X the width of my page.

    See screenshot:

    Example Screenshot

    Thanks,
    Christopher

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years, 6 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

    Regards,
    Tobias

    Thread Starter claing

    (@claing)

    6 years, 6 months ago

    Hi Tobias,

    Good to hear from you again.

    This is a test site for the table in question: https://summitpump.com/table-press-test-area/

    On a related concern, I would like to extend the width of the overall table – (not as wide as the Model filter dropdown) if you have any pointers on this as well. I’m stuck.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years, 6 months ago

    Hi,

    thanks for the link. Please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .column-filter-widget select {
  width: 250px;
}

    For the table width: Your table is actually too wide for the screen. You might want to look for a solution for responsiveness, e.g. via https://tablepress.org/extensions/responsive-tables/

    Giving it more space (on the left side) would require changing your theme’s CSS code, but I don’t know the best way for that, sorry.

    Regards,
    Tobias

    Thread Starter claing

    (@claing)

    6 years, 6 months ago

    Tobias,

    Thank you so very much! Both suggestions did the trick! (Custom CSS and the responsive-tables extension).

    If I want to apply the widget width CSS to just this one table (current example applies to all tables on my site) what would that code look like?

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years, 6 months ago

    Hi,

    good to hear that this helps! To only apply this to one table, please use

    #tablepress-InvtStnd_wrapper .column-filter-widget select {
  width: 250px;
}

    Note how the table ID is part of the CSS selector.

    Regards,
    Tobias

    Thread Starter claing

    (@claing)

    6 years, 6 months ago

    Perfect, that does the trick! Thanks again

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years, 6 months ago

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

    Best wishes,
    Tobias

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

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Limiting column Filter Dropdown widths’ is closed to new replies.