Issue with consistent search autocomplete feature in a stationary navigation bar using bootstrap technology

My issue is with the autocomplete box - I want it to have the same width as the entire search box. Something like this using Bootstrap's col-xs-11 class:

https://i.sstatic.net/npzhC.png

If I set the position to "relative," it looks like this (all stays inside the navbar):

https://i.sstatic.net/DIPBG.png

But when I set the autocomplete box position to fixed, it changes the width like this:

https://i.sstatic.net/77C8G.png

Here is my code:

<div id="buscqueda" class="navbar-search smallsearch col-sm-8 col-xs-11">
                    <div class="row"> 
                        <input class="navbar-input col-xs-10" type="" placeholder="Buscar productos" name=""> <button class="navbar-button col-xs-1"> <svg width="15px" height="15px">
                                <path d="M11.618 9.897l4.224 4.212c.092.09.1.23.02.312l-1.464 1.46c-.08.08-.222.072-.314-.02L9.868 11.66M6.486 10.9c-2.42 0-4.38-1.955-4.38-4.367 0-2.413 1.96-4.37 4.38-4.37s4.38 1.957 4.38 4.37c0 2.412-1.96 4.368-4.38 4.368m0-10.834C2.904.066 0 2.96 0 6.533 0 10.105 2.904 13 6.486 13s6.487-2.895 6.487-6.467c0-3.572-2.905-6.467-6.487-6.467 "></path>
                            </svg> </button> 
                        </div>
                        <div class="autocom-box row">
                            <li class="col-xs-11">producto 1</li>
                            <li class="col-xs-11">producto 2</li>
                            <li class="col-xs-11">producto 3</li>
                            <li class="col-xs-11">producto 4</li>
                            
                       </div>
                    
                </div>

And here is the CSS:

.autocom-box li{
  background-color: white;
  color: black;
  padding: 10px 20px;
  
}

.autocom-box{
  position: fixed;
  z-index: 9999;
  border-top: 1px solid black;
  box-shadow: 4px 4px 8px -1px black;
  
  
}

Answer №1

Could you please review the code below? We have made some changes to optimize it for your needs. Unnecessary bootstrap classes have been removed from the input, button, and li tags. Additionally, we adjusted the position: absolute; and width: 100%; properties in the .autocom-box class instead of using position fixed.

<!doctype html>

<html lang="en>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <style>
    main {
      padding: 15px;
      background: #000;
    }

    .navbar-search {
      position: relative;
      padding: 0px 15px;
    }

    .navbar-input {
      width: calc(100% - 80px);
    }

    .navbar-button {
      width: 75px;
    }

    .autocom-box ul {
      background: #fff;
    }

    .autocom-box li {
      background-color: white;
      color: black;
      padding: 10px 20px;

    }

    .autocom-box {
      position: absolute;
      z-index: 9999;
      border-top: 1px solid black;
      box-shadow: 4px 4px 8px -1px black;
      width: 100%;
    }
  </style>
</head>

<body>
  <main>
    <div id="buscqueda" class="navbar-search smallsearch">
      <div class="col-sm-8 col-xs-11">
        <div class="row">
          <input class="navbar-input" type="" placeholder="Search for products" name="">
          <button class="navbar-button"> <svg width="15px" height="15px">
              <path
                d="M11.618 9.897l4.224 4.212c.092.09.1.23.02.312l-1.464 1.46c-.08.08-.222.072-.314-.02L9.868 11.66M6.486 10.9c-2.42 0-4.38-1.955-4.38-4.367 0-2.413 1.96-4.37 4.38-4.37s4.38 1.957 4.38 4.37c0 2.412-1.96 4.368-4.38 4.368m0-10.834C2.904.066 0 2.96 0 6.533 0 10.105 2.904 13 6.486 13s6.487-2.895 6.487-6.467c0-3.572-2.905-6.467-6.487-6.467 ">
              </path>
            </svg> </button>
        </div>
        <div class="autocom-box row">
          <ul>
            <li>product 1</li>
            <li>product 2</li>
            <li>product 3</li>
            <li>product 4</li>
          </ul>
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
  </main>
</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

Challenges with KendoUI integration

In one of my web pages, I have a combination box and a checkbox. To enhance the functionality, I decided to utilize the KendoUI library. The combo box allows users to choose between two options - 0% and 100%. If the checkbox is selected, the combo box shou ...

Ways to determine the position of elements when they are centered using `margin:auto`

Is there a more efficient way to determine the position of an element that is centered using CSS margin:auto? Take a look at this fiddle: https://jsfiddle.net/vaxobasilidze/jhyfgusn/1/ If you click on the element with the red border, it should alert you ...

Prevent the bootstrap header in a table from scrolling by enclosing it in

I am encountering an issue with fixing the headers of multiple tables in a page within their dedicated divs. Despite trying various methods, I haven't been successful as the fixed header overflows the div. I want to confine it within the div. Additio ...

Submitting forms with Ajax without reloading the page can cause errors in Internet Explorer

Simply put: Upon clicking the login button in Firefox, Chrome, or Safari, the form is submitted correctly, running a validation via ajax and opening a new page. However, in Internet Explorer (version less than 9), the submission attempts to post to the c ...

Leveraging the power of CSS id selectors to customize the appearance of a Grid

In my current CSS file, I have defined two id selectors: #TableHead { font-family: Arial, Helvetica, sans-serif; font-size:11px; font-weight: bold; color: #000000; border-top-width: thin; border-top-style: solid; border-top-color: #A9AAAA; border-bottom-w ...

Learn how to dynamically update a user's profile picture in the navbar when clicked using Angular

When I have a navbar (see code below) and set *ngIf = "user", I attempt to display the user's avatar in the navbar but only see a placeholder. However, after refreshing the page, the user avatar appears. Therefore, I am curious about how I can refresh ...

Is there a syntax problem with the jQuery (this).next() statement that is causing it to not

Struggling with the implementation of a .next() selector. It seemed straightforward, but I must be missing something. Here's the current script that is not functioning as expected: $('.ITEM').hover(function (){ $(this).next('.ITEM ...

Unable to display a Google map within a webview when viewing a local HTML file

I am currently working with a local HTML file called basicmap.html that includes the following code: <!DOCTYPE html> <html> <head> </head> <body> <div id="map"></div> <script> ...

When refreshed using AJAX, all dataTable pages merge into a single unified page

I followed the instructions on this page: How to update an HTML table content without refreshing the page? After implementing it, I encountered an issue where the Client-Side dataTable gets destroyed upon refreshing. When I say destroyed, all the data ...

I'm curious about why I'm receiving the error "Unable to bind to 'ngFor' since it is not recognized as a property of 'li'. Can someone please explain why this is happening?

The issue is related to the *ngFor directive for nonvegfoodlist app.component.ts import { Component } from '@angular/core'; export class Menu { id : number; name :string; } const veg : Menu[] = [ { id:1 , name:'Rice'}, { id: ...

Tips for designing a fixed footer that remains visible at all times

I'm having trouble creating a sticky footer that stays visible regardless of how far the user scrolls on my page. I want it to look like the version on the left, but I'm getting something different on the right Here is the CSS I'm using: ...

What is the best approach to passing multiple variables to a JavaScript function in HTML/PHP?

Seeking help with calling a javascript function from PHP through embedded HTML code. Below is the script: <script> // THE FOLLOWING JAVASCRIPT FUNCTION REDIRECTS TO EDITUSER.PHP AND PASSES USERID VALUE. function startMaint(mo, yr){ ...

What is the best way to display content at a specific time using Angular?

Whenever a user searches something and no results are found, I display a message. However, when there is content to show, an error message pops up for about 3-4 seconds before disappearing and showing the search results. This is my HTML: <div> &l ...

A guide on accessing checkbox values using jQuery

What is the best way to utilize jQuery in order to retrieve the values of checked checkboxes and instantly input them into a textarea? For example: <html> <head> </head> <body> <div id="c_b"> <input type= ...

Hover over buttons for a Netflix-style effect

https://i.stack.imgur.com/7SxaL.gif Is there a way to create a hover effect similar to the one shown in the gif? Currently, I am able to zoom it on hover but how can I also incorporate buttons and other details when hovering over it? This is what I have ...

Breaking Long Strings into Multiple Lines Using React Material UI Typography

Currently, I am working with ReactJS and incorporating MaterialUI components library into my project. However, I have encountered a problem with the Typography component. When I input a long text, it overflows its container without breaking onto a new lin ...

jQuery Ajax Redirect Form

I am currently developing an HTML application with a form. Upon clicking the submit button, I initiate a server-side call using jquery.ajax(). However, when the server returns an exception, such as a Status Code 500, I need to display an error message on t ...

Aurelia TypeScript app experiencing compatibility issues with Safari version 7.1, runs smoothly on versions 8 onwards

Our team developed an application using the Aurelia framework that utilizes ES6 decorators. While the app works smoothly on Chrome, Firefox, and Safari versions 8 and above, it encounters difficulties on Safari 7.1. What steps should we take to resolve th ...

Make the child element's height 100% when the parent's width is not set

Having trouble implementing the height:100; property on hover in my portfolio section. I've tried several solutions from similar questions without success. Although it works with media queries, I believe there's a better way to achieve this but I ...

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