No more tables and white-space issue

Question

can you please let me know if there is any chance to make that the label wraps itself and do not go like in the picture ("Change Change Change..."):

enter image description here

I use "no more tables" here and always get that issue with longer labels - they just do not wrap. I understand that the white-space in css is "nowrap", but if I change it to "normal", everything goes wrong and displays badly. Maybe someone had an issue with this "no more tables" technique and word-wrapping?

More about this script can be fuonde here http://elvery.net/demo/responsive-tables/

always post your own working or not working code attempts when posting on SO — vico, Aug 25 '14 at 13:50
Tables are absolutely appropriate for tabular data. That's exactly what they were designed for and you should use them. You should avoid using tables for site layout - they were not designed for layout. This question seems to confuse avoidance of tables for layout with presenting tabular data. — JDB, Aug 25 '14 at 14:13
I am using tables only for tobular data. But in mobile devices tables do not look good and there are bunch of solutions like "no more tables" which offers responsive table techniques so that table transforms itself on mobile and looks nice. My question is associated with the fact that by using one of the techniques, the longer labels are not wrapping itself and they go under other text. I wonder if there is any solution for that... — Martynas Martulis, Aug 25 '14 at 14:17

Paul O'B · Accepted Answer · 2014-08-26T09:34:41.933

2

That example uses absolute positioning to move the generated content to the start of the rows and is a flawed approach as that means that the content cannot wrap because it will overlap the content in the next row. That's why the nowrap rule is in place to stop this happening.

Instead of absolute positioning you could use display:inline-block instead and avoid the issue altogether.

In the code from here change these two rules as follows:

td { 
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;

    }

    td:before { 
      display:inline-block;
        vertical-align:top;
        width: 45%; 
        padding:0 3% 0 1%; 
    }

Rough example here:

Updated code as per comments below:

td:before {
    float:left;
    width: 95%;
    padding:0 0 0 1%;
    margin-left:-100%;
}
td {
    padding-left:50%;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

edited Aug 26 '14 at 09:34

answered Aug 25 '14 at 14:32

Paul O'B

431
2
4

It seems to work, but then introduces another problem - if the second column text is too long for one line, it "jumps" into another line near the table on the left. Also, there is no possibility to align labels to the left and content to the right. – Martynas Martulis Aug 25 '14 at 15:17
The text wrapping can be fixed quite easily and the above example has been updated. I'm not sure what you mean about left and right as that seems to be what it is doing but you should also be to set the text to the right or left of the apparent cell as required.. – Paul O'B Aug 25 '14 at 19:04
I try the update code, but it only display content .No header display.The title of column is 4 words. – unidha Jun 19 '15 at 06:19
Did you add the header data in the css? e.g. td:nth-of-type(1):before {content: "First Name";} etc? See my codepen link for the full code. – Paul O'B Jun 20 '15 at 08:15
@PaulO'B,I think I followed your solution.By adding code above but still my page does not look good.I create new question here : http://salesforce.stackexchange.com/questions/83164/column-overlapping-in-bootstrap-in-visualforce – unidha Jul 13 '15 at 10:27

score 0 · Answer 2 · answered Aug 25 '14 at 14:16

0

You need to break the words if they are too long. You can make this in css as:

word-wrap:break-word;

Try it.

answered Aug 25 '14 at 14:16

Viswanath Donthi

1,791
1
11
12

#no-more-tables td { /* Behave like a "row" */ border: none; border-bottom: 0px solid #eee; position: relative; padding-left: 50%; padding-bottom: 8px; white-space: normal; text-align: left; } #no-more-tables td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 0px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; text-align: left; font-weight: bold; } It do not help because there is "nowrap" attribute in the white-space and if I remove that, everything crashes... – Martynas Martulis Aug 25 '14 at 14:23

score 0 · Answer 3 · edited May 23 '17 at 11:51

The main issue here has to do with sizing one HTML element based on another element. This is something that tables are optimized to do - calculating the height and width of TD elements across the entire table to a uniform size dynamically based on content.

By abandoning tables (via changing the display type of THEAD to "block", effectively making it nothing more than a DIV), you've lost this automatic resizing effect that browsers do for you, as evidenced here:

enter image description here

There's no getting around this. The "No More Tables" approach must make a compromise - use absolute height to mimic the way tables are laid out. You are trying to reintroduce this automatic size calculation, but you can't without restructuring your HTML.

If you want to continue to pursue this path, you'd need to "manually" handle resizing of the TD elements - iterate over the cells of the table and resize them yourself whenever the size of table might have changed. While possible, your Javascript won't be nearly as optimized as the browser and anything you implement yourself will likely be buggy and slow.

I'm afraid the only viable solution is to shorten your label names and accept the need for absolute sizing to get around the lack of dynamic sizing in non-TABLE elements.

One possible solution: show an abbreviated label and then show a longer name in a popup on hover or tap: Tooltips for mobile browsers

No more tables and white-space issue

3 Answers3