Uibuilder - checkbox rendering question

General
,
1

I am using uibuilder 6.5.0 on Node-Red 3.1.0 with IIFE client and no framework.

I have built an HTML form presented with uibuilder that I use to initiate speech with Amazon Alexa. The HTML form is currently using a range (for volume), textarea (for what to say) and select elements for choosing voice, which device(s) to speak on, and optional sound to play before speaking. All of that submits to Node Red and is working fine. I typically access it from my iPhone.

Now I want to add some checkboxes to the form. This seems like it should be straightforward to have an input checkbox and a label next to it. It looks as I would expect on my desktop. But when I view the page on my iPhone, the checkbox is on one line and the label is on the next line even though there is plenty of space. I've tried to put the two elements in a span with "whitespace: no-wrap" but the elements still appear on different lines. I've tried putting the checkbox in one column of a table and the label in a second column, but the page renders with the td elements on separate lines even though they are in the same table row. I've inspected the computed style in my browser to try to determine what is causing it, but I don't know enough about CSS to figure it out.

If I comment out the inclusion of the index.css file that was created by uibuilder, then the checkboxes render as I would expect on my desktop and my iPhone (albeit without the pretty UI). So it seems there is something in that index.css that is causing the undesirable behavior with the elements on different lines. I suppose I could just abandon the CSS from uibuilder, but I would like to be able to keep using it while also having each checkbox and its label stay on the same line. But the index.css file has some very complicated stuff in it that I'm not sure how to parse through.

Any suggestions?

Thanks...

2

Hi, this is, I assume, using the default uib-brand.css styles? If you look into the css file, you will find a breakpoint for where the wide display turns into a vertical one. Of necessity, the choice of that position is a compromise which will certainly not work for everyone. It aims to work for most.

Yes, I find it quite hard in places myself!! Of course, much of it was "adopted" from other examples. :slight_smile:

However, all is not lost. You have a few choices. Though bear in mind that I am far from being a CSS expert so it make take some experimentation to get this right.

The thing you are hitting is a line in the css that says @media screen and (max-width: 600px) { So if your mobile screen is 600px or less wide, the definitions in that section will override the general settings. By the way, it actually feels to me that I should probably not have added that @media section but should really have used a class name and let you choose your own media query. But, as I said, I'm not a CSS expert. Something that perhaps I'll fix in a future release.

So the first thing to try is to add your own media query to index.css AFTER the inclusion of the brand.

Copying the override from the brand css but using a different media query:

@import url("../uibuilder/uib-brand.min.css");

/* Small screen */
@media screen and (max-width: 400px) {
    form, form * {
        display:block;
        width:100%;
    }
    form > label, form > div.btn-row {
        margin-top: .8rem;
    }
    form > :not(label) {
        margin-bottom: 0.5rem;
    }
}

I've used 400px wide there but you can, of course, adjust to your own needs.

Lets see if that works :crossed_fingers:

If that on its own does not work, the next step is to copy the rest of the form entries from the brand css (except the media section) into index.css. This is because everything you copy into your css file after the include should take preference over the include.

3

Thanks so much for the quick and thoughtful reply! I don't yet have it working exactly as I want, but I can confirm that the

form, form * { display:block; width:100%; }

Is the part that is causing the behavior I wanted to change. Now I see what I need to experiment with to get it looking the way that I want. Also, you helped me understand how the CSS is behaving differently on different screen sizes and how to change those, which I believe will be quite useful as well.

Thanks!

1 Like
4

form *

I don't think this "works" in terms of css - * is a universal selector

If the goal is to force the direct descandents to be 100%, it should be form > *
Then again - it also states display:block while form is already a block element by default.

Try removing the whole form part from the media query. (I don't know the context of the rest of the css, but a form will automatically be 100% width and a block by default).

5

It selects all descendants of form. So it is indeed doing what I want - making all descendants block display with 100% width. Direct descendants is not always enough depending on your form layout.

You need to know the context here. What is being referred to is a media override for smaller screens. The main definition for the form is display:flex. So while the browser default for a form is block display, the brand css defines it otherwise so that it does a side-by-side display. The small screen media overlay turns it back into a block display.

6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.