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.

1 Like

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.

10 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