Vertical Separator; Inputs Side-by-Side

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.

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

2 Likes

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

The CSS

<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.

14 Likes

This is so helpful. Thank you so much!

1 Like

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?


Brilliant
Thanks

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


[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!

3 Likes

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.

1 Like

It’s true @ThinhDinh rightly (as always)

1 Like

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

image

Which exact snippet of code are you using?

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%;
}

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.

Disappears;

image

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

image

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

Are you able to make that app copyable?

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

Try this.

<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.

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;

<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

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

Try this.

<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%;
}
2 Likes

Problem solved! Thanks a lot

1 Like