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. [image] CSS Choice Multiple Community Resources bonjour @SantiagoPerez something like that ??? [image] /* 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; } EDIT: I…

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] The CSS /* 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; } 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.

This is so helpful. Thank you so much!

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

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.

It’s true @ThinhDinh rightly (as always)

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

Vertical Separator; Inputs Side-by-Side

Ask for Help

Jeff_Hager June 4, 2021, 2:58am 2

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

Topic		Replies	Views
Multiple entries next to each other Ask for Help	2	503	December 12, 2022
CSS : Two or three text entries on the same line Ask for Help	2	1038	June 8, 2021
[CSS Help] Organize components on several columns Ask for Help	4	730	July 23, 2021
Custom floating buttons: 3 in a row at the bottom of the screen + one with text? Ask for Help	19	4490	May 1, 2022
Moving choice components onto the same line Ask for Help	16	934	September 6, 2021

Vertical Separator; Inputs Side-by-Side

Related topics