You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
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:
Activity
awerlang commentedon Jun 8, 2016
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 atd
won't increase its height to fit the title.Some things you can try:
position: absolute;
toposition: relative;
and update other settings (left, padding) accordingly;td
, preferably with some media queries.I updated the plunker with the
min-height
: http://plnkr.co/edit/JOTKa0S5szAd5oCMuQS6?p=previewthomasletsch commentedon Jun 9, 2016
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 commentedon Jun 9, 2016
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:
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.
Long table names overlap in small devices mode awerlang#13
Merge pull request #1 from asah27/asah27-patch-1