Vertical Separator; Inputs Side-by-Side

Ask for Help
3

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
image1196×950 114 KB

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.

13 Likes