The search bar extends beyond the dropdown in a boostrap collapse scenario

Currently, I'm facing two issues that I need assistance with:

  1. On smaller screens, the search bar drops out of the navbar collapse inexplicably, and I'm struggling to identify the cause.

  2. The width of the search bar seems to be overriden by Awesomplete.js or CSS, shifting it to the left side without a clear explanation.

If anyone is interested in taking a look, here's the jsfiddle link: https://jsfiddle.net/x4vusam1/

    .bg-steel {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#09c6f9+0,045de9+100 */
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e3b70+0,29539b+100 */
  background: purple;
}

.navbar-brand {
  color: white !important;
}

.btn {
  background-color: transparent !important;
}

.navbar-collapse {
  position: relative;
  padding-top: 20px !important;
  max-height: 400px;
}

.navbar-collapse form[role="search"] {
  position: absolute;
  right: 0;
  padding: 0;
  margin: 0;
  z-index: 9;
}

.navbar-collapse form[role="search"] button,
.navbar-collapse form[role="search"] input {
  padding: 8px 12px;
  border-width: 0;
  box-shadow: none;
  outline: none;
}

.navbar-collapse form[role="search"] input {
  padding: 16px 12px;
  font-size: 14pt;
  font-style: italic;
  color: rgb(160, 160, 160);
  box-shadow: none;
}

.navbar-collapse form[role="search"] button[type="reset"] {
  display: none;
}

@media (min-width: 768px) {
  .navbar-collapse {
    padding-top: 0 !important;
    padding-right: 38px !important;
  }
  .navbar-collapse form[role="search"] {
    width: 38px;
  }
  .navbar-collapse form[role="search"] input {
    font-size: 15pt;
    opacity: 0;
    display: none;
  }
  .navbar-collapse form[role="search"].active {
    width: 100% !important;
  }
  .navbar-collapse form[role="search"].active button,
  .navbar-collapse form[role="search"].active input {
    display: table-cell;
    opacity: 1;
  }
}




.awesomplete [hidden] {
    display: none;
}

.awesomplete .visually-hidden {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.awesomplete {
    display: inline-block;
    position: relative;
}

.awesomplete > input {
    display: block;
}  

Answer №1

I made some adjustments to your code:

  1. To align the search bar to the right in the navbar, you can remove position: absolute from
    .navbar-collapse form[role="search"]
    and add justify-content-end to the #navbarTogglerDemo02 element.
  2. Add the class justify-content-end to the input-group to position the search bar on the right side.

You can view the updated demo and fiddle here:

$(function() {
  // Your javascript code goes here
});

var aweInput = new Awesomplete(search);
// Additional js code here
.bg-steel {
  /* Custom CSS styles */
}

.navbar-brand {
  color: white !important;
}

/* Additional CSS rules go here */
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<!-- Add more external resources if needed -->

<nav class="navbar fixed-top navbar-light bg-steel navbar-expand-md" role="navigation">
  <div class="container">
    <!-- Navbar content -->
  </div>
</nav>

Answer №2

Extract your information from the format of class="d-flex"

// structure <form class="d-flex" role="search"> // eliminate the form
     <div class="input-group">
          // your data
     </div>             
//  </form>

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

Access specific data from a jQuery event

How can I retrieve the value of a custom attribute called itemID in order to include it in the URL just like I do with id? Here is the JavaScript code: <script type="text/javascript"> $(document).ready(function(){ $('.eventImage').cl ...

I can't get Toggleclass to switch classes properly, am I missing something?

I have been experimenting with creating a button that toggles a class and reveals another div below it. Feel free to check out the example on jsFiddle that I created for you. While the first function of showing and hiding the div is working perfectly, I ...

Ensuring contact form accuracy using jQuery and PHP

Can't seem to figure out why I am always getting false from the PHP file even though my contact form validation with jQuery and PHP is working fine. Let me explain with my code: Here is the HTML: <form method='post'> <label& ...

Applying CSS styles to my container through a button click event

Currently, I am attempting to apply a padding-top to my container when a button is clicked. Unfortunately, the padding-top is not being added as expected. $('#login').on('click', function(){ $('#loginform1').css('padd ...

What are the steps to recreate the layout of my image using HTML?

What's the best way to create a layout in HTML that expands to fit the entire screen? ...

Using AJAX and Jquery to stop the page from reloading when a button is clicked

I am currently working on a gridview that displays all transactions of a merchant, including pending, approved, and rejected transactions. The gridview is set up with template and includes two buttons. My goal is to prevent the page from reloading when one ...

Using jQuery to Retrieve the HTTP Status Code in the $.ajax.error Function

Currently, I am utilizing jQuery for an AJAX request. Depending on whether the HTTP status code indicates a 400 error or a 500 error, I wish to execute different actions. How can I go about achieving this? $.ajax({ type: 'POST', url: &ap ...

Adjust the background color within the border-radius of a designated element

I am currently working on adding a border radius to the bottom of my sections. The background color of my body is set to black. My goal is to have the color under each border-radius match the background-color of the next section, instead of the overall bod ...

What is the best way to determine the total number of rows that have been generated by the Asp:Repeater?

I'm looking for a way to retrieve the total number of rows generated by the repeater control using either Javascript or JQuery. Can anyone help me with this? ...

Difficulty in accurately identifying the current page on the appbar

I'm attempting to make the active page in my navbar stand out by giving it a white background color and skyblue text. However, for some reason, I can't get the text color to display as skyblue in the appbar. You can see how it currently looks in ...

jQuery AJAX Live Search Function Only Executes Once

Here is a code snippet for a live search functionality: <script> $(".search").keyup(function() { var Team_Name = $('#TeamName').val(); var Teacher = $('#Teacher').val(); var Searc ...

Invoke a CoffeeScript function within a jQuery function

Two files are causing me trouble: one is written in plain jQuery, and the other is a Coffeescript The jQuery file looks like this: $(document).ready(function(){ checkPrice(); }); In comparison, the CoffeeScript file appears as follows: $ -> c ...

Adjusting the width of an image in Safari

I just launched my website, but I encountered an issue with the image size in Safari. In my CSS, I set the width like this: img { width: 450%; } Here is the site: I can't figure out why the images display correctly in Chrome and Mozilla, but ...

Using jQuery to interact with a web service - overcoming cross-domain restrictions

Attempting to connect to a WCF service using a jQuery client. Referencing this specific example: http://www.codeproject.com/KB/aspnet/WCF_JQUERY_ASMX.aspx#4 Everything functions properly when the client webpage is on the same domain as the service. Howe ...

Use jquery or javascript to align a button to the center

Can the vote button be centered in the script below? <script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/6352993.js"></script> <noscript><a href="http://polldaddy.com/poll/6352993/">This is a le ...

My JSON file is being populated with duplicate data when making an AJAX post call

I encountered an issue while working on my project. I am trying to create a news article archive using node.js. I capture all the necessary data from a form and store it in a JSON file. Here is a simplified version of my form: <form id="json-form&q ...

Toggle sideBar within an iFrame by implementing Media Queries

I have implemented media queries in my code to hide the .sideBar when the screen resolution is less than 768px, showing only the .main section. @media (max-width: 768px) { .sideBar { display: none !important; } } Now, I want to add a ha ...

CSS and JavaScript issues causing compatibility errors with Internet Explorer

Recently, I've been working on a portfolio website just for fun, and I'm encountering compatibility issues specifically in Internet Explorer. Surprising, right? The issue seems to be stemming from the flipcard.css and flipcard.js files. While oth ...

Obtaining IP Address with Jquery or Phonegap: A Guide for Cross Platform Development

Is there a way to retrieve the IP address using Jquery or Phonegap? I am currently working on an application that is compatible with Android, iPhone, and Windows platforms. I'm in need of a solution to locate the IP address of a request. ...

Troubleshooting material design CSS problem in AngularJS routing module

Attempting to incorporate material design with routing in angular js, but encountering issues with CSS design not working. Interestingly, when using bootstrap CSS, it functions properly. Check out the Plnker Demo here However, upon trying this approach, ...