Skip to content

Long table names overlap in small devices mode #13

@thomasletsch

Description

@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

Activity

awerlang

awerlang commented on Jun 8, 2016

@awerlang
Owner

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

thomasletsch commented on Jun 9, 2016

@thomasletsch
Author

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

awerlang commented on Jun 9, 2016

@awerlang
Owner

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.

added a commit that references this issue on Apr 7, 2020
94d5d64
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @awerlang@thomasletsch

        Issue actions

          Long table names overlap in small devices mode · Issue #13 · awerlang/angular-responsive-tables