Concealing text in multi-select option of Bootstrap when overflowing horizontally

I am attempting to create a multi-select feature with only one horizontal scroll bar using bootstrap. However, I do not want each option to have its own horizontal scrollbar.

When I choose the longest option (123456789012345678901234567890), only part of the text is highlighted. The rest of the text remains unselected and hidden by scrolling to the right. How can this be resolved?

<div class="row w-50">
<div class="col">
    <select multiple class="custom-select d-inline overflow-auto s1">
      <option>123456789012345678901234567890</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>123456789012345678901234567890</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>123456789012345678901234567890</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>

This is what I have tried so far: https://jsfiddle.net/sxb2tk97/

I have tested it in Chrome. However, when viewed in Safari, the horizontal scrollbar does not even appear. Is there a better solution that will work across all major browsers?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To address this issue, I came up with a workaround where I enclosed the select element in a scrollable container and removed the default styling applied by Bootstrap's select class. While this solution proved effective on Chrome, it did not work on Safari.

.s1 {
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  vertical-align: middle;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  -webkit-appearance: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfbfa0bfbfaabde1a5bc8ffee1fef9e1ff">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="row">
<div class="col-3 overflow-auto">
  <select multiple class="s1">
      <option>123456789012345678901234567890</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>123456789012345678901234567890</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>123456789012345678901234567890</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
</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

What is the best way to determine if an HTML element reaches the bottom of the browser window?

In this scenario, my div is intersecting the bottom of the page. How can I use JavaScript to determine if this element is intersecting with it or not? For example, if bottom:0px; should not be intersected. .fixed{ position:fixed; bottom:-10px; le ...

javascriptcss

The act of sorting an item in jQuery triggers a reordering of items

I am working with a collection of items that represent different layers within div elements. One of my goals is to ensure that when I rearrange these items, their corresponding div layers are also sorted accordingly. Here is the list of sortable items: & ...

javascriptjqueryhtmljquery-uijquery-ui-sortable

Styling the body element in Material UI: A guide to customizing the

I'm having trouble figuring out how to target the root elements using the ThemeProvider in Material UI. const theme = createMuiTheme({ palette: { background: { default: "#00000", backgroundColor : 'black', b ...

cssreactjsmaterial-uithemes

How can we ensure that pointer events return the same coordinates as touch events when the viewport is zoomed in?

I attempted to utilize pointer events (such as pointerdown) instead of using a combination of touch events (e.g. touchstart) and mouse events (e.g. mousedown) to determine the input event coordinates. var bodyElement = document.body; bodyElement.addEvent ...

javascripthtmlgoogle-chromemobilepointer-events

Ways to update the title of a Magento widget

I've added a widget to showcase new products on my Home page and it's displaying perfectly. However, I want to get rid of the title "New Product" that comes with it. This pesky little thing needs to go! https://i.sstatic.net/P0NeS.jpg I'm ...

cssmagentomagento-1.9

The issue with SVG icons: viewBox does not accurately scale the size

I have integrated Bootstrap with SVG icons from material.io at https://material.io/resources/icons/?style=baseline. However, I am facing an issue where the SVG icon does not scale up when I paste the code into my HTML page. Despite setting width="48" and h ...

twitter-bootstrapsvgresponsive-designmaterial-ui

Using Django templates to include JavaScript files stored in the static directory

I'm facing an issue: within addWorkout.html: {% extends "workout/base.html" %} {% block footer %} <script type="text/javascript" src="{% static js/addWorkout.js %}"></script> {% endblock %} within base.html: {% load static %} <!DOCT ...

javascriptpythonhtmldjango

Text in anchor vertically centered across browsers

Take a look at my JsFiddle project here: http://jsfiddle.net/JxXHE/ I want to ensure that the text in the menu items is perfectly centered vertically, with an 8px margin from the top and bottom in all browsers that are supported. The list of supported bro ...

css

What is the best way to access the inner html of every cell within a table row that I have selected?

I want to implement a feature on my website where users can click a "save" button on a specific row in a table and save the entire row's innerHtml onto another page as their favorite hiking trails. I've been trying to achieve this by adding clic ...

javascripthtml

What are the tips for aligning this button perfectly on the page, despite being centered in a computer's resolution?

Dealing with Responsive Design Hey there! I'm having an issue with my Bootstrap layout. I managed to center a button, but when I adjust the resolution or make it smaller, the button wraps and shifts to the right. Can anyone help me figure out what we ...

htmlcssbootstrap-5

Understanding the user's preference for text alignment and managing how the text is displayed in a text area (or text field) within a ReactJS application

My latest project is an app that features multiple text areas. Personally, I use the app with two languages - English and another language that is aligned to the right. However, the default setting has the text-areas aligning to the left. To change this ...

htmlcssreactjstext-align

Issue with nested tabs functionality within a pill tab panel in Bootstrap not functioning as expected

I'm facing a challenge with integrating tabs into a vertical pill tab panel in Bootstrap 4. Below is a brief code snippet: <html> <head> <link href="bootstrap.min.css" rel="stylesheet"> </head> <body> <script ...

htmlcsstabsbootstrap-4nav-pills

Access a different tab through the utilization of JavaScript functions

Hi everyone, I recently created tabs using bootstrap, but I am facing a challenge with a specific scenario. I need the active tab to switch to another tab when a submit button is clicked. <div id="checkout-progress"> <ul class="nav nav-tabs"& ...

javascriptjquerytwitter-bootstrap

Tips for customizing the border radius style of the menu in Vuetify's v-autocomplete component

I am looking to customize the appearance of the drop-down list in the v-autocomplete component by adding a border-radius style, as depicted in the image below. The current design I have achieved closely resembles the visual shown below. Previously, I app ...

javascriptcssvue.jsvuetify.jsv-autocomplete

"An issue has been identified where the ui.bootstrap.accordion component is not functioning correctly

I struggled to implement the accordion feature from https://angular-ui.github.io/bootstrap/#!#accordion. After countless attempts with bootstrap version 4.0.0, I switched to 3.0.0 and finally achieved the desired results. Version 4 displayed only a clickab ...

angularjstwitter-bootstrapangular-ui-bootstrapbootstrap-4angular-ui

What is the best way to convert HTML into a format where the nesting implied by header levels is made clear and explicit?

Every time I attempt web scraping, I encounter a recurring issue in different forms that I can't seem to overcome. Essentially, the problem lies in the structure of HTML which has a somewhat flat organization with implicit nesting. My goal is to make ...

pythonhtmljsonbeautifulsoup

How can I modify the font size of h1 and h2 elements in CSS?

I am currently working with a WordPress twenty eleven theme and I am trying to adjust the size of my headings. Specifically, when I enclose my headings in h1 and h2 tags like so: <h1>My h1 heading </h1> <h2> My h2 heading </h2> The ...

csswordpresshtml-heading

How to properly position a YouTube video frame in the center?

<section> <h3>Find out about us</h3> <p>British Airways Virtual is a leading virtual airline within the Infinite Flight community. Boasting a community of over 50 pilots, we offer a vibrant and engaging experience. Come and ...

htmlcssiframe

Running a shell script on a website should always be done in a single instance

When I use html/php to call a bash script on a website, I have multiple html-buttons that initiate the same script with different arguments. The issue arises when each button click opens a new instance of the script. Is there a way to somehow resume the r ...

phphtmlbashshell

The implementation of @font-face is failing to display on all currently used web browsers

Hey there, I could really use some help with getting @font-face to work properly. Despite trying numerous solutions, I still seem to be missing something. If anyone can spot what I'm doing wrong, please let me know! @font-face { font-family: " ...

htmlcssfontsfont-face