search

jon48 / webtrees-theme-rural

Rural theme for webtrees
GNU General Public License v3.0
11 stars 2 forks source link

The display of boxes exceeds the frame #19

Closed arbor95 closed 3 years ago

arbor95 commented 3 years ago

On the mobile device the boxes for facts are too big.

boxes extend screen

jon48 commented 3 years ago

Thanks for reporting it, I can reproduce the issue on my phone as well.

This was the opportunity for me as well to discover that I could not trust the mobile emulator of the Chrome Dev Tools, which displays the page correctly... I need to find a way to troubleshoot the page on my actual mobile device (as I cannot use the usual tools on my development environment), and identify what causes this behavior.

arbor95 commented 3 years ago

Hi, When I activate the Vesta Facts Module the boxes are ok.

mit freundlichen Grüßen Franz Frese

-----Original Message----- From: Jonathan Jaubart @.> To: jon48/webtrees-theme-rural @.> Cc: Franz Frese @.>, Author @.> Sent: Mi., 31 März 2021 23:03 Subject: Re: [jon48/webtrees-theme-rural] The display of boxes exceeds the frame (#19)

Thanks for reporting it, I can reproduce the issue on my phone as well.

This was the opportunity for me as well to discover that I could not trust the mobile emulator of the Chrome Dev Tools, which displays the page correctly... I need to find a way to troubleshoot the page on my actual mobile device (as I cannot use the usual tools on my development environment), and identify what causes this behavior.

-- You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub: https://github.com/jon48/webtrees-theme-rural/issues/19#issuecomment-811463578

jon48 commented 3 years ago

Hello,

I think I have found the issue (well, at least at a CSS level, I still cannot explain why I have a different behaviour of responsiveness between the desktop and a mobile device). The core webtrees code does not wrap the HTML table element with the bootstrap class table-responsive, so that the overflow is not managed correctly on mobile devices. The issue actually exists on all themes, but as other themes are not bounded with a frame like mine, it is not as obvious (but you can check, it is actually overflowing the page). The behaviour exists as well on other pages or tabs where tables are used.

Ideally, it would be nice if all tables were wrapped within the webtrees layout code, but that is probably a significant task to go through. I have tried implementing a pure CSS workaround, but this is based on a change on some structural elements of the page (not specific to the individual facts table), so would you mind trying replacing the file in this archive (in the /modules_v4/myartjaub_ruraltheme/resources/css folder), and testing several pages? This fix is available as well on the page https://genea.jaubart.com/wt-demo/ , using the theme "Rural (Test)" (on small resolutions, the theme selection is voluntarily hidden, so you may need to rotate your screen to increase the resolution).

arbor95 commented 3 years ago

Testing with the updated css looks ok on the mobile device. Cause of the missing line-wrapping (so overflow) I have to scroll left/right to read the complete text (if there is one). thx for the fix fix.

jon48 commented 3 years ago

Yes, I forgot to mention it indeed: I took the approach of the horizontal scrolling, which was the Bootstrap straightforward implementation.

I have attempted to play with wrapping the content instead, but so far, I have not had much luck in getting a satisfying result; the columns do not spread nicely, and some of the texts still do not wrap, and overflow. I will investigate a bit more, but will probably stick with the scrolling at the moment for the next release.