# Moving choice components onto the same line

**URL:** <https://community.glideapps.com/t/moving-choice-components-onto-the-same-line/31417>\
**Category:** Ask for Help\
**Created:** [September 5, 2021, 9:16pm UTC](https://community.glideapps.com/t/moving-choice-components-onto-the-same-line/31417 "2021-09-05T21:16:43Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [September 5, 2021, 9:16pm UTC](https://community.glideapps.com/t/moving-choice-components-onto-the-same-line/31417/1 "2021-09-05T21:16:43Z")

</div>

My use case: users need to read a corona test cassette and put in the ‘Lot number’ of the kit so the number can be included in a valid medical certificate (for good record keeping, plus in case something was wrong with the batch/lot).

I started with getting customers to take a photo… but that is not readable. I even had @Darren_Murphy do autoOCR reading… but it was too garbled to use consistently (it would pick up a newspaper in the background, or the manufacturer’s details).

So now I have to change to getting the customer to put the data in manually and I want to make it a bit easier for them (plus it saves the call center agents rework to fix).

I have got some CSS to make the year large in the Date Picker component:

```auto
CSS Calendar - larger Year

<pre><span><style>

/* Month (Mai 2021) */
.MuiPickersSlideTransition-transitionContainer > * {
font-size: 1.5em !important;
margin-top:-5px;
}

/* Year & Day */
.MuiPickersToolbarText-toolbarTxt {
font-size: 2.125rem;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 400;
line-height: 1.235;
letter-spacing: 0.00735em;
}

/* Day only */
.MuiTypography-h4 {
font-size: 1.8rem !important;
}

</style></span></pre>

```

But now I would like something more like @Maxim_KM’s which moves the choice components on to one row.

 ![Screenshot 2021-09-05 at 23.10.22](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/d/3dd764894e5c2292215b431f7fae8cd2105be3b5.png)

So, this is what I have now… any ideas? Thanks!

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [September 5, 2021, 9:28pm UTC](https://community.glideapps.com/t/moving-choice-components-onto-the-same-line/31417/2 "2021-09-05T21:28:52Z")

</div>

@SantiagoPerez magic ⭐ 🤩

 ![Screenshot 2021-09-05 at 23.26.03](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/b/9b2dabc7a29092396afce833c489862ec3148a07.jpeg)

with the CSS

```auto
<pre><span><style>

/* Choice 1 (2nd component) */
div[id*='screenScrollView'] > div > :nth-child(17) {
display:fixed;
margin-left:25px;
width:150px;
}

/* Choice 2 (3eme component) */
div[id*='screenScrollView'] > div > :nth-child(18) {
display:fixed;
margin-top:-84px;
margin-left:175px;
width:150px;
}

´´´
Fiddling to find the nth component (and then using visibility conditions for when a component becomes visible) - and moving the margins about so that the matched up.

Very cool - more things to play with now. Thanks!
```

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [September 5, 2021, 9:29pm UTC](https://community.glideapps.com/t/moving-choice-components-onto-the-same-line/31417/3 "2021-09-05T21:29:40Z")

</div>

This is actually @Manu.n’s magic. All credit goes to him.

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [September 5, 2021, 9:35pm UTC](https://community.glideapps.com/t/moving-choice-components-onto-the-same-line/31417/4 "2021-09-05T21:35:48Z")

</div>

Thanks @Manu.n - to the rescue again!

And year, month, and date all on one line - looking good on the tablet too 🙂 🙂

 ![Screenshot 2021-09-05 at 23.34.32](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/8/d838d20e630ba286cb016e468ed723682696cd32.jpeg)  
 ![Screenshot 2021-09-05 at 23.35.16](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/1/d1d08dab409789d2a69d004fc237efb3217e338c.png)

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [September 5, 2021, 10:12pm UTC](https://community.glideapps.com/t/moving-choice-components-onto-the-same-line/31417/5 "2021-09-05T22:12:46Z")

</div>

Try to align the components in the center, what do you think?

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [September 5, 2021, 10:14pm UTC](https://community.glideapps.com/t/moving-choice-components-onto-the-same-line/31417/6 "2021-09-05T22:14:20Z")

</div>

That would be even better - how do I do that?

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [September 5, 2021, 10:20pm UTC](https://community.glideapps.com/t/moving-choice-components-onto-the-same-line/31417/7 "2021-09-05T22:20:01Z")

</div>

Good question 🤣

---

<div class="post-metadata">

**Author:** ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)\
**Post date:** [September 5, 2021, 11:54pm UTC](https://community.glideapps.com/t/moving-choice-components-onto-the-same-line/31417/8 "2021-09-05T23:54:38Z")

</div>

Adjust the width based on percent (%) and not pixel (130px)

Try with

`width = 30%`

Chao Mark!

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 5, 2021, 11:56pm UTC](https://community.glideapps.com/t/moving-choice-components-onto-the-same-line/31417/9 "2021-09-05T23:56:05Z")

</div>

You asked for it 😉

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/a/9a974bc0cc13ebb4affbb6f1c24a7ac1516dbeb1.jpeg)

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/9/499b0ccd45efbb49075e68da20a2f2f0f35aaaba.png)

```auto
<pre><span><style>

/* Choice 1 (1st component) */
div[id*='screenScrollView'] > div > :nth-child(1) {
display:fixed;
margin-left: calc(50% - 160px);
width:130px;
}

/* Choice 2 (2nd component) */
div[id*='screenScrollView'] > div > :nth-child(2) {
display:fixed;
margin-top:-84px;
margin-left:calc(50% - 50px);
width:110px;
}

/* Choice 2 (2nd component) */
div[id*='screenScrollView'] > div > :nth-child(3) {
display:fixed;
margin-top:-84px;
margin-left:calc(50% + 40px);
width:110px;
}

```

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [September 5, 2021, 11:57pm UTC](https://community.glideapps.com/t/moving-choice-components-onto-the-same-line/31417/10 "2021-09-05T23:57:59Z")

</div>

@ThinhDinh  
you are the best 🥇

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 5, 2021, 11:58pm UTC](https://community.glideapps.com/t/moving-choice-components-onto-the-same-line/31417/11 "2021-09-05T23:58:42Z")

</div>

My pleasure to learn from you master 😉

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [September 6, 2021, 12:29pm UTC](https://community.glideapps.com/t/moving-choice-components-onto-the-same-line/31417/12 "2021-09-06T12:29:00Z")

</div>

> [@SantiagoPerez](#):
>
> This is actually @Manu.n’s magic. All credit goes to him.

@SantiagoPerez  
thank you for this remark 😃 🥳 👋

---

<div class="post-metadata">

**Author:** ![Maxim\_KM](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maxim_km/32/29274_2.png) [@Maxim\_KM](https://community.glideapps.com/u/Maxim_KM)\
**Post date:** [September 6, 2021, 12:55pm UTC](https://community.glideapps.com/t/moving-choice-components-onto-the-same-line/31417/13 "2021-09-06T12:55:41Z")

</div>

There is one big downside to all this magic.  
On the actual phone, during page animations(navigate back or submit the form, etc) users see as CSS nth-child applies to wrong elements, ruining the feeling of solid app.

 ![IMG_866C0414758B-1](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/5/45909419f7241559d677f15db141e13836df9f9f.jpeg)

Even worse on desktop and tablets: Show New Screen or Submit Form appears as a popover and CSS remains in effect on background elements after closing Screen/Form.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/d/bd747dabe01fa9f6901aa40b6eea5d4279de1854.jpeg)

---

<div class="post-metadata">

**Author:** ![Maxim\_KM](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maxim_km/32/29274_2.png) [@Maxim\_KM](https://community.glideapps.com/u/Maxim_KM)\
**Post date:** [September 6, 2021, 12:57pm UTC](https://community.glideapps.com/t/moving-choice-components-onto-the-same-line/31417/14 "2021-09-06T12:57:05Z")

</div>

Everything could be solved if guys from Glide can add actual title to div with choice(as meta), so we can avoid using :nth-child and use data selectors.

E.g.  
 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/9/e92c9f5bd85f7a512c96c576ef39e680176cb9a0.png)  
as

```auto
<div class="sc-bQdQlF hYvjUk" name="Choice Hours">.....</div>
<div class="sc-bQdQlF hYvjUk" name="Choice Minutes">.....</div>

```

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [September 6, 2021, 1:07pm UTC](https://community.glideapps.com/t/moving-choice-components-onto-the-same-line/31417/15 "2021-09-06T13:07:17Z")

</div>

I agree - I tend to play around with CSS… then give up because it is not always reliable enough to use. Using actual divs would be best for sure!

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [September 6, 2021, 1:10pm UTC](https://community.glideapps.com/t/moving-choice-components-onto-the-same-line/31417/16 "2021-09-06T13:10:40Z")

</div>

Yes me too  
I made this request:

> [@Tell Glide how you use CSS](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/72):
>
> For this problem I made this request

> [@Tell Glide how you use CSS](https://community.glideapps.com/t/tell-glide-how-you-use-css/27641/20):
>
> _**Finally The Most Important (for me): As now we can name the components,**_  
> _ **is it possible to have class or id names in relation to the names. it would then be easy to identify.** _

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 6, 2021, 2:09pm UTC](https://community.glideapps.com/t/moving-choice-components-onto-the-same-line/31417/17 "2021-09-06T14:09:30Z")

</div>

Yeah I fully agree with this…

---

<div class="post-metadata">

**Author:** ![NoCodeAndy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nocodeandy/32/62530_2.png) [@NoCodeAndy](https://community.glideapps.com/u/NoCodeAndy)\
**Post date:** [January 17, 2024, 4:50pm UTC](https://community.glideapps.com/t/moving-choice-components-onto-the-same-line/31417/18 "2024-01-17T16:50:37Z")

</div>