What is the best way to align a dropdown menu and a textbox on the same line

I have recently been working on a search bar that includes a Dropdown for Location and a Textbox for Search. Prior to implementing bootstrap, these elements were displayed in a single line. However, after applying bootstrap, they are now stacked vertically one below the other. I have tried adjusting various properties such as values, display, and position, but I can't seem to get them back in a single line. How can I solve this issue?

For reference, I have attached an image and the corresponding code below.

Image Link

.homewall
{
    height: 480px;
    max-width: 100%;
}

.logo
{
    font-size: 80px;
    color: red;
    position: absolute;
    top: 10%;
    background: white;
    width: 110px;
    height: 110px;
    margin-left: 50%;
    text-align: center;
    margin-right: 50%;
    border-radius: 50%;
}

.heading
{
    color: white;
    position: absolute;
    top: 35%;
    font-size: 36px;
    font-weight: normal;
    text-align: center;
    margin-left: 25%;  
}

.search
{
    position: absolute;
    top: 50%;
    left: 30%;
    text-align: center;
}

.locdd
{
    height: 60px;
    width: 245px;
    color: gray;
    border: none;
    font-size: 16px;
    margin: 21px;
}

.restInput
{
    height: 60px;
    width: 477px;
    color: gray;
    border: none;
    font-size: 16px;
    margin: 21px;
}

@media only screen and (max-width: 600px) 
{
    .restInput 
    {
      height: 40px;
      width: 245px;
      color: gray;
      border: none;
      font-size: 16px;  
      opacity: 0.7;
      float: left;
    }

    .homewall
    {
        max-width: 100%;
    }

    .logo 
    {
      text-align: center;
      font-size: 80px;
      color: red;
      background: white;
      width: 115px;
      height: 123px;
      border-radius: 50%;
      position: absolute;
      top: 10%;
      margin-left: 38%;
      margin-right: 40%;
    }

    .locdd 
    {
      position: relative;
      top: -238px;
      margin-left: 23.5%;
      margin-right: 20%;
      text-align: center;
    }
}
<div class="container-fluid" style="padding: 0;">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<img class="homewall" src="#" height="50%" width="100%"/>
<div class="logo">
Logo   
</div>
<div class="heading">
Find the best Restaurants, Cafes and Bars
</div>  
<div class="search">
<select class="locdd">
<option>Select Location</option>
<option value="Mum">Mumbai</option>
<option value="Del">Delhi</option>
<option value="Bglr">Bangalore</option>
</select>
<div style="position: relative;">   
<span class="glyphicon glyphicon-search" style="position: absolute; font-size: 2rem; top: 40px; left: 35px"></span>
<input class="restInput" type="text" placeholder="Enter Restaurant or Food" style="padding-left: 50px;"/>
</div>
</div> 
</div>
</div>
</div>

htmlcssbootstrap-4

Answer №1

To ensure that both elements start from the same position on the left side, you should remove the center alignment applied to the .search class. It's also best to avoid using fixed position values as they may not display properly across different screen sizes. By removing the alignment from the container, both elements will align horizontally at the same starting point if that is your intention.

.homewall
{
    height: 480px;
    max-width: 100%;
}

.logo
{
    font-size: 80px;
    color: red;
    position: absolute;
    top: 10%;
    background: white;
    width: 110px;
    height: 110px;
    margin-left: 50%;
    text-align: center;
    margin-right: 50%;
    border-radius: 50%;
}

.heading
{
    color: white;
    position: absolute;
    top: 35%;
    font-size: 36px;
    font-weight: normal;
    text-align: center;
    margin-left: 25%;  
}

.search
{
    position: absolute;
    top: 50%;
    left: 30%;
}
// More CSS code here...


// HTML code snippet to showcase the design
...

Answer №2

Enclose the select button and search box in a div and apply display: flex to the wrapper.

.homewall {
    height: 480px;
    max-width: 100%;
}

.banner-row {
    position: relative; /* add position: relative to the parent of banner-text */
}

/* New class added */

.banner-text { 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.logo {
    font-size: 50px;
    color: red;
    background: white;
    width: 110px;
    margin: 0 auto;
    height: 110px;
    display: flex; /* center logo horizontally and vertically */
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50%;
}

.heading {
    color: white;
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: normal;
    text-align: center; 
}

.search {
    display: flex; /* set dropdown and searchbox in one line */
    text-align: center;
}

.locdd {
    height: 60px;
    width: 245px;
    border-radius: 5px 0 0 5px;
    color: gray;
    border: none;
    font-size: 16px;
}

.restInput {
    height: 60px;
    width: 477px;
    color: gray;
    border: none;
    font-size: 16px;
    border-radius: 0 5px 5px 0;
}

@media only screen and (max-width: 600px) 
{
    .restInput {
        height: 50px;
        width: 245px;
        color: gray;
        border: none;
        font-size: 16px;
    }

    .homewall {
        max-width: 100%;
    }

    .logo {
        text-align: center;
        font-size: 80px;
        color: red;
        background: white;
        width: 110px;
        height: 110px;
        border-radius: 50%;
    }

    .locdd {
        height: 50px;
        width: 100px;
        text-align: center;
    }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container-fluid" style="padding: 0;">
        <div class="row banner-row">
            <div class="col-sm-12 col-md-12 col-lg-12">
                <img class="homewall" src="#" height="50%" width="100%"/>
                <div class="banner-text">
                    <div class="logo">
                        Logo   
                    </div>
                    <div class="heading">
                        Find the best Restaurants, Cafes and Bars
                    </div>  
                    <div class="search">
                        <select class="locdd ">
                            <option>Select Location</option>
                            <option value="Mum">Mumbai</option>
                            <option value="Del">Delhi</option>
                            <option value="Bglr">Bangalore</option>
                        </select>
                        <div style="position: relative; border-left: 1px solid #ccc;">   
                            <span class="glyphicon glyphicon-search" style="position: absolute; font-size: 2rem; top: 50%; left: 15px; transform: translateY(-50%);"></span>
                            <input class="restInput" type="text" placeholder="Enter Restaurant or Food" style="padding-left: 50px;"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </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

Guidelines for placing an HTML element in relation to another HTML element using CSS or JavaScript

Is there a way to position an HTML element in relation to another using CSS or JavaScript? I have attempted to copy the inner HTML of the "second-element" and append it inside the "first-element", but this approach is causing issues with other functional ...

javascripthtmlcsspositioncss-position

Guide to implementing proportional height for an element using JQuery 3.3.1

I am currently working on dynamically setting the heights of elements with a specific class using JQuery in order to achieve a 16:10 ratio based on their width. However, I'm encountering an issue where the height doesn't seem to be applied and re ...

jquerycss

A guide on rotating loaders and inserting custom text within loaders using CSS

Seeking assistance to modify my code for creating a unique loader design. The inner loader needs to remain static with only top and bottom segments, while the middle loader rotates anti-clockwise and the outer loader rotates clockwise. Additionally, the ...

htmlcss

The Javascript function call from the <img src="myFunction()"> is malfunctioning

I am looking to dynamically pass the URL of an image using a JavaScript function. <head> <script> function myFunction() { var str1 = "somepictureurl.png"; return str1; } </script> </head> <body> <img src="myFu ...

javascripthtmljsp

Styling text of various sizes to appear together in a div container

I'm having trouble getting my text to align in a single line. I've tried using vertical-align: middle and vertical-align: bottom... Can someone please assist me? http://jsfiddle.net/2wDEw/ Here is a simple example of what I have: ...

htmlcss

Saving Data in an Angular Material Table: A How-to Guide

I have a basic angular material table and I am looking for a way to save the data displayed in each row when a button is clicked. Is it possible to save each row of data as an object and push it to an array? If so, how can I achieve this? <div class=& ...

javascripthtmlangulartypescriptangular-material

What is the best way to implement dragging functionality for an image within a specific area?

Here's a snippet of the code I'm working with: link This is the HTML code: <div class="border"> <div id="i-choose"> <input type="file" name="file" id="file" class="inputfile"> <label for="file"& ...

htmlcssdrag-and-drop

Firefox experiencing issues with overflowing HTML content

I am facing an issue with a table inside a div container where the content exceeds the container size. Interestingly, in Internet Explorer, the parent containers automatically expand to fit the table content. However, in Firefox, the div container only w ...

htmlcssfirefoxoverflow

The error message is causing all blocks to change width. What steps can be taken to correct this issue

When the error message pops up, it causes the login form width to change. A shorter message makes it narrow while a longer message widens it. How can this be resolved without setting a fixed width? I am using FormHelperText element to show the error messa ...

htmlcssmaterial-ui

Exploring the contrast between a hidden element and an element positioned outside the viewport through Selenium testing

When a selenium element is disabled by the ng-show attribute being false, it will have the values Displayed=false and Enabled=true. However, if a selenium element is enabled with the ng-show attribute set to true but is out of the viewport, it will also ha ...

c#htmlseleniumgoogle-chrome

Tips for customizing the blinking cursor in a textarea

I am experimenting with creating a unique effect on my website. I have incorporated a textarea with transparent text overlaying a pre element that displays the typed text dynamically using JavaScript. This creates an illusion of the user typing in real-tim ...

javascriptjqueryhtmlcsstextarea

Is it possible to utilize JavaScript to access a .php file located in a separate directory?

Although I have been searching all day, I couldn't find a workout that specifically addresses my issue. I'm new to JavaScript and AJAX. Currently, I am exploring a web app called calendar.php located in the directory C:\xampp\htdocs&bs ...

javascriptphphtmlajaxlocalhost

What are some strategies for ensuring that Plotly JS can adapt its height and width to fit the entire div dynamically, without relying on fixed pixel dimensions?

Is there a way to ensure that Plotly automatically adjusts to the size of the container #myDiv without any noticeable delay when the top button is clicked? This code snippet demonstrates a high delay: var z = [], steps = [], i; for (i = 0; i < 500; i+ ...

javascripthtmlcssplotlyplotly.js

Using the clip-path property to determine the content padding within a div

I am encountering an obstacle while attempting to insert icons into a polygon-shaped div. The problem lies with the padding, as the icons get cut off by the borders of the polygon. #container { width: 200px; height: 200px; border: 2px solid blac ...

htmlcss

Guide to placing an image below a <div> using HTML?

Before diving into the creation of my website, I took the time to draft a wireframe using Balasmiq. You can take a look at the wireframe here. Upon reviewing the wireframe, you'll notice that the first section bears a semblance to this layout: https:/ ...

htmlcssbootstrap-4

Updating the titles of Bootstrap 4 Switches on the fly

Currently utilizing Bootstrap 4 Toggle on my website, I'm struggling to figure out how to dynamically modify the labels on the toggles at runtime. My objective is to implement a toggle-switch that, once activated, displays a countdown indicating the ...

javascripthtmljquerybootstrap-4

row-1 css classes on the top in a project built with Blazor

I'm currently working on customizing the standard layout provided in Blazor projects like WASM or server, but I'm a bit perplexed by the top-row px-4 css classes. Within the HTML code that appears to define the top row/header section is this sni ...

csstwitter-bootstrapblazorbootstrap-5

What is the best way to use selenium to extract all p-tags and their corresponding h2-tags?

I am looking to retrieve the title and content from an article: <h2><span>Title1</span></h2> <p>text I want</p> <p>text I want</p> <h2><span>Title2</span></h2> <p>text I want< ...

pythonhtmlseleniumweb-scraping

This issue with ng-include not functioning properly in Chrome but working fine in Firefox

My code is running only in Firefox and not working in Chrome. HTML Code <div ng-controller="myController1"> Select View: <select ng-model="employeeview"> <option value="1.html">1</option> < ...

javascripthtmlangularjs

Using jQuery to submit data via POST method without having the page reload

I have a link in the footer that, when clicked, jumps to the header with a # in the address bar. Is there a way to prevent this and stay in the footer? Here is the code snippet: <a href="#" class="clickIn" id="1" attrIn="Like"><span style="color ...

javascriptjquerycssajax