The floating labels in Bootstrap do not support clicking anywhere on the text input field

After updating from bootstrap v5.3.0 alpha1 to v5.3.0 alpha3, I noticed a change in the form-floating feature. Previously, everything worked as expected, but now there are some areas where I can't click on the input fields when the floating label is active. Here is a comparison:

Old version (v5.3.0 alpha1):
https://i.sstatic.net/py0X1.jpg

New version (v5.3.0 alpha3):
https://i.sstatic.net/LWzza.jpg

The issue occurs in the login page source code of the new version where clicking on the input fields is restricted:

<style>
    html,
    body {
        height: 100%;
    }
    ...
    ...
</style>

<main class="form-signin w-100 m-auto">
    <form action="<?= MAINTENANCE_URL ?>" method="POST">
        ...
        ...
    </form>
</main>

On the other hand, the source code of the old version allows clicking on input fields without any restrictions:

<style>
    html,
    body {
        height: 100%;
    }
    ...
    ...
</style>
<body class="text-center">
    <main class="form-signin w-100 m-auto">
        ...
        ...
    </main>
</body>

Answer №1

It appears that your code is correct, but the issue stems from a Bootstrap error. To resolve this, it is recommended to create an issue on the official Bootstrap GitHub repository: https://github.com/twbs/bootstrap/issues

Additionally, you can remove the following code from your CSS:

html,
    body {
        height: 100%;
    }

If you prefer, you can try fixing it manually. However, this may require the code from your Web Inspector and could be more challenging due to Bootstrap's large framework size.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to modify the orientation of the bootstrap modal when it opens?

I am trying to modify the way my bootstrap reveal modal opens. I have followed the code instructions provided in this resource, but unfortunately my modal is not opening. I am using angularjs. Can someone assist me with troubleshooting the code? Here is m ...

Creating a dynamic and adaptive horizontal SVG line for your website

Understanding how SVGs function is still a bit unclear to me. I know that the viewBox property plays a role in scaling SVGs, and I have come across advice suggesting not to specify height and width attributes when creating responsive SVGs. While there are ...

navigating through a specific section of a data chart

I need the first column of a table to stay fixed while the rest of the columns scroll horizontally. Here's the code I have: <div id="outerDiv"> <div id="innerDIv"> <table> <tr><td>1</td><t ...

1. "Customizing Navbar height and implementing hover color for links"2. "Tips for

Having issues adjusting the height of my Navbar - when I try to do so, the collapse button doesn't function properly. I've attempted setting the height using style="height: 60px;" and .navbar {height: 60px;} but the collapse menu stops ...

Using TypeScript and Angular to modify CSS properties

I'm trying to figure out how to change the z-index CSS attribute of the <footer> element when the <select> is open in TypeScript (Angular 10). The current z-index value for the footer is set to 9998;, but I want it to be 0;. This adjustmen ...

Tips for incorporating css @keyframes within a cshtml file:

My cshtml page includes a Popup that I created, but I encountered an issue with keyframes. When I tried to use it without keyframes, the fade effect was lost. I am looking for a way to fix my @keyframes. (I tested the code on Chrome and Opera) I found the ...

Tips for positioning a background image behind page content

I have a webpage with a background image, and now I want to add content that floats over it. However, the code below is placing the content behind the image. How can this be corrected? It's important to note that I'm attempting to achieve the ef ...

Every time I rotate my div, its position changes and it never goes back to

Trying to create an eye test by rotating the letter "E" when a directional button is clicked. However, facing an issue where the "E" changes position after the initial click instead of staying in place. Here is a GIF showcasing the problem: https://i.stac ...

Bootstrap creates a small and calculated width for elements

Currently, I am integrating the react-datepicker plugin into my project alongside Bootstrap 3. Upon implementation, I have noticed that the size of the datepicker on my website appears to be smaller than the examples provided in the plugin demos. It seems ...

Utilizing FontAwesome icons instead of png images as a visual source

Is there anyone who can assist me? I currently have SiteSearch360 set up on my website with a full screen search bar that is activated by clicking on an image of a magnifying glass. My goal is to replace the default image (src="https://cdn.sitesearch360. ...

What is the best way to achieve this Bootstrap design without copying the content?

Trying to achieve a specific Bootstrap layout without repeating content is my current challenge. Essentially, I aim to divide some content into 2 columns at the sm/md breakpoints and then switch to 3 columns for the lg breakpoint. The layout for sm/md bre ...

The altered variable refuses to show up

Currently, I am working on a project to create a Skate Dice program that will select random numbers and display the results simultaneously. Unfortunately, I have encountered an issue where the randomly generated number is not being shown; instead, it dis ...

A Spring application deploying a WAR file encounters a 404 error when attempting to access the

Working on a Java EE application using Spring and Maven, the project structure follows the typical hierarchy. Here is a glimpse of it: MyApplication src main webapp WEB-INF layout ...

Two divs positioned on the left side and one div positioned on the right side

Hey there, I am attempting to align 2 divs on the left side with one div on the right. #div1 #div2 #div1 #div2 #div3 #div2 #div3 #div3 The challenge is to have #div2 positioned between #div1 and #div3 when the browser window is resized smaller. Currentl ...

Images are appearing misaligned in certain sections

I have been utilizing the freewall jQuery plugin for organizing images in my website. While the layout of my first section, located at , is functioning properly, I am encountering some issues with its height. The code snippet that I am currently using is a ...

Tips for ensuring a functioning dropdown menu while maintaining a fixed navigation bar position

I am facing an issue with my navigation bar. I have set the position to fixed to keep it at the top, but this is causing the drop-down functionality to stop working. Please advise on where I should move the position fixed property so that my nav bar remai ...

Using Bootstrap to Dynamically Connect and Display a Popover on an Element

Currently, I am utilizing Bootstrap v3 and encountering an issue while attempting to display a popover programmatically, beside an element, as soon as the page loads. The DOM does not contain any popover markup, so my goal is to generate and display it usi ...

Transform one div to another using a CSS animation slide

I am experiencing an issue with two divs (page1 + page2) inside a container (also a div). The container has overflow:hidden property, but when the animation starts, the overflow configuration is being ignored. Additionally, the page that should be displaye ...

Is there a way to extend a div to occupy two rows?

I am attempting to accomplish the following task: https://i.sstatic.net/BH7Su.png Here is my markup: <div> <div>A</div> <div>B</div> <div>C</div> </div> Can this be achieved using grid, bootstrap ...

"Merging the vibrancy of RGB with the subtlety of

Currently exploring methods to blend an RGB color with a grayscale one. This is for a gradient generator that leverages preset colors and a template (predefined style properties for various vendors) in order to craft a CSS3 gradient. I am certain there is ...