# UI Layout help for a purchase order form

**URL:** <https://community.glideapps.com/t/ui-layout-help-for-a-purchase-order-form/40801>\
**Category:** Ask for Help\
**Created:** [April 17, 2022, 12:33am UTC](https://community.glideapps.com/t/ui-layout-help-for-a-purchase-order-form/40801 "2022-04-17T00:33:34Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dan\_San](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dan_san/32/24085_2.png) [@Dan\_San](https://community.glideapps.com/u/Dan_San)\
**Post date:** [April 17, 2022, 12:33am UTC](https://community.glideapps.com/t/ui-layout-help-for-a-purchase-order-form/40801/1 "2022-04-17T00:33:34Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [April 17, 2022, 12:53am UTC](https://community.glideapps.com/t/ui-layout-help-for-a-purchase-order-form/40801/2 "2022-04-17T00:53:26Z")

</div>

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

 ![Screen Shot 2022-04-16 at 8.51.53 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/9/6987354b881a88be14fe151681db31f34e29cd79.jpeg)

 ![Screen Shot 2022-04-16 at 8.54.27 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/3/f391b12f6e5975bdffd8448021c1de931fddd9b1.png)

---

<div class="post-metadata">

**Author:** ![Dan\_San](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dan_san/32/24085_2.png) [@Dan\_San](https://community.glideapps.com/u/Dan_San)\
**Post date:** [April 17, 2022, 1:07am UTC](https://community.glideapps.com/t/ui-layout-help-for-a-purchase-order-form/40801/3 "2022-04-17T01:07:10Z")

</div>

Hi Uzo,

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

Thanks

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [April 17, 2022, 1:10am UTC](https://community.glideapps.com/t/ui-layout-help-for-a-purchase-order-form/40801/4 "2022-04-17T01:10:16Z")

</div>

in a rich text component

---

<div class="post-metadata">

**Author:** ![Dan\_San](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dan_san/32/24085_2.png) [@Dan\_San](https://community.glideapps.com/u/Dan_San)\
**Post date:** [April 17, 2022, 5:17pm UTC](https://community.glideapps.com/t/ui-layout-help-for-a-purchase-order-form/40801/5 "2022-04-17T17:17:22Z")

</div>

Thanks Uzo,

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

Question :  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/a/6abbf455337b7cad58837c8b55993be33948bb76.png)  
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