- This topic is empty.
-
AuthorPosts
-
December 9, 2016 at 5:03 am #248802
rugrotts
ParticipantIs there a script for a responsive 5 generation pedigree table without the user being confused about who belongs to who?
December 9, 2016 at 4:05 pm #248826Shikkediel
ParticipantI 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.
December 9, 2016 at 5:55 pm #248827rugrotts
ParticipantHave 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.
December 9, 2016 at 10:54 pm #248831Shikkediel
ParticipantI 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.
December 10, 2016 at 1:44 am #248833Beverleyh
ParticipantAnother 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.
-
AuthorPosts
- The forum ‘Design’ is closed to new topics and replies.