Moving choice components onto the same line

[Mark_Turrell]

My use case: users need to read a corona test cassette and put in the ‘Lot number’ of the kit so the number can be included in a valid medical certificate (for good record keeping, plus in case something was wrong with the batch/lot).

I started with getting customers to take a photo… but that is not readable. I even had @Darren_Murphy do autoOCR reading… but it was too garbled to use consistently (it would pick up a newspaper in the background, or the manufacturer’s details).

So now I have to change to getting the customer to put the data in manually and I want to make it a bit easier for them (plus it saves the call center agents rework to fix).

I have got some CSS to make the year large in the Date Picker component:

CSS Calendar - larger Year

<pre><span><style>

/* Month (Mai 2021) */
.MuiPickersSlideTransition-transitionContainer > * {
font-size: 1.5em !important;
margin-top:-5px;
}

/* Year & Day */
.MuiPickersToolbarText-toolbarTxt  {
font-size: 2.125rem;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 400;
line-height: 1.235;
letter-spacing: 0.00735em;
}

/* Day only */
.MuiTypography-h4 {
font-size: 1.8rem !important;
}

</style></span></pre>

But now I would like something more like @Maxim_KM’s which moves the choice components on to one row.

So, this is what I have now… any ideas? Thanks!

[Mark_Turrell]

@SantiagoPerez magic

with the CSS

<pre><span><style>

/* Choice 1 (2nd component) */
div[id*='screenScrollView'] > div > :nth-child(17) {
display:fixed;
margin-left:25px;
width:150px;
}

/* Choice 2 (3eme component) */
div[id*='screenScrollView'] > div > :nth-child(18) {
display:fixed;
margin-top:-84px;
margin-left:175px;
width:150px;
}

´´´
Fiddling to find the nth component (and then using visibility conditions for when a component becomes visible) - and moving the margins about so that the matched up.

Very cool - more things to play with now. Thanks!

[SantiagoPerez]

This is actually @Manu.n’s magic. All credit goes to him.

[Mark_Turrell]

Thanks @Manu.n - to the rescue again!

And year, month, and date all on one line - looking good on the tablet too

[Lucas_Pires]

Try to align the components in the center, what do you think?

[Mark_Turrell]

That would be even better - how do I do that?

[Lucas_Pires]

Good question

[gvalero]

Adjust the width based on percent (%) and not pixel (130px)

Try with

width = 30%

Chao Mark!

[ThinhDinh]

You asked for it

<pre><span><style>

/* Choice 1 (1st component) */
div[id*='screenScrollView'] > div > :nth-child(1) {
display:fixed;
margin-left: calc(50% - 160px);
width:130px;
}

/* Choice 2 (2nd component) */
div[id*='screenScrollView'] > div > :nth-child(2) {
display:fixed;
margin-top:-84px;
margin-left:calc(50% - 50px);
width:110px;
}

/* Choice 2 (2nd component) */
div[id*='screenScrollView'] > div > :nth-child(3) {
display:fixed;
margin-top:-84px;
margin-left:calc(50% + 40px);
width:110px;
}

[Manu.n]

@ThinhDinh
you are the best

[ThinhDinh]

My pleasure to learn from you master

[Manu.n]

@SantiagoPerez

This is actually @Manu.n’s magic. All credit goes to him.

@SantiagoPerez
thank you for this remark

[Maxim_KM]

There is one big downside to all this magic.
On the actual phone, during page animations(navigate back or submit the form, etc) users see as CSS nth-child applies to wrong elements, ruining the feeling of solid app.

Even worse on desktop and tablets: Show New Screen or Submit Form appears as a popover and CSS remains in effect on background elements after closing Screen/Form.

[Maxim_KM]

Everything could be solved if guys from Glide can add actual title to div with choice(as meta), so we can avoid using :nth-child and use data selectors.

E.g.

as

<div class="sc-bQdQlF hYvjUk" name="Choice Hours">.....</div>
<div class="sc-bQdQlF hYvjUk" name="Choice Minutes">.....</div>

[Mark_Turrell]

I agree - I tend to play around with CSS… then give up because it is not always reliable enough to use. Using actual divs would be best for sure!

[Manu.n]

Yes me too
I made this request:

Tell Glide how you use CSS

For this problem I made this request

@Manu.n

Finally The Most Important (for me): As now we can name the components,
is it possible to have class or id names in relation to the names. it would then be easy to identify.

[ThinhDinh]

Yeah I fully agree with this…