Ivan Leitão
Rank: #944
8Views
2Comments
Solved
How to Display Buttons side by side in mobile Browser
Question
Reactive
Application Type
Reactive

Hi everyone,


Trying to make a reactive calculator. Want the button/numbers to appear side by side, as in every calculator. I can do it in desktop, but mobile browsers expand the buttons to the full width of the screen. (see images attached). I've Been playing with various CSS properties in the editor without any progress.

Can someone help?

Tks in advance,

Kind regards,

Ivan Leitão

0
0
on 26th Jan
Copy link to comment
João Marques
Rank: #56
Solution

Hi Ivan,


There is definitely some CSS instruction (probably from OutSystems UI since you don't mention having done anything in that sense) which is promoting this behavior and you need to override it.

You can easily check this with Chrome Developer Tools (F12 on browser) and check the table Elements. 


You can then select the element and see on the Styles tab the CSS being applied where you can uncheck them or change them (see image above) and find out which one is causing the behavior, find out what is the change you need to make and include it on the default Theme to override this behavior.


Alternatively, you can use Columns2, Columns3 (and other) widgets from OutSystemsUI which help you place the content side by side and define how they break in Phone:


Regards,
João

1
0
on 26th Jan
Copy link to comment
Ivan Leitão
Rank: #944

Thank You João, solved.

0
0
on 26th Jan
Copy link to comment