# Vertical Separator; Inputs Side-by-Side

**URL:** <https://community.glideapps.com/t/vertical-separator-inputs-side-by-side/27609>\
**Category:** Ask for Help\
**Created:** [June 4, 2021, 2:55am UTC](https://community.glideapps.com/t/vertical-separator-inputs-side-by-side/27609 "2021-06-04T02:55:14Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![erik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/erik/32/27300_2.png) [@erik](https://community.glideapps.com/u/erik)\
**Post date:** [June 4, 2021, 2:55am UTC](https://community.glideapps.com/t/vertical-separator-inputs-side-by-side/27609/1 "2021-06-04T02:55:14Z")

</div>

Is it possible to have a text entry and number entry side-by-side?

i.e.  
Enter\_Text Enter\_Number

The app becomes too long if they are vertically stacked.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [June 4, 2021, 2:58am UTC](https://community.glideapps.com/t/vertical-separator-inputs-side-by-side/27609/2 "2021-06-04T02:58:01Z")

</div>

Yes, if you’re willing to manipulate some CSS.

> [@CSS Choice Multiple](https://community.glideapps.com/t/css-choice-multiple/27256/11):
>
> bonjour @SantiagoPerez something like that ??? \<pre\>\<span\>\<style\> /\* Choice 1 (2nd component) \*/ div[id\*='screenScrollView'] \> div \> :nth-child(2) { margin-left:-5px; width:150px; } /\* Choice 2 (3eme component) \*/ div[id\*='screenScrollView'] \> div \> :nth-child(3) { margin-top:-97px; margin-left:115px; width:150px; } /\* Choice 3 (4eme component) \*/ div[id\*='screenScrollView'] \> div \> :nth-child(4) { margin-top:-97px; margin-left:235px; width:150px; } \</style\>\</span\>\</pre\> EDIT: I…

---

<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:** [June 4, 2021, 3:23am UTC](https://community.glideapps.com/t/vertical-separator-inputs-side-by-side/27609/3 "2021-06-04T03:23:34Z")

</div>

Hello, @erik  
If you are interested, here is a small example.

You must adapt the number in each “nth-child (…)” according to the order of the components.

Be careful, if you change the visibility of the components, this trick no longer works (or badly!)

Test on Chrome / Windows 10 & Android

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/3/73ad92055937923fdca2d8a9363dc666ae588695.png)

The CSS

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

/* Text Entry (2nd component) */
div[id*='screenScrollView'] > div > :nth-child(2) {
margin-left:-5px;
width:50%;
height:70px;
}

/* Number Entry (3eme component) */
div[id*='screenScrollView'] > div > :nth-child(3) {
margin-top:-75px;
margin-left:60%;
transform: translateX(-25%);
width:50%;
height:70px;
}

/* Text Entry (4eme component) */
div[id*='screenScrollView'] > div > :nth-child(4) {
margin-left:-5px;
width:50%;
height:70px;
}

/* Number Entry (5eme component) */
div[id*='screenScrollView'] > div > :nth-child(5) {
margin-top:-75px;
margin-left:60%;
transform: translateX(-25%);
width:50%;
height:70px;
}
</style></span></pre>

```

EDIT: In CSS, I remove the lines “display: fixed;” uh that doesn’t mean anything and that’s a big mistake on my part, sorry.

---

<div class="post-metadata">

**Author:** ![erik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/erik/32/27300_2.png) [@erik](https://community.glideapps.com/u/erik)\
**Post date:** [June 8, 2021, 2:16am UTC](https://community.glideapps.com/t/vertical-separator-inputs-side-by-side/27609/4 "2021-06-08T02:16:50Z")

</div>

This is so helpful. Thank you so much!

---

<div class="post-metadata">

**Author:** ![baremeter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/baremeter/32/28090_2.png) [@baremeter](https://community.glideapps.com/u/baremeter)\
**Post date:** [July 8, 2021, 8:27am UTC](https://community.glideapps.com/t/vertical-separator-inputs-side-by-side/27609/5 "2021-07-08T08:27:17Z")

</div>

Hi - only just found this great bit of script.  
Is there any way that the Title text can be smaller of spill onto two lines as it just gets truncated?

 ![Screenshot 2021-07-08 at 10.22.28](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/a/9a48f433c12242d56142a73b33d815361c796576.png)  
Brilliant  
Thanks

---

<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:** [July 8, 2021, 9:35am UTC](https://community.glideapps.com/t/vertical-separator-inputs-side-by-side/27609/6 "2021-07-08T09:35:28Z")

</div>

Hello @baremeter  
I looked around a bit but I found it.  
Add this:

```auto

[data-test = "app-text-field"]> div> div {
font-size: 0.8rem! important;
white-space: pre-line;
position: relative;
}

[data-test = "app-text-field"]: nth-child (2) {
top: -5px;
}

```

you can play with the value “font-size: 0.8rem” to change the size "  
after that you can have a difference between 2 text-input if one uses larger text!

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/8/a85adeec4cc7d79326c53e29cbba75751a152083.png)

---

<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:** [July 8, 2021, 9:45am UTC](https://community.glideapps.com/t/vertical-separator-inputs-side-by-side/27609/7 "2021-07-08T09:45:28Z")

</div>

I’m thinking maybe you can use that e.g part as your placeholder to simplify this. Based on your screenshot I think the extra words are mostly for examples.

---

<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:** [July 8, 2021, 9:51am UTC](https://community.glideapps.com/t/vertical-separator-inputs-side-by-side/27609/8 "2021-07-08T09:51:34Z")

</div>

It’s true @ThinhDinh rightly (as always)

---

<div class="post-metadata">

**Author:** ![MaxB](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maxb/32/15623_2.png) [@MaxB](https://community.glideapps.com/u/MaxB)\
**Post date:** [January 4, 2022, 5:45pm UTC](https://community.glideapps.com/t/vertical-separator-inputs-side-by-side/27609/9 "2022-01-04T17:45:45Z")

</div>

Nice thanks, but this affects one of the two floating buttons iI have, any idea?

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/7/1791d32a9e1b3b4be3baff95ef76110171dbb1a4.png)

---

<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:** [January 4, 2022, 11:45pm UTC](https://community.glideapps.com/t/vertical-separator-inputs-side-by-side/27609/10 "2022-01-04T23:45:24Z")

</div>

Which exact snippet of code are you using?

---

<div class="post-metadata">

**Author:** ![MaxB](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maxb/32/15623_2.png) [@MaxB](https://community.glideapps.com/u/MaxB)\
**Post date:** [January 5, 2022, 7:10pm UTC](https://community.glideapps.com/t/vertical-separator-inputs-side-by-side/27609/11 "2022-01-05T19:10:37Z")

</div>

This

```
/\* Text Entry (2nd component) \*/ div[id\*='screenScrollView'] \> div \> :nth-child(2) { margin-left:-5px; width:80%; } /\* Number Entry (3eme component) \*/ div[id\*='screenScrollView'] \> div \> :nth-child(3) { margin-top:-45px; margin-left:65%; transform: translateX(-25%); width:50%; }
```

---

<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:** [January 6, 2022, 12:28am UTC](https://community.glideapps.com/t/vertical-separator-inputs-side-by-side/27609/12 "2022-01-06T00:28:50Z")

</div>

If you try converting the floating buttons to normal buttons does it make the problem go away? I’m just trying to debug it, this is not a solution.

---

<div class="post-metadata">

**Author:** ![MaxB](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maxb/32/15623_2.png) [@MaxB](https://community.glideapps.com/u/MaxB)\
**Post date:** [January 6, 2022, 10:04am UTC](https://community.glideapps.com/t/vertical-separator-inputs-side-by-side/27609/13 "2022-01-06T10:04:08Z")

</div>

Disappears;

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/0/500fd5feae51faa81aa4febfeff57d82d483e9e6.png)

but when i press one of the floating buttons, new ones appear and get the same problem

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/7/976754289e92deae042fe5b84ed4ea3cfe1da015.png)

from the look of them they just get the same code of the css, which i set to 80 and 50% width

---

<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:** [January 6, 2022, 11:07am UTC](https://community.glideapps.com/t/vertical-separator-inputs-side-by-side/27609/14 "2022-01-06T11:07:06Z")

</div>

Are you able to make that app copyable?

---

<div class="post-metadata">

**Author:** ![MaxB](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maxb/32/15623_2.png) [@MaxB](https://community.glideapps.com/u/MaxB)\
**Post date:** [January 6, 2022, 11:21am UTC](https://community.glideapps.com/t/vertical-separator-inputs-side-by-side/27609/15 "2022-01-06T11:21:26Z")

</div>

No, sorry, haven’t you tried making a similar simpler app with floating buttons?

---

<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:** [January 6, 2022, 12:24pm UTC](https://community.glideapps.com/t/vertical-separator-inputs-side-by-side/27609/16 "2022-01-06T12:24:00Z")

</div>

Try this.

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

/* Text Entry (2nd component) */
div[id*='screenScrollView'] > div > :nth-child(2) {
margin-left:-5px;
width:80%;
}

div[id*='OverlayscreenScrollView'] > div > :nth-child(2) {
margin-left:0px;
width:100%;
}

/* Number Entry (3eme component) */
div[id*='screenScrollView'] > div > :nth-child(3) {
margin-top:-45px;
margin-left:65%;
transform: translateX(-25%);
width:50%;
}

```

Basically what happened here is the “normal” element has the class screenScrollView, but the “floating” element also matches that CSS with the class OverlayscreenScrollView.

Hence, the nth-child(2) part affects the second floating button, I put that back with the second part of the code above.

---

<div class="post-metadata">

**Author:** ![MaxB](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maxb/32/15623_2.png) [@MaxB](https://community.glideapps.com/u/MaxB)\
**Post date:** [January 6, 2022, 11:23pm UTC](https://community.glideapps.com/t/vertical-separator-inputs-side-by-side/27609/17 "2022-01-06T23:23:59Z")

</div>

thank you, it works… but,

when I press one of the 2 ‘original’ floating buttons, that now are shown correctly, the clicked ‘original’ one disappears and 2 new floating buttons appear, but one of them is always shown in the wrong way as per the above screenshots.

There is a total of seven floating buttons plus one that always stays invisible and is no used.

I tried to understand the problem, I got to the point where the order of the text is important, so I wrote this;

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

/* Text Entry (2nd component) */
div[id*='screenScrollView'] > div > :nth-child(2) {
margin-left:-5px;
width:80%;
}

div[id*='OverlayscreenScrollView'] > div > :nth-child(2) {
margin-left:0px;
width:100%;
}

/* Number Entry (3eme component) */
div[id*='screenScrollView'] > div > :nth-child(3) {
margin-top:-45px;
margin-left:65%;
transform: translateX(-25%);
width:50%;
}

div[id*='OverlayscreenScrollView'] > div > :nth-child(3) {
margin-left:0px;
width:100%;
}

```

and now the situation is this, with normal width buttons but two of them are overlapping

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/4/24c9a51bcf3c7ad7dc760ec31d65871231685495.png)

---

<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:** [January 6, 2022, 11:45pm UTC](https://community.glideapps.com/t/vertical-separator-inputs-side-by-side/27609/18 "2022-01-06T23:45:58Z")

</div>

So you have a case when there are 3 or more floating buttons on the screen at the same time?

Try this.

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

/* Text Entry (2nd component) */
div[id*='screenScrollView'] > div > :nth-child(2) {
margin-left:-5px;
width:80%;
}

div[id*='OverlayscreenScrollView'] > div > :nth-child(2) {
margin-left:0px;
width:100%;
}

/* Number Entry (3eme component) */
div[id*='screenScrollView'] > div > :nth-child(3) {
margin-top:-45px;
margin-left:65%;
transform: translateX(-25%);
width:50%;
}

div[id*='OverlayscreenScrollView'] > div > :nth-child(3) {
margin-top:8px;
margin-left: 0px;
transform: none;
width:100%;
}

```

---

<div class="post-metadata">

**Author:** ![MaxB](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maxb/32/15623_2.png) [@MaxB](https://community.glideapps.com/u/MaxB)\
**Post date:** [January 6, 2022, 11:48pm UTC](https://community.glideapps.com/t/vertical-separator-inputs-side-by-side/27609/19 "2022-01-06T23:48:35Z")

</div>

> [@ThinhDinh](#):
>
> So you have a case when there are 3 or more floating buttons on the screen at the same time?
> 
> Try this.

Problem solved! Thanks a lot