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>
htmlcssbuttonbootstrap-4

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

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 №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.

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

Curved base of the main banner image

Struggling to achieve the perfect curve at the bottom of my hero image. Any suggestions on how to accomplish this would be greatly appreciated. I am aiming for something like this: https://i.stack.imgur.com/Emxfc.png body { margin: 0; background: lig ...

htmlcss

Using jQuery to establish a canvas element and define its dimensions by adjusting its width and height attributes

My attempt at using jQuery to create a canvas element was not quite as expected. Here is the code I tried: var newCanvas = $('<canvas/>',{'width':100,'height':200,'class':'radHuh'}); $(body).append(n ...

javascriptjquerycanvashtml

Arrangement: Div beside vertically-aligned hyperlinks

Example code: p { color: red; } span { font-weight: bold; } <p>This is a paragraph.</p> <p>Another paragraph here.</p> <span>Bold text</span> This is the desired outcome: https://example.com/image.png It&ap ...

css

Struggling with finding the appropriate CSS selector?

I'm struggling to find the correct selector. Let me do my best to explain the situation: I am currently working on a project where I am unable to make changes to the HTML and JavaScript due to dynamic content and other constraints. Within this proj ...

htmlcss

Adjust the input dimensions to match the length of the text upon loading

I have a jQuery code that is supposed to test the length of text in an input box when the page loads and adjust the size of the input box accordingly. However, I seem to be encountering some issues with my current approach: $("#emailSubject").attr('s ...

jqueryhtmlinput

Send Selected Input From Radio Button To Form Using a Function

Within the main php page titled tipComp.php, there is a script designed to submit a selected value from a radio button within a form: <script> $('input[type=radio]').on('change', function() { $(this).closest("form& ...

phphtmljquery

How to create multiple open dropdown menus in Bootstrap 4 navbar without using the toggle

Currently, I am utilizing Bootstrap 4 along with a multi-level vertical sidebar menu. An issue that I am facing is that when a dropdown item is clicked, the previously opened dropdown automatically closes. However, I would like to allow users to keep multi ...

jquerybootstrap-4

The parent's height remains unaffected by the margins of its child element

My code snippet is concise: .parent{ box-sizing: border-box; } .child{ height: 100px; margin: 20px; background: red; } .a1{ background: green; } <!DOCTYPE html> <html> <head> </head> <body> ...

htmlcss

Increasing the boundary width beyond a specified limit with CSS

Need help extending the border-top of an element beyond a container width set to 1024px, while maintaining center alignment on the page with left alignment. Thank you! Here is the code snippet: HTML <main> <div> <span>Hello& ...

htmlcss

The significance of Z-index in Embedded Email Subscription Code

I am encountering an issue with a pop-up window I have created for visitors to sign up for our mailing list. The problem is that the CSS menu appears on top of the pop-up, despite setting the menu's z-index to 9999. How can I adjust the z-index in the ...

cssdrop-down-menuz-index

Selector matching a descendant element in React styling

I am facing a challenge with using the direct descendant CSS selector within a React inline style element: <style>{` .something>div{ color: blue; } `}</style> While this works fine in development, in production React replaces > ...

cssreactjs

Steps to turn off the automatic completion feature for orders in WooCommerce on your WordPress website

Looking for assistance with changing the order status from completed to processing. When an order is placed, it automatically goes to completed status which is not the desired outcome. The status should change based on the virtual product purchased. I wou ...

javascripthtmljquerycsswordpress

JQuery failing to display image within set timeframe

In my website, I have implemented a feature that displays data from a database using auto-scrolling. As the user scrolls down the page, an AJAX function is triggered to fetch the next set of records from the database and append them to the existing content ...

jqueryhtmlajaxsettimeoutautoscroll

Manipulating text alignment and positioning in CSS

Can someone help me achieve this CSS result? img1 This is what I have so far: img2 I'm struggling to center the elements and add a line in CSS. Any advice? I thought about using margin: auto, but I'm not sure if that's the best approach ...

css

Issue arises when the logo and navigation menu overlap upon zooming in

I'm facing a couple of issues with the menu on my website that I can't seem to resolve. The code appears to be correct, but the problem arises when a user zooms in on the website, particularly on netbooks. The website logo and the navigation menu ...

csshtmloverlap

Text alongside a perfectly aligned image

I'm facing a dilemma. I've been striving to replicate the layout of my training website blocks to look like this: http://prntscr.com/4cd4gm. However, aligning text and paragraphs has become an obstacle for me. Despite succeeding in aligning pictu ...

htmlcssimagetextalignment

Having trouble retrieving POST data with NodeJS/Express and an HTML form?

I have encountered an issue in my application where I am unable to extract the posted data from req after performing an action pointing to a nodejs endpoint. Despite successfully executing the action, when attempting to access the posted data from req, I a ...

javascripthtmlnode.jsexpress

When the onLeave event of fullPage.js is activated

I am struggling to implement two CSS events when transitioning between sections on a fullPage.js application. To see my current progress, you can view the following fiddle: http://jsfiddle.net/pingo_/67oe1jvn/2/ My objectives are as follows: To modify t ...

jquerycssfullpage.js

How to extract JSON data without HTML tags in Android Studio

i'm done with my android studio project. i have successfully stored data from wp-json. however, there seems to be an issue where I am getting the following: <p>আল্লামা আহমদ শফীর ইন্তেকালের পর ...

androidhtmljsonandroid-studioweb

Error: Syntax error detected. Unexpected blank space found. Expecting either "-" symbol, identifier, or variable

Error: Syntax error: unexpected '' (T_ENCAPSED_AND_WHITESPACE), expecting '-' or identifier (T_STRING) or variable (T_VARIABLE) or number (T_NUM_STRING) in C:\xampp\htdocs\Source Code\displaysalesdetailed.php on line ...

phphtmlcssbootstrap-4error-handling