Hi,
Long time listener, first time caller.
Apologies as this seems like such a simple issue yet I can't "goggle foo" my way out of a soggy cardboard box.
I have a table in a reactive web app that appears great in Desktop/Tablet Portrait but soon as I switch to Smartphone (portrait or landscape) the rows are shuffled underneath each other.
I understand this makes good use of the smaller screen real estate but makes my table hard for the end user to digest.
I would much rather it shrink down to fit, or force the user to use landscape.
Is there a better way?
Like this :
Don't like this :
Many thanks in advance!
Rod.
Hi Rod,
That's the default behavior (via CSS) of OutSystemsUI on displaying tables in mobile. You can change it and make it a a small table but that's not very usual in Mobile since it is not provide a good user experience, specially if you imagine the texts can grow and "ruin" your layout in Mobile.
In case you want to make a better experience for Mobile, my suggestion would be to use IsPhone function from OutSystemsUI in an if. If false, show the table as you are right now, otherwise, create a table with a card, accordion or a pattern more adequate to Mobile, with the content displayed in a way more optimized for a smaller device like a phone.
Kind Regards,João
Hi Joao,
Thanks so much for your reply.
Just looking at each of your suggestions (and please go easy on me as I'm quite green at all this especially CSS), I can't find anything specific around "small table", so I assume you mean just crush down the font etc to try and make it fit. I've tried a few CSS tweaks and it doesn't seem to matter how small I make things the smartphone will stack the cells of a row.
I did also notice the "Display On Device" widget which looks like another easy way to detect and display accordingly but can't get the smartphone to do anything but put each cell in a row on top of each other.
I had a look at "card" but that seems to be only for Traditional Web?
Accordion looks like something I could work with but it expands down. Is there a possibility with accordion that I can display part of a Record List (say first 3 cells) in the top of the accordion and then expand down to see the rest of the cells?
Probably a silly question, but is there a way to simply disable the default CSS behaviour for Mobile for a screen or part there of?
Thanks again,
Your questions are very valid, consider my observations below:
You can add some CSS to your theme, for instance .phone td { width: unset !important; }, to override this behavior.
there is a css class to add it to the table to prevent that:"table table-no-responsive"