Overflow container list items in Bootstrap

How can I prevent the text in each item of this dropdown list from wrapping and display them in a single line?

.autocomplete-items {
    /* position: absolute; */
    /* border: 1px solid #ccc; */
    /* border-top: none; */
    /* border-radius: 0 0 4px 4px; */
    z-index: 100;
    top: 100%;
    left: 0;
    right: 0;
/*     width: auto; */
    max-height: 300px;
    overflow-y: auto;
    background-color: white;
    color: black;
}

.autocomplete-items .item {
    padding: 10px;
    cursor: pointer;
    background-color: white;
  width: auto;
  overflow:auto;
}

.autocomplete-items .item:hover {
    background-color: #eee;
}

.autocomplete-items .item.active {
    background-color: #e9e9e9;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27454848535453554657671209140914">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="w-100 h-100 py-3">
            <form action="/" method="post">
                <div>
                    <div class="row my-3">
                        <div class="col"><input type="text" name="FirstName" id="FirstName" max_length="25" placeholder="Firstname" class="form-control" required="yes" ></div>
                        <div class="col"><input type="text" name="LastName" id="LastName" max_length="25" placeholder="Lastname" class="form-control" required="yes" ></div>
                    </div>
                    <div class="row my-3">
                        <div class="col">
                        <select name="Country" id="Country" class="form-control, form-select" aria-label="Default select example">
                          <option value="US">United States</option>
                          <option value="GB">United Kingdom</option>
                        </select>
                    </div>
                        <div class="col position-relative"><input type="text" name="Place" id="Place" label=" Place" max_length="25" list="PlaceSelect" autocomplete="off" placeholder=" City" class="form-control" required="" spellcheck="false" data-ms-editor="true" >
                        
                            <div class="d-flex flex-column mb-3 position-absolute">
                                <ul class="autocomplete-items m-0 p-0 border" id="PlaceSelect" style="display: block;">
                                <li class="item">New York City, Long: -74.005970, Lati: 40.714270, TZ: America/New_York, Population: 8804190</li>
                                <li class="item">New South Memphis, Long: -90.056760, Lati: 35.086760, TZ: America/Chicago, Population: 641608</li>
                                <li class="item">New Orleans, Long: -90.075070, Lati: 29.954650, TZ: America/Chicago, Population: 389617</li>
                                <li class="item">Newark, Long: -74.172370, Lati: 40.735660, TZ: America/New_York, Population: 281944</li>
                                <li class="item">Newport News, Long: -76.429750, Lati: 36.980380, TZ: America/New_York, Population: 182385</li>
                                </ul>
                            </div>
                        </div>
                <div class="col "><input type="number" name="Population" label="Zipcode" id="Zipcode" max_length="25" step="0.000001" min="-180" max="180" placeholder="Zipcode" class="form-control" required="yes" ></div>
                        <div class="col"><input type="number" name="Cost" label="Cost" id="Cost" max_length="25" step="0.000001" min="-180" max="180" placeholder="Cost" class="form-control" required="yes" ></div>
                    </div>
                </div>
            </form>
        </div>

htmlcssbootstrap-5

Answer №1

To ensure text does not wrap, simply include white-space: nowrap; in your .item class declaration

.autocomplete-items {
  /* position: absolute; */
  /* border: 1px solid #ccc; */
  /* border-top: none; */
  /* border-radius: 0 0 4px 4px; */
  z-index: 100;
  top: 100%;
  left: 0;
  right: 0;
  /*     width: auto; */
  max-height: 300px;
  overflow-y: auto;
  background-color: white;
  color: black;
}

.autocomplete-items .item {
  padding: 10px;
  cursor: pointer;
  background-color: white;
  width: auto;
  overflow: auto;
  white-space: nowrap;
}

.autocomplete-items .item:hover {
  background-color: #eee;
}

.autocomplete-items .item.active {
  background-color: #e9e9e9;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8dad7d7cccbcccad9c8f88d968b968b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="w-100 h-100 py-3">
  <form action="/" method="post">
    <div>
      <div class="row my-3">
        <div class="col"><input type="text" name="FirstName" id="FirstName" max_length="25" placeholder="Firstname" class="form-control" required="yes"></div>
        <div class="col"><input type="text" name="LastName" id="LastName" max_length="25" placeholder="Lastname" class="form-control" required="yes"></div>
      </div>
      <div class="row my-3">
        <div class="col">
          <select name="Country" id="Country" class="form-control, form-select" aria-label="Default select example">
            <option value="US">United States</option>
            <option value="GB">United Kingdom</option>
          </select>
        </div>
        <div class="col position-relative"><input type="text" name="Place" id="Place" label=" Place" max_length="25" list="PlaceSelect" autocomplete="off" placeholder=" City" class="form-control" required="" spellcheck="false" data-ms-editor="true">

          <div class="d-flex flex-column mb-3 position-absolute">
            <ul class="autocomplete-items m-0 p-0 border" id="PlaceSelect" style="display: block;">
              <li class="item">New York City, Long: -74.005970, Lati: 40.714270, TZ: America/New_York, Population: 8804190</li>
              <li class="item">New South Memphis, Long: -90.056760, Lati: 35.086760, TZ: America/Chicago, Population: 641608</li>
              <li class="item">New Orleans, Long: -90.075070, Lati: 29.954650, TZ: America/Chicago, Population: 389617</li>
              <li class="item">Newark, Long: -74.172370, Lati: 40.735660, TZ: America/New_York, Population: 281944</li>
              <li class="item">Newport News, Long: -76.429750, Lati: 36.980380, TZ: America/New_York, Population: 182385</li>
            </ul>
          </div>
        </div>
        <div class="col "><input type="number" name="Population" label="Zipcode" id="Zipcode" max_length="25" step="0.000001" min="-180" max="180" placeholder="Zipcode" class="form-control" required="yes"></div>
        <div class="col"><input type="number" name="Cost" label="Cost" id="Cost" max_length="25" step="0.000001" min="-180" max="180" placeholder="Cost" class="form-control" required="yes"></div>
      </div>
    </div>
  </form>
</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

Discover the method to retrieve HTML content by sending an HTTP POST request in AngularJS, similar to loading content

My attempt to retrieve HTML content using Angular Js Post HTTP method was successful, but only for text contents like P tags. I am now trying to fetch HTML contents that include input types such as text boxes using Angular JS. Interestingly, when I utilize ...

javascriptjqueryhtmlangularjsajax

Navigating through the CSS menu located in the main directory

I am facing an issue with accessing my CSS menu in different directories. In my root directory, I have a CSS menu that I want to use in subdirectories as well. However, when I navigate to a subdirectory, I find it difficult to go back to the main directory ...

phphtmlcss

Issue with JQuery event handlers becoming unresponsive upon resizing the window

JSBin link: http://jsbin.com/4QLDC/6 Here is the JS code snippet that I have written: var toggleContent = function (event) { $(event.target).siblings().toggle(); }; var showOrHidePanels = function () { var windowHeight = $(window).height(); v ...

javascriptjqueryhtmlcss

Check if the input value was chosen by pressing Enter instead of clicking on it

There is an input tag with the following attributes: <input type="text" name="cOperator" class="form-control scale-input operator" placeholder="Enter your ID" autocomplete="off" onkeyup="ajax_showOptions(this,'getEmp',event)" required> ...

javascriptjqueryhtml

Displaying line breaks <br> on the browser when there are characters stored in the database

Within my mongo database, there is a document containing a field called reviewText: 'this is line 1\nthis is line 2',. This text was entered by a user in a textarea, hence the presence of \n to represent line breaks. I want to display t ...

javascripthtmlmongodbexpressejs

Trouble arises when trying to link IE7 with jQuery

I am currently testing a website with jQuery. There is a plugin that, when hovered over, slides down to reveal another banner, subsequently sliding the banner below it down as well. I have added a link on the bottom banner using z-index, and although it wo ...

jqueryhtmlajaxcss

Is there a way to identify the source of a div's scrolling behavior?

While working on a complex web page that involves multiple JQuery Dialogs and other widgets, I encountered a frustrating issue. Some of the dialogs contain divs with scrolling abilities (using overflow-y with a fixed height). Whenever I click on one dialog ...

javascripthtml

Attempting to conceal a div element along with its contents using AngularJS

I am attempting to use AngularJS to hide a div and its contents. I have defined a scope variable initialized as false and passed it to the div in order to hide it. However, the div is still visible along with its content. <script type="text/javascr ...

javascripthtmlangularjs

What is the best way to retrieve the content of a specific class in Selenium WebDriver?

Python Code : from selenium import webdriver from selenium.webdriver.chrome.options import Options options = webdriver.ChromeOptions() options.add_argument(r"--user-data-dir=C:\Users\bji\AppData\Local\Google\Chrome\ ...

htmlcssseleniumselenium-webdriver

Floating elements can be vertically aligned with spans

I am facing an issue with aligning three spans vertically inside a div. It seems simple to achieve, but vertical alignment is not working properly when I use float. My goal is to have the light blue bar vertically centered. Here is the code snippet: .co ...

htmlcsspositionalignmentvertical-alignment

Locate the checkbox label using CSS

Is there a way to replace the standard checkboxes with font-awesome icons without modifying the generated HTML or using jQuery? EDIT: The code includes JavaScript that prevents me from making changes. Also, note that the label text class can be -1 or -2 a ...

htmlcsscheckboxcss-selectors

Creating aesthetically pleasing and uniform rows of responsive Bootstrap 4 cards with consistent heights

I'm a beginner in the world of design and Bootstrap, so please be patient with me. My goal is to create a series of cards that have equal height and width (responsive, not fixed) in each row. In other words, I want all the cards to be as tall and wid ...

cssbootstrap-4

Responsive HTML grid with a distinct line separating each row

My challenge is to create a layout that features a grid of floating divs with horizontal lines under intermediate rows. The catch is that there should not be a line under the last row, and if there is only one row of elements, no line should be displayed. ...

htmlcsstwitter-bootstrapgrid-layout

I'm curious about the specific purpose of /1 in font styling at 16px

Can anyone explain the purpose of /1 in the font: 16px/1 style declaration? I removed the /1 from the code and noticed increased spacing between lines. What is the specific role of /1 in this situation? body { font: 16px/1 'Open Sans', sans ...

css

Incorporate descriptive text to my HTML slider

How do I customize my carousel to display unique titles or captions for each slide? Here is the code snippet provided: <h1>Incredibly Basic Slider</h1> <div id="slider"> <a href="#" class="control_next">>></a> < ...

htmlcss

What is the best way to eliminate <p><br></p> tags from a summernote value?

When I try to enter text into the summernote textarea for space, I keep getting this code: <p><br></p><p><br></p><p><strong style="font-family: &quot;Open Sans&quot;, Arial, sans-serif; text-align: just ...

htmlangularjssummernote

increasing the size of the drop-down menu width

I have been struggling to adjust the width of my dropdown list box on my page. Despite my efforts, I cannot seem to make it bigger. Here is the code snippet causing me trouble: <div class="form-group row"> <div class="col-sm-1&quo ...

cssasp.netbootstrap-4

What is preventing me from renaming a file in PHP when passed through jQuery?

Hello to all users! I've encountered an issue where I can't seem to change the file name in PHP that is being passed from jQuery: Here is the JavaScript code where I pass the file to the PHP handler: var url = '/temp.php'; var xhr = ...

javascriptphphtmljquery

Issue with AngularJS: Local storage not saving updated contenteditable data

My local storage implementation stops working when I attempt to incorporate contentEditable feature. Here is the link to the CodePen for reference: https://codepen.io/zanderbush/pen/WNwWbWe. Any assistance would be greatly appreciated. The functionality w ...

javascripthtmlangularjs

Mastering the Art of Absolute Positioning in HTML Tables' Header Row

I have a table with 80 rows. How can I make the first row fixed? I attempted to add position: fixed; to the but unfortunately, it didn't work. Is there a way to achieve this using CSS or jQuery? <table> <thead> <tr> <td sty ...

jquerycsshtml