Unable to position the button next to the search bar

Question

Unable to position the button next to the search bar

I'm struggling to get my search bar aligned next to my dropdown button. I've tried various alignment methods without success. Both buttons are within a container, causing the search bar to span 100% of the container's width. I also attempted align-left, align-right, and align-center. Additionally, I changed the button display to "flex".

Here is the current CSS for my buttons:

.has-search .form-control {
    padding-left: 38px;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: flex;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>sample</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/mystyle.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
        <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
        <script src="js/app.js"></script>
        <script src="js/restaurants.js"></script>
    </head>

    <body onload="getRestaurantData()">
        <div class="container">
            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select cuisine
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">JavaScript</a></li>
                </ul>
            </div>

            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search this blog">
              <div class="input-group-append">
                <button class="btn btn-secondary" type="button">
                  <i class="fa fa-search"></i>
                </button>
              </div>
            </div>
        </div>

    <br><br>

    <div id="restaurantsTable" class="row"></div>
    </div>
    <br><br>
    
    <div w3-include-html="footer.html"></div>
    <script src="js/w3.js"></script>
    <script>w3.includeHTML();</script>
</html>

html css button bootstrap-4

Answer 1

Answer №1

Revise HTML CODE as follows

<div class="container">
        <!-- This message will appear when the page loads and vanish after loading movies -->

<div class="d-flex"> /*Modifications made here*/
    <div class="dropdown col"> /*Edits implemented here*/
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select cuisine
                    <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                      <li><a href="#">HTML</a></li>
                      <li><a href="#">CSS</a></li>
                      <li><a href="#">JavaScript</a></li>
                    </ul>
            </div>

            <div class="input-group col-12 flex-fill"> /*Adjustments done here*/
              <input type="text" class="form-control" placeholder="Search this blog">
              <div class="input-group-append">
                <button class="btn btn-secondary" type="button">
                  <i class="fa fa-search"></i>
                </button>
              </div>
            </div>
            </div>


            <!-- Thumbnails of the movies will be displayed here -->
            <div id="restaurantsTable" class="row"></div>
        </div>

https://jsfiddle.net/lalji1051/eajpcuh3/2/

Answer 2

Revise HTML CODE as follows

<div class="container">
        <!-- This message will appear when the page loads and vanish after loading movies -->

<div class="d-flex"> /*Modifications made here*/
    <div class="dropdown col"> /*Edits implemented here*/
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select cuisine
                    <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                      <li><a href="#">HTML</a></li>
                      <li><a href="#">CSS</a></li>
                      <li><a href="#">JavaScript</a></li>
                    </ul>
            </div>

            <div class="input-group col-12 flex-fill"> /*Adjustments done here*/
              <input type="text" class="form-control" placeholder="Search this blog">
              <div class="input-group-append">
                <button class="btn btn-secondary" type="button">
                  <i class="fa fa-search"></i>
                </button>
              </div>
            </div>
            </div>


            <!-- Thumbnails of the movies will be displayed here -->
            <div id="restaurantsTable" class="row"></div>
        </div>

https://jsfiddle.net/lalji1051/eajpcuh3/2/

Answer 3

Answer №2

If you're currently utilizing bootstrap, I recommend taking advantage of its features.

The key concept is that an element with the flex property should encompass the items you wish to interact with.

In this scenario, add the class d-flex to your <div class="container">. However, it's better to create a separate div with that class surrounding both the dropdown and input-group. This allows for more flexibility in manipulation. To create space after the dropdown, consider adding the class mr-2 to that div, which adds right margin.

The outcome will resemble something like this.

.has-search .form-control {
    padding-left: 38px;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: flex;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>sample</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/mystyle.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
        <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
        <script src="js/app.js"></script>
        <script src="js/restaurants.js"></script>
    </head>
<body onload="getRestaurantData()">
        <!-- Insert top navigation HTML code here -->
        <div w3-include-html="top-navigation.html"></div>
        <!-- Container holding initial message, heading, and movies -->



        <div class="container">
        <!-- Initial message shown on page load and disappears after loading -->



            <div class="d-flex">
                <div class="dropdown mr-2">
                        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select cuisine
                        <span class="caret"></span></button>
                        <ul class="dropdown-menu">
                          <li><a href="#">HTML</a></li>
                          <li><a href="#">CSS</a></li>
                          <li><a href="#">JavaScript</a></li>
                        </ul>
                </div>

                <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search this blog">
                  <div class="input-group-append">
                    <button class="btn btn-secondary" type="button">
                      <i class="fa fa-search"></i>
                    </button>
                  </div>
                </div>
            </div>
            <br><br>


            <!-- Thumbnails of displayed movies go here -->
            <div id="restaurantsTable" class="row"></div>
        </div>
        <br><br>
        <!-- Include footer here -->
        <div w3-include-html="footer.html"></div>
    </body>
<script src="js/w3.js"></script>
<script>
        //to bring in other HTML on the fly into this page
        w3.includeHTML();
</script>
</html>

Answer 4

If you're currently utilizing bootstrap, I recommend taking advantage of its features.

The key concept is that an element with the flex property should encompass the items you wish to interact with.

In this scenario, add the class d-flex to your <div class="container">. However, it's better to create a separate div with that class surrounding both the dropdown and input-group. This allows for more flexibility in manipulation. To create space after the dropdown, consider adding the class mr-2 to that div, which adds right margin.

The outcome will resemble something like this.

.has-search .form-control {
    padding-left: 38px;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: flex;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>sample</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/mystyle.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
        <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
        <script src="js/app.js"></script>
        <script src="js/restaurants.js"></script>
    </head>
<body onload="getRestaurantData()">
        <!-- Insert top navigation HTML code here -->
        <div w3-include-html="top-navigation.html"></div>
        <!-- Container holding initial message, heading, and movies -->



        <div class="container">
        <!-- Initial message shown on page load and disappears after loading -->



            <div class="d-flex">
                <div class="dropdown mr-2">
                        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select cuisine
                        <span class="caret"></span></button>
                        <ul class="dropdown-menu">
                          <li><a href="#">HTML</a></li>
                          <li><a href="#">CSS</a></li>
                          <li><a href="#">JavaScript</a></li>
                        </ul>
                </div>

                <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search this blog">
                  <div class="input-group-append">
                    <button class="btn btn-secondary" type="button">
                      <i class="fa fa-search"></i>
                    </button>
                  </div>
                </div>
            </div>
            <br><br>


            <!-- Thumbnails of displayed movies go here -->
            <div id="restaurantsTable" class="row"></div>
        </div>
        <br><br>
        <!-- Include footer here -->
        <div w3-include-html="footer.html"></div>
    </body>
<script src="js/w3.js"></script>
<script>
        //to bring in other HTML on the fly into this page
        w3.includeHTML();
</script>
</html>

Answer 5

Answer №3

.wrapper {
  display: inline-flex;
}

By using this code, the dropdown and search bar will be placed next to each other, allowing you to adjust spacing as needed.

Answer 6

.wrapper {
  display: inline-flex;
}

By using this code, the dropdown and search bar will be placed next to each other, allowing you to adjust spacing as needed.

Unable to position the button next to the search bar

Answer №1

Answer №2

Answer №3

Similar questions

Issues with the alignment of columns using Bootstrap framework

Do we need to include href in the anchor tag?

Having issues getting the single div to refresh with `.#div.load(scriptpage.php)` command

How can you ensure that text in a container automatically moves to a new line and causes the container to expand downward if necessary, when

Display a text box upon clicking an item

Achieving overflow behavior in a div with maximum height that contains another div with maximum height (Overflow issue persists)

Creating a sleek and functional dashboard using HTML and leveraging the power of Bootstrap 4

Transforming CSS styles into Material UI's makeStyles

Directing a webpage to a particular moment within that page

Attaching a $UI element to a <div> tag with JQuery may result in unexpected errors and issues

Tips on saving Firebase Storage image url in Firebase database?

Learn how to toggle a specific div by clicking on an image generated from an ngFor loop in Angular version 11

Stacked divs needed to be aligned vertically

Using Query strings in JavaScript: A Quick Guide

What's the best way to preserve the aspect ratio of my background image while utilizing background-size: cover;?

What is causing the newly generated input tags to disappear from the page?

Using Selenium Web Driver to extract information from Google's knowledge graph

Having trouble with the jQuery load function not functioning properly

The hover effect on MUI TableRows is being overshadowed by the background color of the TableCell

Tips on how to align several divs within another div