How to do Multiple columns on phone format for inputs

Ask for Help
1

I am trying to build an app that runs calculations based on several inputs. I posted about it yesterday and usung ai I was able to work through a lot of my setup and got my tables set up and my fornulas all working.

But now i am trying to build the UI for data input and it seems all i can do on a phone is a vertical lists for choice and number components. There is about 7 inputs and 2 outpurt and i would like to make it more compact so there isnt scrolling. Any advice on how to organize the UI would be greatly appreciated.

2

For input fields, you can remove the title label and indicate the title as a placeholder instead.

Screenshot 2025-04-04 at 13.30.43
Screenshot 2025-04-04 at 13.30.43470×913 23.3 KB

3

Hi Friend,
You have try use the Custom AI component?, you can desing a image and ask the component to recreate your image but with input and output fields,

image
image828×347 46.7 KB

I designed these components only based on images that I created myself (sorry for the deletions, but it is important information)

4

Thank you. This may not be exactly what i am looking for but it will help me keep it more compact to fit more inputs on the screen without scrolling. It just feel like I should be able to make the fields narrower and fit 2 next to each other. Same with my output. I have 2 outputs and I want them to be big numbers but one on the left and on the right

I may experiment with button blocks and pushing a button to pull up a new input screen but I want to keep it as streamline as possible.

5

You can use Containers, and Big numbers, you have a image of reference

6

Here is what I had setup when I was using Open as App. They are changing things up and i can no longer use it.

1000002127
10000021271080×2340 144 KB

7

How do you get 2 containers next toneach other on a phone. Insee it works for large format screens but itnseems onba phone itnhasr tk be atacked.

8

I think I have found some work arounds using buttons and actions. Thoughts on this layout

1000002175
1000002175799×1512 71.7 KB

1 Like
9

Natively with Glide components. containers stack on each other on smaller devices. As Federico suggested, you can try doing it with a custom component, either:

  • Telling it to use a rule to setup spacing based on device width.
  • Design 2 different components for mobile and desktop, and display them based on the Device > Screen Size variable.
1 Like