Long table names overlap in small devices mode

[thomasletsch]

Hi,

I have a table with rather long table names. Now when viewing these on small devices, the header lines break to multiple rows, but the table itself won't increase the row height.

I have created a plunker to show it:
http://plnkr.co/edit/IsRRJEP2yBhRZKiS4yYH

Thanks a lot,
Thomas

[awerlang]

Hi Thomas, thanks for the report.

Let me see if I can help you sharing some details.

The overlapping occurs because the title is absolute positioned on the left, as a td::before rule. So a td won't increase its height to fit the title.

Some things you can try:

• Change from position: absolute; to position: relative; and update other settings (left, padding) accordingly;
• Set a min-height on each td, preferably with some media queries.

I updated the plunker with the min-height: http://plnkr.co/edit/JOTKa0S5szAd5oCMuQS6?p=preview

[thomasletsch]

Hi André,

thanks for your response. I tried a little with the relative position, but relative positioning won't let you separate the heading from the column content. Unfortunately I am not a css expert (thats why I'm trying to use a library).
Setting a min height on each td is tricky. If the display is very small, I need e.g. 3 lines here and two lines there. Very much manual calculation and trying out.

I wonder if this is even possible with the CSS approach done in the responsive table plugin.

Thanks again,
Thomas

[awerlang]

I'm not an CSS expert myself, but I doubt a general solution can be achieved with the current CSS codebase. A library could do this with JS, perhaps even as a plugin to this very one.

I agree with you that this manual calculation is tricky, considering that if you change the title at a later time you need to remember to update this setting. As I believe this should not be very common (having very long titles, which is something I avoid), I'd would do something with media queries and em units:

@media (max-width: 800px) {
  .cell--2lines {
    min-height: 2.5em;
  }
  .cell--3lines {
    min-height: 3.5em;
  }
}

You can even experiment with overflow: hidden; to avoid overlapping. (In fact, this belongs to this library CSS, one can say)

What do you think?

We can leave this issue open anyways in case anyone gets interested having a take at this.