Option select issue with floating label. I would like to ask for a little help

I use version v5.0.8.

I did what you said step by step, but the result is the same. I just don’t get it…Don’t you happen to have a video of it?

Oh, my bad btw… I forgot a step. See my previous post :wink:

1 Like

It works perfectly, I can’t believe I didn’t figure this out, I’m beating my head against the wall. Now I’m going out to smoke because I’ve pissed myself off.
Thank you very much once again.

2 Likes

@pumpkin

Everything works perfectly, but did you manage to change the height of the message section? I tried in vain, but it doesn’t work, it remains as thin as the others. That is, I can’t increase its height…

Never tried that after I discovered the accessibility issues and I’m not using it, so … can’t help. But maybe someone else can?

I understand, thanks for your help :wink:

I don’t want to start a new topic, so I’ll ask here instead, it’s going to hit the spot anyway.
How to completely remove that blue focus border color?

That’s been addressed a number of times on the forum, you really should keep it, as it’s part of accessibility.

It’s an outline. If you searched the forum you will find some info. But it’s not recommended.

@PeteSharp

Yes, I know it is, but I want to solve it differently.
I just can’t turn it off.

Also, the height of the message area, which annoys me more.

I tried to change it with class setting and CSS, but nothing.

An outline is not part of an element box model. So there is no layout shift when using them. It’s the preference.

I’m not sure what other colours you can use. Check the accessibility guidelines.

Set the number of lines for the text box.

Since I’m using a form-floating class, no matter how much I set it, nothing changes, except when I delete the class from the message area.

FYI Floating labels got an update with Bootstrap 5.3.

Look at the examples. It shows you how it works.

1 Like

I already looked at this, but here I can only insert a new field, not modify the height of the factory one.

I said lines, but the setting is rows.

Screenshot 2023-06-17 at 12.04.20 PM

Using the inspector you will see the textarea input can be adjusted with an attribute, Blocs allows you to set that.

The inspector will show you, if you add a class to the textarea and set a hight, it will be over-ridden by the Bootstrap class.

The documentation says it will inherit the height.

By default, <textarea> s with .form-control will be the same height as <input>

So you can add a class, but you have to set !important on the height for it not to be over-ridden. Or use the actual classes being used by Bootstrap.

I solved it in the meantime, thanks for the help. :beers:

Care to share for others how you solved it.

Looks like you spent a month on this form :grinning:

I deleted the messages section. I put the code widget in its place and copied the code from the page you sent.
It works because I tested it.

Dont forget to change the label and ID names, they are used fro accessibility too.

What are you doing differently about the focus and accessibility out of curiosity ?