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.
2 Likes
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.
12 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
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%;
}
2 Likes
Problem solved! Thanks a lot
1 Like