UI Layout help for a purchase order form

[Dan_San]

Hi,

Need some ideas on how create a form for an order form. I want to create a reseller order form to replenish items.

I want to give them choice button, which they will use to use a category of products/brand (filter). then below that I want to give them another choice that will give them a list of items for the selected category. They choose the item and then insert the quantity. Every time they complete one line I will make the next choice/quantity component available up to given max (10 items).

I want to have the layout as :
[ choice 1 ] [quantity]
[ choice 2 ] [quantity]
[ choice 3 ] [quantity]
…

Currently the choice component takes the full length and I have to put the quantity on the next line, I am trying to make it look a little friendly.

Any ideas/suggestions ?

Thanks in advance…

[Uzo]

Use tile inline list instead of choice components, and adjust it with little CSS.

[Dan_San]

Hi Uzo,

This looks awesome. Where are you inserting the CSS in the tile configuration ?

Thanks

[Uzo]

in a rich text component

[Dan_San]

Thanks Uzo,

Not an expert on CSS, but I was able to start changing some stuff.

Question :

How are you placing these 3-4 components in the same row ?
Are you using GRID or FLEX ?
Are you styling the parent of the 3-4 components ? We are trying to figure out how you would have wrapped the 3 components in a single div