The floating label appears distorted when used with a datalist input in Bootstrap 5

How can I get the floating label to display correctly for datalists in Bootstrap 5? Currently, it looks like this... It's working fine without the form-floating class, but I want to use the floating form feature.

<div class="form-floating">
    <label for="exampleDataList" class="form-label">Datalist example</label>
    <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
    <datalist id="datalistOptions">
        <option value="San Francisco">
        <option value="New York">
        <option value="Seattle">
        <option value="Los Angeles">
        <option value="Chicago">
    </datalist>
</div>

view image description here

htmlcssfrontendbootstrap-5web-frontend

Answer №1

Although I have not conducted a comprehensive analysis of the issue, it appears that relocating the label element to the end resolves the problem satisfactorily.

<div class="form-floating">
    <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
    <datalist id="datalistOptions">
        <option value="San Francisco">
        <option value="New York">
        <option value="Seattle">
        <option value="Los Angeles">
        <option value="Chicago">
    </datalist>
    <label for="exampleDataList" class="form-label">Example of Datalist</label>
</div>

Answer №2

Make sure to position your label after the input field. Take a look at the revised code snippet below:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="11737e7e65626563706151243f213f23">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="20424f4f54535452415060150e100e12">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

                <div class="form-floating">
                    <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
                    <label for="exampleDataList" class="form-label">Datalist example</label>
                    <datalist id="datalistOptions">
                        <option value="San Francisco">
                        <option value="New York">
                        <option value="Seattle">
                        <option value="Los Angeles">
                        <option value="Chicago">
                    </datalist>
                </div>

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

Creating a JSON file using an object to send requests in Angular

In my Angular 7 project, I am trying to send a multipart request to the server that includes a file (document_example.pdf) and a json file containing a data object (data_object_example.json). The content of data_object_example.json is as follows: { " ...

javascripthtmljsonangulartypescript

Tips on expanding the content of a page all the way to the bottom of

Currently, I am facing an issue while working on a Joomla site where I am struggling to extend a page to the bottom of the screen. Attached is an image of the page: https://i.sstatic.net/uHZ9Q.png and below is the HTML code for the page: <div id="free_ ...

htmlcss

Trouble in Paradise: Woocommerce Product Grid in Disarray

Currently working on a WordPress WooCommerce website and encountering an issue with the product listing. Despite trying various plugins and CSS adjustments, I am unable to correct the positioning problem. Strangely, everything seems to be functioning prope ...

htmlcsswordpresswoocommerce

Handling routerLink exceptions in Angular 2, 4, and 5

In my app, I am working on catching routing exceptions. There are three ways in which a user can navigate: If the user types the address directly - this can be caught easily by using { path: '**', redirectTo: 'errorPage'} in the route ...

javascripthtmlangular

Difficulties in Adjusting the Size of Three Image Columns within a Website's Body

While working on my website layout, I encountered a problem with inserting three image columns in the body section. The images turned out to be too large and extended beyond the footer. Moreover, the third image was larger than expected, dominating the web ...

htmlcss

Pressing the follow button does not save data in the database

Whenever I click on a follow button, it should store followerid and followingid in the follow table and change to an unfollow button. If I then click on the unfollow button, those entries should be deleted from the follow table. I have used JQuery for this ...

phpjqueryhtml

What could be causing the issue of node-sass generated CSS files not loading on the initial GET request?

I've set up a node express app and incorporated sass support for the CSS. However, when I attempt to access http://myhost.com:port/css/whatever.css, the whatever.css file is generated in the express_app_root/public/css directory as expected. The *.scs ...

cssnode.jsweb-applicationsexpresssass

Enhance container and typography for layouts converted to 1920px width to improve overall design

Greetings to all! I need some assistance with converting a design file that is 1920px wide into an HTML layout. Can someone provide tips on optimizing containers and typography for responsiveness? Specifically, I would like the font-size and line-height ...

htmljquerycssresponsive-design

Tips for Aligning Text Vertically in the Center of a Grid using Bootstrap 5

Currently using Bootstrap version 5.1.3 and here is a snippet of my HTML code: <!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v ...

bootstrap-5

Ways to Adjust the Text Size within Table Cells

I'm having trouble changing the font size in my table. I've tried adding the font size in the HTML tag, as well as in the CSS code for the Myposts class, but so far nothing has worked. Do you have any suggestions on how to successfully change the ...

phphtmlcssfontshtml-table

Conceal a specific class from being seen by another class of the same name upon clicking

I have a webpage with multiple images all sharing the same class name. When I try to hide a specific image by clicking on it, all images with that class are affected. Even though I used PHP to display the images on the webpage, I haven't been able to ...

javascriptphpjqueryhtmlcss

How about optimizing HTML by utilizing jQuery's magic?

For my website, I aim to allow users to choose a grid size by clicking on elements of a large grid display. This can be compared to selecting a table size in Microsoft Word. Each grid element will have a designated position ID for organization. Instead of ...

javascriptjqueryhtml

How can I modify the custom CSS to adjust the color of a Font Awesome icon?

Hello everyone! I am new to coding and I have a question for the Stack Overflow community. I am trying to customize the color of my Font Awesome icons on the homepage of my WordPress theme (Arcade Pro) using the custom CSS editor. Can anyone provide me w ...

htmlcsswordpressfont-awesome

Utilizing WordPress to dynamically update the footer content on a targeted webpage by modifying the HTML/PHP/JS code

Let me provide some clarity. Details: - Website built on WordPress This website is bilingual with Hebrew and English languages. The issue is with the footer section. I have 4 lines that need to display: - Address: ........ - Phone: ....... - Fax: ...... - ...

javascriptphphtmlwordpress

How can I insert PHP code within the style attribute of a div tag?

I tried implementing this code, but unfortunately it's not functioning properly. My goal is to take user-defined width and height inputs in PHP and use them to generate a shape. echo "<div style='width:<?php $sirina?>;height: <?php $v ...

phphtml

Struggling with a JQuery function that fails to perform addition

I'm experiencing an issue with my code where the math doesn't add up when trying to sum values under the venting selection. Instead of adding up, it just displays as text. I have an event set up that should populate the values upon selecting valu ...

jqueryhtmlfunctionjquery-mobile

What is the best way to replicate the orange outline when focused?

I am in the process of creating a series of divs that can be navigated by the user using the tab key. I would like to incorporate the standard orange focus outline for these elements. Is there anyone who can provide guidance on how to achieve this? I unde ...

htmlcssfocus

Here are the steps to effectively incorporate CSS classes in a form using Laravel Collective 5.2 framework

Hi there, I am currently working on developing an application and find myself in need of implementing CSS classes to a form using Collective Laravel "5.2.*". The snippet of code that I have at the moment is as follows: {!! Form::model($user, array(&apos ...

htmlcsslaravel

Integrating a PHP function within an ECHO statement

Here is a code snippet I'm currently using in my Wordpress: function wpstudio_doctype() { $content = '<!DOCTYPE html>' . "\n"; $content .= '<html ' . language_attributes() . '>'; echo apply_filte ...

phphtmlwordpress

Using Custom .woff Format Fonts in Sendgrid: A Guide

Having trouble with implementing custom fonts in Sendgrid. While Google fonts work fine, the custom .woff format font doesn't seem to cooperate. I've attempted three solutions below. Solution number 1 shows up in the Preview tab but not in the em ...

htmlcsssendgrid