angular-responsive-tables
angular-responsive-tables copied to clipboard
Long table names overlap in small devices mode
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
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;
toposition: 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
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
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.