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.
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.
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.
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?
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!
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?
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;
but when i press one of the floating buttons, new ones appear and get the same problem
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
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%;
}
Problem solved! Thanks a lot