Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design responsive question

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #248802
    rugrotts
    Participant

    Is there a script for a responsive 5 generation pedigree table without the user being confused about who belongs to who?

    #248826
    Shikkediel
    Participant

    I suppose that would very much depend on the susceptibility to confusion of the target audience…

    Lots of free stuff around though

    I don’t think a script would really be needed.

    #248827
    rugrotts
    Participant

    Have been trying for weeks all over the net to get something to make it work responsively to no avail. See what I mean here. http://www.reichmeisterrotts.com/Pedigrees/KissyPedigree.html Just hope I can find a solution as I have the whole wbsite responsive except for the pedigrees.

    #248831
    Shikkediel
    Participant

    I don’t know anything about pedigrees but it still makes sense to me. Is the issue then that on smaller screens the window starts to overflow? Because up to a certain point (determined by the shortest words in the table), it’s definitely responsive.

    Below that screen size, you could go for this as a first step:

    .Pedigree td {
      max-width: 0;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    

    If you leave out the .Pedigree you’ll see it’s fully responsive, but especially at the top not readable anymore. I would take another approach for the information there though, make it go below each other instead of getting increasingly smaller.

    But maybe you could try the above first, unless another member has a better idea of course. The next step could be to deal with the readability and the header content.

    #248833
    Beverleyh
    Participant

    Another really easy fix would be to wrap the table in a div and apply this CSS to the div wrapper; overflow: auto; -webkit-overflow-scrolling: touch;

    The above is a simplified approach taken from Bootstrap – that and more ways to deal with tables in responsive design are here https://www.sitepoint.com/responsive-data-tables-comprehensive-list-solutions/

    You could also look in to writing-mode https://css-tricks.com/almanac/properties/w/writing-mode/ and/or text rotation https://www.thecssninja.com/css/real-text-rotation-with-css to change the text orientation of some of the cells.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design’ is closed to new topics and replies.