Log in to AnswerLog in to Follow
Rod Weatherhead
10Views
3Comments
Force table format for smartphone reactive
Question
Reactive
OutSystems Widgets
Application Type
Reactive
Service Studio Version
11.10.14 (Build 39806)

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. 

0
0
on 6th Apr
João Marques
mvp_badge
MVP

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

0
0
on 6th Apr

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,

Rod.

0
0
on 7th Apr
João Marques
mvp_badge
MVP

Replying to Rod Weatherhead's comment on 07 Apr 2021 07:17:49

Hi Rod,


Your questions are very valid, consider my observations below:

  • I suggested the IsPhone function rather than the OnDisplayDevice widget, since you were ok with tablet and desktop having the same behavior, therefore you could have only "one code" for the false branch of the IsPhone, rather than having the same code duplicate in the Desktop and Tablet placeholders of OnDisplayDevice. But OnDisplayDevice would be a valid option as well;
  • For Reactive, you have a few patterns for cards like Card, Card Item and Card Sectioned;
  • The Accordion would be more suited for a list (no headers), rather than a table (with headers), indeed;
  • If you inspect the table row in Chrome Developer Tools (right click - select Inspect), under tab Elements - Styles,  you will see that there is some CSS coming from OutSystems UI which forces the table cells (td) for phones to have 100% width, which prevents table cells to appear side-by-side:



You can add some CSS to your theme, for instance .phone td { width: unset !important; }, to override this behavior.


Kind Regards,
João

0
0
on 7th Apr
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.