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