Title: Responsive Collapse – Format Issue Last modified: April 9, 2018 --- # Responsive Collapse – Format Issue * Resolved [IMTanuki](https://wordpress.org/support/users/imtanuki/) * (@imtanuki) * [8 years ago](https://wordpress.org/support/topic/responsive-collapse-format-issue/) * 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](https://wordpress.org/support/users/imtanuki/) * (@imtanuki) * [8 years ago](https://wordpress.org/support/topic/responsive-collapse-format-issue/#post-10159958) * 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](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [7 years, 12 months ago](https://wordpress.org/support/topic/responsive-collapse-format-issue/#post-10164228) * 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](https://wordpress.org/support/users/imtanuki/) * (@imtanuki) * [7 years, 12 months ago](https://wordpress.org/support/topic/responsive-collapse-format-issue/#post-10165612) * Tobias, * Try this: * [http://dev03.altchinese.com/01-04-01-04-characters-component-patterns-en/](http://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](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [7 years, 12 months ago](https://wordpress.org/support/topic/responsive-collapse-format-issue/#post-10166050) * 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](https://wordpress.org/support/users/imtanuki/) * (@imtanuki) * [7 years, 12 months ago](https://wordpress.org/support/topic/responsive-collapse-format-issue/#post-10166423) * 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](https://wordpress.org/support/users/imtanuki/) * (@imtanuki) * [7 years, 12 months ago](https://wordpress.org/support/topic/responsive-collapse-format-issue/#post-10166429) * 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](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [7 years, 12 months ago](https://wordpress.org/support/topic/responsive-collapse-format-issue/#post-10166611) * Hi, * please try adding * ``` .tablepress .child { padding: 0 !important; } ``` * to reduce the left padding. * Regards, Tobias * Thread Starter [IMTanuki](https://wordpress.org/support/users/imtanuki/) * (@imtanuki) * [7 years, 12 months ago](https://wordpress.org/support/topic/responsive-collapse-format-issue/#post-10167992) * Works! * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [7 years, 12 months ago](https://wordpress.org/support/topic/responsive-collapse-format-issue/#post-10169519) * 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. * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944) * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/) * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq) * [Support Threads](https://wordpress.org/support/plugin/tablepress/) * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/) * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/) * 9 replies * 2 participants * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * Last activity: [7 years, 12 months ago](https://wordpress.org/support/topic/responsive-collapse-format-issue/#post-10169519) * Status: resolved