Labels are overlapping each other and being aligned to the right side

Working with the most up-to-date version of Bootstrap, I am currently designing a search bar featuring a dropdown menu preceding the search button.

Upon clicking the dropdown, various controls are revealed.

Below is the HTML code for this configuration:

<div class="row">
    <div class="col-md-12">
        <div class="input-group" id="adv-search">
            <input type="text" class="form-control" placeholder="Search for snippets" />
            <div class="input-group-btn">
                <div class="btn-group" role="group">
                    <div class="dropdown dropdown-lg">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
                        <div class="dropdown-menu dropdown-menu-right" role="menu">
                            <form class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label for="filter">Filter by</label>
                                    <select class="form-control">
                                        <option value="0" selected>All Snippets</option>
                                        <option value="1">Featured</option>
                                        <option value="2">Most popular</option>
                                        <option value="3">Top rated</option>
                                        <option value="4">Most commented</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="contain">Author</label>
                                    <input class="form-control" type="text" />
                                </div>
                                <div class="form-group">
                                    <label for="contain">Contains the words</label>
                                    <input class="form-control" type="text" />
                                </div>
                                <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                            </form>
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                </div>
            </div>
        </div>
    </div>
</div>

Concerning CSS styles:

/* Search Box */
.dropdown.dropdown-lg .dropdown-menu {
    margin-top: -1px;
    padding: 6px 20px;
}
.input-group-btn .btn-group {
    display: flex !important;
}... [Remaining CSS code has been removed for brevity] 

<p>The issue at hand revolves around the misalignment of label controls like 'Author', which are appearing beside instead of below the dropdown. What could be causing this alignment problem?</p>

<p>Note: Any red text can be disregarded as it pertains to a control located below the search box.</p>
</div></questionbody>
<exquestionbody><div class="question">

<p>Incorporating the newest version of Bootstrap, I'm in the process of developing a search bar. This search feature includes a dropdown menu before the actual search button.</p>

<p>Upon opening the dropdown, multiple controls are presented.</p>

<p>Here's the HTML markup for this setup:</p>

<pre><code><div class="row">
    <div class="col-md-12">
        <div class="input-group" id="adv-search">
            <input type="text" class="form-control" placeholder="Search for snippets" />
            <div class="input-group-btn">
                <div class="btn-group" role="group">
                    <div class="dropdown dropdown-lg">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
                        <div class="dropdown-menu dropdown-menu-right" role="menu">
                            <form class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label for="filter">Filter by</label>
                                    <select class="form-control">
                                        <option value="0" selected>All Snippets</option>
                                        <option value="1">Featured</option>
                                        <option value="2">Most popular</option>
                                        <option value="3">Top rated</option>
                                        <option value="4">Most commented</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="contain">Author</label>
                                    <input class="form-control" type="text" />
                                </div>
                                <div class="form-group">
                                    <label for="contain">Contains the words</label>
                                    <input class="form-control" type="text" />
                                </div>
                                <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                            </form>
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                </div>
            </div>
        </div>
    </div>
</div>

CSS Styles:

    /* Search Box */
.dropdown.dropdown-lg .dropdown-menu {
    margin-top: -1px;
    padding: 6px 20px;
}
.input-group-btn .btn-group {
    display: flex !important;
}... [Remaining CSS code has been removed for brevity] 

<p>The main issue lies in the alignment of label controls like 'Author', being displayed next to rather than beneath the dropdown. What might be causing this misalignment?</p>

<p>Note: Please ignore any red text related to a control under the search box.</p>
</div></questionbody>
<exquestionbody>
<div class="question">
                
<p>I'm utilizing the latest Bootstrap version to design a search box with a dropdown menu before the search button.</p>

<p>Hitting the dropdown reveals various controls.</p>

<p>See the HTML code for this set-up:</p>

<pre><code><div class="row">
    <div class="col-md-12">
        <div class="input-group" id="adv-search">
            <input type="text" class="form-control" placeholder="Search for snippets" />
            <div class="input-group-btn">
                <div class="btn-group" role="group">
                    <div class="dropdown dropdown-lg">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
                        <div class="dropdown-menu dropdown-menu-right" role="menu">
                            <form class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label for="filter">Filter by</label>
                                    <select class="form-control">
                                        <option value="0" selected>All Snippets</option>
                                        <option value="1">Featured</option>
                                        <option value="2">Most popular</option>
                                        <option value="3">Top rated</option>
                                        <option value="4">Most commented</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="contain">Author</label>
                                    <input class="form-control" type="text" />
                                </div>
                                <div class="form-group">
                                    <label for="contain">Contains the words</label>
                                    <input class="form-control" type="text" />
                                </div>
                                <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                            </form>
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

    /* Search Box */
.dropdown.dropdown-lg .dropdown-menu {
    margin-top: -1px;
    padding: 6px 20px;
}
.input-group-btn .btn-group {
    display: flex !important;
}
.btn-group .btn {
    border-radius: 0;
    margin-left: -1px;
}
.btn-group .btn:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.btn-group .form-horizontal .btn[type="submit"] {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.form-horizontal .form-group {
    margin-left: 0;
    margin-right: 0;
}
.form-group .form-control:last-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

@media screen and (min-width: 768px) {
    #adv-search {
        width: 500px;
        margin: 0 auto;
    }
    .dropdown.dropdown-lg {
        position: static !important;
    }
    .dropdown.dropdown-lg .dropdown-menu {
        min-width: 500px;
    }
}

The alignment issue with labels like 'Author' occurs where they are positioned next to, not below, the dropdown. How can this misalignment be resolved?

P.S: Disregard any red text referencing a control beneath the search box.

htmlcsstwitter-bootstrap

Answer №1

Label tags are typically displayed as inline elements by default, meaning they will remain on the same line as surrounding content. To change this behavior, you can add display:block to the labels or wrap them in their own div tag to force a new line.

In the CSS code provided, I included:

label{
   display:block;
}

as an example of how to implement this change.

You can view the demonstration here: https://jsfiddle.net/bLfv9dh6/

Additionally, it's important to note that there may be other CSS properties affecting your layout, such as 'float:left'. If not cleared properly, these values can cause issues. Consider adding 'clear:both;' to your label styles. More information on the clear property can be found here: http://www.w3schools.com/cssref/pr_class_clear.asp

(To experienced developers: please refrain from criticizing w3schools. While it may not be perfect, it can be a helpful resource for beginners).

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

"Interactive feature allowing users to edit and view the most recently inserted HTML

My approach involves using a contenteditable div as an input field for entering text and inserting icons through a button that adds small HTML pictures within the text. Everything works fine when the text is narrower than the contenteditable field. Howev ...

jqueryhtmlcsscontenteditable

How to Properly Adjust the Material UI CircularProgress Size

Is there a way to display the Material UI CircularProgress component at a size that nearly fills the parent div, which has an unknown size? Ideally, I want the size to be around 0.8 * min(parent_height, parent_width). I've experimented with adjusting ...

htmlcssreactjsmaterial-uiprogress-bar

Unable to display image using jQuery load() function on an HTML page

I have implemented the following code snippet to load an HTML page within a div: $("#htmlViewer").load("conversion_test/to_convert_3264/"+getPageName(pageCount)+".htm", function(response, status, xhr) { if (status == "error") { ...

jqueryhtmlajaxload

Guide on validating a dropdown using template-driven forms in Angular 7

Having trouble validating a dropdown select box, possibly due to a CSS issue. Any suggestions on how to fix this validation problem? Check out the demo here: https://stackblitz.com/edit/angular-7-template-driven-form-validation-qxecdm?file=app%2Fapp.compo ...

csstypescriptvalidationangular8

Comparing the Calculation of CSS Selector Specificity: Class versus Elements [archived]

Closed. This question requires additional information for debugging purposes. It is not currently accepting answers. ...

htmlcssangular

Validating the similarity of classes with JQuery

Currently, I am working on creating a quiz game using HTML, CSS, JQuery, and potentially JavaScript. I am looking to implement an if statement to check if a dropped element is placed in the correct div (city). My approach involves utilizing classes to comp ...

javascriptjqueryhtmlcssdraggable

enhance the brilliance of elements at different intervals

My latest CSS animation project involves creating a stunning 'shine' effect on elements with a specific class. The shine effect itself is flawless, but having all elements shine simultaneously is making it look somewhat artificial. I've bee ...

htmlcssanimation

Include a tab button within a vertical tab list using Angular Material

I have utilized Angular Material to create a vertical tab, and I would like to incorporate an Add Tab button within the tab listing itself. Currently, when I add the button, it appears at the bottom of the layout instead. For reference, you can access the ...

cssangulartabsangular-materialmaterial-design

Is there a way to customize the color of the HR element in a Material-UI Select Field?

https://i.stack.imgur.com/DYeX7.png https://i.stack.imgur.com/CN0T6.png Hi there, I am currently working on a website and using a Select Field component from Material-UI. I am faced with the challenge of customizing the style to change the default light ...

javascriptcssreactjsmaterial-ui

What is the best way to adjust a 1px margin in Google Chrome?

Check out this example http://jsbin.com/oqisuv/ CSS body { background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) center repeat-y; } .menu { width:989px; margin:auto; height:100px; background:#666666; line-height:100px; text-ali ...

htmlcssgoogle-chrome

Create a captivating sliding effect on Windows 8 using a combination of CSS and JavaScript

I believe that using css3 alone can achieve this effect, but I'm struggling with understanding properties like 'ease' in css3. This is the progress I have made so far: http://jsfiddle.net/kwgy9/1/ The word 'nike' should slide to ...

javascriptjquerycss

Right-align each item when selecting none

Is there a way to change the style of just one of the elements select or option, without affecting the style of both? I attempted to align the select element to the right, while leaving the option elements aligned to the left. However, this did not work a ...

javascriptjqueryhtmlcss

The code in check.js causes a square of dots to emerge on the screen in Skype

Trying to add a Skype call button to my page has been successful, but there's one issue - a pesky white dot keeps appearing at the bottom of the footer. The script source I used is as follows: <script src="http://download.skype.com/share/skypebu ...

javascripthtmlskype

Determine the total of the final column in recently added rows by utilizing JavaScript

I have a table where users can dynamically add rows as needed. I am looking to implement a feature that will display the total of the last column in a text box underneath the table using JavaScript. If real-time calculations are not feasible, then I am ope ...

javascripthtmlcalculated-columns

Styling animations in React with inline styles

Exploring the world of React inline animation styling, I set out to create a toggle button. The goal was simple: when the user presses the button for the first time, I wanted a pop-up animated card to slide from left to right. On the second press, the card ...

cssreactjsanimation

Incorporate SCSS capabilities into a Vue project

The default content of my packages.json file includes the following: "postcss": { "plugins": { "autoprefixer": {} }} Whenever I try to compile using <style lang='scss'>, it doesn't work automatically like it does for Typescript. I ...

cssvue.jsnpmwebpacksass

li tag style

I need to insert a check mark inside the <li> tag on the right side. How can I do this? The check mark looks like this: For example: http://jsfiddle.net/HpVcy/ ul li{ padding: 3px 10px 3px 10px; background:url(http://img4up.com/up2/730897458613759 ...

htmlcss

Bootstrap 3 with a dual sidebar layout positioned on the left side

I am currently working on a project where I need to create a fluid layout with a left sidebar. However, now I would like to add an expandable sidebar next to the existing one. Below is an image to illustrate my goal: Initially, the left sidebar contains a ...

jqueryhtmlcsstwitter-bootstrap

Wrapbootstrap offers dynamic design options for Java-based web applications

I recently obtained a bootstrap theme from the website wrapbootstrap to use in my Java web application. However, I am unsure of where to begin with it. Despite having already added the bootstrap css to my application, I now wish to remove it and replace it ...

cssjsptwitter-bootstrapsass

What is the reason for adding CSS styles to a JavaScript file without importing them?

/Navbar.js/ import './navbar.scss'; import {FaBars, FaSearch} from "react-icons/fa"; import { useState } from 'react'; function Navbar(){ const [hide,sethide] = useState(true); const barIcon = document.querySelectorAl ...

javascripthtmlcssreactjs