Column width altered by using search function

  • Resolved rogerstone26

    (@rogerstone26)


    7 years, 8 months ago

    I have used Custom CSS to set the required column widths for my table (using percentages) and this seems to work fine.

    But when I use the search box at the top of the table, the column widths change.

    For example, type “Sport” into the search box and the last column becomes much bigger while the one next to it becomes smaller.

    Is there a way to fix this please?

    I am using V1.9 of TablePress and the latest versions of its extensions.

    Thanks for your help – I looked through the existing threads and did not see this so hopefully this is not a duplicate

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

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

    (@tobiasbg)

    7 years, 8 months ago

    Hi,

    thanks for your question, and sorry for the trouble.

    The reason for this is the very long URLs in your table’s first column.
    When searching for “Sport” you will be getting those URLs that are very long but don’t have any hyphens where the browser could add line breaks (which it can for the URLs that are shown initially).
    Your only real chance here is to add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress-id-11 .column-1 {
    word-break: break-all;
}

    but you will then have rather “ugly” line breaks in the URLs. So, the best approach might be turn them into links with a short link text, like “Website” or “Link”.

    Regards,
    Tobias

    Thread Starter rogerstone26

    (@rogerstone26)

    7 years, 8 months ago

    Hi Tobias

    Thank you very much for your guidance. In the short term I will use the word-break solution and look to change the link texts in the future.

    I appreciate your support

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    7 years, 8 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!

    Thread Starter rogerstone26

    (@rogerstone26)

    7 years, 8 months ago

    Follow up for anyone else who has this problem. The solution of adding
    word-break: break-all;
    in the CSS was a reasonable fix for desktop viewing.

    Then I checked and it produced a layout on mobiles that was practically unreadable (column 1 became one character wide).

    So I followed Tobias’s suggestion for the best approach, using short links. It took some work to change all the fields but it now works well.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    7 years, 8 months ago

    Hi,

    yeah, that approach has that drawback on mobiles, unfortunately 🙁
    Using the short links is the best then.

    Best wishes,
    Tobias

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

The topic ‘Column width altered by using search function’ is closed to new replies.