Seperated Cell Content Scrollable by keeping width

  • Resolved digiblogger

    (@digiblogger)


    6 years, 1 month ago

    Hello Tobias,
    imagine I have a cell with comma sperated content like:

    value-1, another-value2, another-value3

    These values are part of the filter widgets, so they are needed there (just to let know).

    Is it possible to make the cell break the line after every comma, so keeping only the width of the longest value inside and scroll the cell content vertical by keeping the height of one line?

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

    (@tobiasbg)

    6 years, 1 month ago

    Hi,

    thanks for your post, and sorry for the trouble.

    That’s tricky. You would need an extra HTML element (like a <div>) inside the cells, with some special CSS code. Most likely, that will however break the Column Filter Widgets for that column…
    You could maybe get around this by adding a duplicate of that column (but with the extra HTML), and only showing the Column Filter Widget for that, using the exclude Shortcode parameter. At the same time, you could hide that new column with CSS.

    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 digiblogger

    (@digiblogger)

    6 years, 1 month ago

    Sure.

    Here is the Link

    Actually, i added some css and have a horizontal scrollbar there ny keeping the cells with.
    It´s ugly that way, I think.

    would love to have every comma seperated word in Drops and Drops (DLC) columns in a single line, but keep the width and height.

    If there is a solution with a vertical (thinner) scrollbar inside a cell, i would prefer this I think.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    6 years, 1 month ago

    Hi,

    First, please duplicate these two columns.

    Then, please try wrapping the content of the columns in extra HTML code:

    <div>your keywords, ...</div>

    (so that one column has this, and the copy does not).

    Also remove your CSS for that column again, as it might interfere.
    Instead, add this CSS:

    .tablepress-id-1  .column-12 div,
.tablepress-id-1 .column-14 div {
  max-height: 200px;
  overflow-y: auto;
  width: 200px;
}
.tablepress-id-1 .column-13,
.tablepress-id-1 .column-15 {
  display: none;
}

    (maybe with adjusted column numbers).

    Then, also add

    datatables_columnfilterwidgets_exclude_columns=12,14

    to the Shortcode.

    Regards,
    Tobias

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

The topic ‘Seperated Cell Content Scrollable by keeping width’ is closed to new replies.