Side by Side in a Container

If possible, I’d like to have a number component and a button side by side in a container but I’m not nearly as experienced inspecting my app as I should (would like) to be. It looks like the button won’t be an issue because it already permits auto-sizing but the number component is the tricky one. I don’t know what the stable component name / class is. Can someone please help?

So can you visualize what you want it to look like? Do you want less space between those components?

Ideally, I’d like the number input component to be less than half the size it currently is with the button inline, directly next to it, with a little bit of padding so it looks nice. Having two components, one on top of the other that span the width of the screen, isn’t very pleasing to the eye and is a waste of real estate. I was hoping that using a container with a 1:1 setting would solve the issue but after reading a few other posts, that apparently isn’t working for anyone when they use it for mobile :man_shrugging:

The way I do it with Glide only is as follows… use a custom collection (grid layout) and a 2 row helper table. Label the rows 1 & 2 and add two components to the custom collection.

Filter the first component when helper table row = 1 and the second component when helper table row = 2

There’s no one size fits all so I duplicate the collection and use some visibility filters based on device info.

Edit: that would give you two components side by side on mobile but they wouldn’t be in a container :thinking:

Thanks Eric -

The thought behind using a container was simply because it is supposed to natively allow a 1:1 layout without any CSS or HTML trickery but that doesn’t seem to be the case in this instance. I’ll give your suggestion a try and see if it works!

1 Like

Hmmm it doesn’t want to cooperate with the number entry…

I got it to look nice with some date pickers though so thought it should work :man_shrugging:

Yeah, I agree with this. In cases where things look bad on mobile with a desktop design, I have to duplicate my container and redesign those, then use visibility conditions accordingly (based on the device width). I hope it would be more responsive.

4 Likes

This is what I noticed as well. Bummer :-1:

1 Like

Thanks for this, @ThinhDinh. I thought it was user error for a minute.

1 Like

Oooooh I’ve been using ‘includes mobile’

What device width would you recommend?

I’m not entirely sure it would work for all devices, but I’m currently setting anything under 600 as “mobile”, otherwise I show a desktop version.

1 Like

Hello!

Thanks for posting this and I think you replied to me with this answer before but I can’t find that post!

Anyway, I have a question:

Assuming my Components area is blank start off: Would I be adding 1 Container from Layout and putting two Grid tables in it? Or choosing Custom from Collections and adding a grid there? (or neither, lol)

Thanks!

What do you want to achieve in your end result though? What does your data structure look like?

I’m not sure I understand the question.

In terms of user interface, what I create should mimic this form as closely as possible.

Once the data is entered they’ll be pointed to a “summary page” that they can screen shot.

What is “this form” you are talking about? Is it the form in Eric’s comment?

I think this is the setup.

1 Like

Sorry about that, I got my comments crossed up.