Collapsible menu causing inline form elements to shift downwards

I am struggling with my inline Bootstrap 5 form that includes a collapsible menu for advanced search. The issue I'm facing is that when I open the advanced search menu, it pushes down box 1 and 2 instead of neatly expanding below. I tried setting the .collapse class to position absolute, but then the layout gets messed up – the dropdown menu doesn't stretch to 100% width and box 1 and 2 sort of jump around when clicking on the advanced search. Viewing the snippet in full-page mode makes the problem more evident. Any assistance in resolving this would be greatly appreciated. I've been stuck on this form conundrum for quite some time!

.collapse{
  position: absolute;
  width: 1200px;
}

.search-form{

border:2px solid #000;

}
<Doctype html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86e4e9e9f2f5f2f4e7f6c6b3a8b6a8b4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<!--Search form-->

<div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-md-10 bg-white search-form ">      

      <form action="" class=" form-inline d-flex">

      <div class="row g-3 align-items-center">
  <div class="col-auto">
<a data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" class="advanced">
    Advance Search With Filters <i class="fa fa-angle-down"></i>
  </a><div class="collapse" id="collapseExample">
  <div class="card card-body">
      
     <div class="row">

        <div class="col-md-4">

            <input type="text" placeholder="Property ID" class="form-control">
            
        </div>


        <div class="col-md-4">

            <input type="text" class="form-control" placeholder="Search by MAP">
            
        </div>
         

         <div class="col-md-4">

            <input type="text" class="form-control" placeholder="Search by Country">
            
        </div>
         
     </div>

  </div>
</div>
  </div>
  <div class="col-md-3">
    <input type="password" id="inputPassword6" class="form-control" placeholder="box1" aria-describedby="passwordHelpInline">
  </div>
   <div class="col-md-3">
    <input type="password" id="inputPassword6" class="form-control" placeholder="box2" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-md-3">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

    </form>
  </div>          
  </div>
</div>

    <!-- Bootstrap5 JavaScript-->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54373b263114667a6d7a66">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8fede0e0fbfcfbfdeeffcfbaa1bfa1bd">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

</body>
</html>

htmlcssformsbootstrap-5

Answer №1

https://i.sstatic.net/hZBXq.pngHere is a code snippet that may help with your problem:

.search-form{
  position: absolute;
  border:2px solid #000;
  
}

.collapse {

  width: 100%;

}
<Doctype html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10727f7f64636462716050253e203e22">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<!--Search form-->

<div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-md-10 bg-white search-form ">      

      <form action="" class=" form-inline d-flex">

      <div class="row g-3 align-items-center">
  <div class="col-auto">
<a data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" class="advanced">
    Advance Search With Filters <i class="fa fa-angle-down"></i>
  </a><div class="collapse" id="collapseExample">
  <div class="card card-body">
      
     <div class="row">

        <div class="col-md-4">

            <input type="text" placeholder="Property ID" class="form-control">
            
        </div>


        <div class="col-md-4">

            <input type="text" class="form-control" placeholder="Search by MAP">
            
        </div>
         

         <div class="col-md-4">

            <input type="text" class="form-control" placeholder="Search by Country">
            
        </div>
         
     </div>

  </div>
</div>
  </div>
  <div class="col-md-3">
    <input type="password" id="inputPassword6" class="form-control" placeholder="box1" aria-describedby="passwordHelpInline">
  </div>
   <div class="col-md-3">
    <input type="password" id="inputPassword6" class="form-control" placeholder="box2" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-md-3">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

    </form>
  </div>          
  </div>
</div>

    <!-- Bootstrap5 JavaScript-->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e4d415c4b6e1c0017001c">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abc9c4c4dfd8dfd9cadbeb9e859b8599">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

</body>
</html>

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

What can I do to adjust the Navigation Item and Dropdown placement?

I've been working with Bootstrap dropdowns, but they're not aligning correctly for some reason. I've tried multiple solutions like updating my Bootstrap versions, but none of them seem to be working. Here is the code: <script src=" ...

htmlcssnavigationbootstrap-5

Adding a background color to the body of your PHP and HTML email template is a simple way to enhance

I am currently using a confirmation email template with a white background, but I want to change it to gray. However, I'm unsure how to update the PHP file containing the email function below: $headers = "From: " . stripslashes_deep( html_entity_deco ...

phphtmlcsshtml-email

I can spot the JavaScript dynamic dropdown feature displayed in the button as well

I am in the process of dynamically creating start and end time drop-down fields within my application. I have also incorporated a remove link for these fields. However, when navigating using the 'tab' key, I notice that the drop-down is appearing ...

javascriptjqueryhtml

Utilizing HTML and jQuery to load a dynamic URL within a div placeholder

I'm experiencing some difficulty with loading a custom URL. Essentially, the user will click on a series of navigation links that will dynamically load the relevant content in a tabbed bootstrap jumbotron. The navigation links vary based on data store ...

javascriptjqueryhtmldjangotwitter-bootstrap

Steps for creating a square button

Is it possible to create a square button on my website that still functions like a traditional button? I want the button to change appearance slightly when scrolled over. Currently, I have an example where the button is not clickable: http://jsfiddle.net ...

css

Overlaying content in a strategic and effective manner is key to maximizing

<div id="container"> <div>HEADER</div> <div>CONTENT</div> <div>FOOTER</div> <div><textarea></textarea></div> </div> <button>activate overlay</button> #cont ...

javascriptjqueryhtmlcss

Is there a way to showcase every published WordPress page in a drop-down menu?

I am having trouble displaying all the published pages within my WordPress site as a dropdown list. Here is the code I have attempted to use: <div class="header-right"> <?php $pages = get_pages(); $posts = get_pages(array( ...

phphtmldatabasewordpresswordpress-theming

Display duplicated options with Bootstrap selectpicker and organize them into optgroups

I have encountered an issue while trying to create a selectpicker using Bootstrap 5 with optgroups. The problem is that all option elements under each optgroup are identical and do not match the HTML structure I have defined in my file. This inconsistency ...

htmltwitter-bootstrapselectbootstrap-5

Guide on accessing a method from the parent controller in AngularJS using the child controller

One of the challenges I am facing with my AngularJs page is implementing tabs in the UI. Each tab is responsible for loading different sets of data, including a list of tasks for a user. Users can search for tasks on one tab and then click on a specific ta ...

htmlangularjs

Change the global type-selector class dominance

I have a variety of form pages in my application, all with text box elements that share the same global CSS rules like width (150px), font-family, and font-size. To streamline this, I created a global CSS type selector class for most text boxes. However, s ...

csscss-selectors

Click on the canvas to fill a specific area with JavaScript

My goal is to implement a JavaScript function that will shade specific areas of canvas drawings when clicked. Below is the code I have that draws a square inside a circle. <!DOCTYPE HTML> <html> <head> </head> <body&g ...

javascripthtmlcanvashtml5-canvas

SweetAlert html is not recognizing ng-app, but it functions correctly within the html body

When inserting a bootstrap table inside a SweetAlert, I encountered an issue where using ng-app or ng-repeat to populate data inside the table's rows did not call ng-app. However, when populating the table outside of the SweetAlert in the body, ng-app ...

javascripthtmlangularjssweetalertng-controller

Blend element in CSS

Is it possible to achieve something like the following using only CSS? h* + p { color: red; } Instead of h1 + p, h2+p... { color:red; } I haven't found a solution yet, any suggestions would be appreciated. Thank you! ...

htmlcsstags

Why do I see my footer displayed twice on the page?

<div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li> @Ajax.ActionLink("Imagenes List", "Images", "Home", new { page = 0 }, new AjaxOptions() ...

cssajaxasp.net-mvcrazor

What is the best way to adjust padding within a flexbox layout?

I am attempting to replicate the design of this webpage using HTML and CSS: https://i.sstatic.net/bFVmg.jpg But, I am struggling to adjust the padding for the box on the right side. Here is how my version looks currently: https://i.sstatic.net/WMwii.jpg ...

cssflexbox

Creating Bootstrap 5 Tabs with Previous and Next Buttons without the use of jQuery

I would like to implement Prev and Next buttons in bootstrap 5 tabs without relying on jQuery. I came across this post with a great solution, which I have provided below. However, I am struggling to replicate the same functionality using Javascript only, ...

javascripttabsbootstrap-5

Customizing div elements in various RMarkdown documents with a CSS file

I want to apply styling to divs in various RMarkdown files using a CSS file. However, I am encountering syntax issues when trying to use the external CSS file to style the div. Embedding the style tag within the rmarkdown body works as shown below: --- ti ...

htmlcssrr-markdown

The horizontal navigation bar will not extend the entire length of the page

I'm facing an issue with my horizontal navigation bar as it doesn't span the entire screen. I need help figuring out how to make it full-width. You can see what I mean here. Additionally, once the navigation bar spans the screen, I want the image ...

htmlcss

Using v-model with an input file is not supported

Is there a solution for not being able to use v-model in an input tag with type="file"? Here is an example of the HTML code causing this issue: <input v-model="imageReference" type="file" name="file"/> ...

javascripthtmlvue.js

Tips on positioning the button right next to the bootstrap container

I'm using Bootstrap and facing an issue with aligning a button next to the container in the center, as shown in the image. I know that placing the button inside the container can partially solve this problem, but I prefer not to do so because it will ...

bootstrap-4bootstrap-5