Responsive Collapse – Format Issue

  • Resolved IMTanuki

    (@imtanuki)


    6 years, 11 months ago

    Hi Tobias,

    CONTEXT
    – using responsive / collapse
    – at least 1 column that is exposed when the collapse button is clicked has 20+ characters

    ISSUE
    – the exposed column labels are right-aligned
    – the exposed column values are left-aligned
    – any value that does not fit on 1 line wraps to the next line under the label so that the wrapped text appears under the label (looks sloppy)

    I was expecting the collapse function to keep the labels and values visually separate, even with wrapping. Is there any way to do this, such that, if a value wraps, it wraps on the right hand side of the screen.

    In effect, what I’m trying to achieve (when the collapse button is clicked) is to have 2 columns, the first is the list of labels and the second is the values. They should be visually separate – a wrapped value should not appear under the label…

    Thoughts?

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter IMTanuki

    (@imtanuki)

    UPDATE
    When I use white-space: nowrap:

    – the overall formatting is “correct” – labels and values are cleanly separated.
    – any long text that would otherwise wrap is now truncated. Not great, but better than wrapping under the label…

    Not a perfect solution, but OK for now.

    If you’ve got anything better, pls let me know!

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    It should be possible to edit the CSS to show the desired layout. 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 IMTanuki

    (@imtanuki)

    Tobias,

    Try this:

    https://dev03.altchinese.com/01-04-01-04-characters-component-patterns-en/

    I turned off white-space: nowrap;

    Pls note – because of the way I test for screen size, you actually have to test this on a mobile phone (resizing a desktop screen won’t work).

    Thanks!

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    okay, seems like this is more tricky than what I thought…
    (By the way, you don’t have to use a phone, you can test this in the phone simulator of e.g. the Chrome Developer Tools).

    You could maybe try this CSS:

    .tablepress .child li {
    clear: both;
    border: none!important;
}
.tablepress span.dtr-title {
    float: left;
}
.tablepress span.dtr-data {
    float: right;
    width: 100px;
}

    Regards,
    Tobias

    Thread Starter IMTanuki

    (@imtanuki)

    We’re getting there!!!

    Is there any way to get rid of the padding on the left of the labels, such that labels are closer to the left table border and the data has more space? By nature, label text should only be 10-15 characters, whereas data fields can be much longer and will wrap numerous lines (5 in this example).

    This looks a lot nicer than many low code apps!

    Thread Starter IMTanuki

    (@imtanuki)

    BTW, I reference “@media only screen ” (maybe not a good idea) and it doesn’t seem to work when I simulate a mobile form factor from a desktop…

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    please try adding

    .tablepress .child {
	padding: 0 !important;
}

    to reduce the left padding.

    Regards,
    Tobias

    Thread Starter IMTanuki

    (@imtanuki)

    Works!

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    great! Thanks for the confirmation!

    Best wishes,
    Tobias

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Responsive Collapse – Format Issue’ is closed to new replies.