Highlighting entire item in multiple select causing issues in Bootstrap 4 when overflowing

Currently facing an issue with how Bootstrap 4's form-control displays a selected item on a multiple select element when it overflows.

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-3">
    <select multiple style="overflow-x: auto;" class="form-control">
      <option>asdf asdf asdf asdf asdf asdf asdf asdf</option>
      <option>123</option>
    </select>
  </div>
</div>

The issue arises when selecting the asdf... option, where only a part of the text is highlighted in blue and becomes unreadable when scrolling to view the rest due to a white text on a white background.

For more details, refer to this jsfiddle link

cssbootstrap-4

Answer №1

Although it may not be the most traditional method, one way to resolve this issue is by adjusting the display setting for the option tag

option{
  display: flex;
}

Answer №2

When applying overflow to the form-control, it is best to set overflow: auto; on the col-3 class, which wraps around the form-control. Additionally, make sure to explicitly include width: auto; for the form-control to ensure proper functionality.

Here is the revised CSS code:

.row {
  background: #f8f9fa;
  margin: 20px 0 0 20px;
}

.col-3 {
  overflow: auto;
}

.form-control {
  width: auto;
}

<div class="row">
  <div class="col-3">
    <select multiple class="form-control">
      <option>asdf asdf asdf asdf asdf asdf asdf asdf</option>
      <option>123</option>
    </select>
  </div>
</div>

You can view an example of this in action on JSFiddle.

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

Display the badge in Bootstrap only on smaller screens

My dashboard features a navigation bar built on MVC Razor and Bootstrap, showcasing labels and badges. <span class="btn btn-danger" style="pointer-events: none;">Alert<span class="badge badge-pill badge-default">@alerts</span></s ...

asp.net-mvcrazorbootstrap-4

struggling with creating a web page layout

I'm currently working on a layout where I want to display a sidebar on the left and the main dynamic content on the right. I have assigned col-sm-3 for the sidebar and the rest (col-sm-9) for the main content. However, I've encountered an issue w ...

bootstrap-4material-designfrontend

Flexbox transforms Safari's Horizontal Nav into a Vertical layout

Issue with Horizontal Navigation Bar Turning Vertical in Safari I've been using flexbox to adjust the spacing and size of the li elements as the browser window size changes. Everything works perfectly fine in Chrome and Firefox, but for some reason, i ...

htmlcsssafariflexbox

Customizing CSS in Blazor on mouseover with multiple displayed divs

@foreach (var item in RootOfJson.results) { <div class="card" @onmouseout="@OnMouseOut" @onmouseover="@OnMouseOver"> <img class="@Imgdisplay" <a href="/cdn-cgi/l/email-protection" class="__cf_email__" da ...

cssparametersblazorelementonmouseover

The registration form is experiencing difficulties establishing a connection with MySQL database

Hey there! So, I managed to successfully connect a Contact Form on my website to a MySQL database which is pretty awesome. However, hit a bit of a snag with my registration page where the code isn't cooperating. To verify the connection, I used this c ...

javascriptphphtmlmysqlcss

The appearance of online and local websites varies on a single screen and browser

My current dilemma revolves around the difference in appearance of my website when viewed locally versus online. Both versions are connected to the same git repository and use the same css file. Interestingly, I can view the page on both my local machine a ...

cssrenderingjsxnext.js

Create a stunning Bootstrap carousel that showcases images perfectly centered and automatically resized in both width and height to fit the Div container

Currently, I am working on integrating a Bootstrap carousel that features centred and auto-resized images. In the JSFiddle example provided (https://jsfiddle.net/koba1/mb94dgzu/6/), you will notice that the first image (a vertical one) stretches to fill th ...

htmlcssbootstrap-4

Is it possible to implement counters in CSS with Jquery?

I am trying to implement a specific style when an if statement is executed, but Jquery is encountering syntax issues and generating errors. Does anyone have a solution for escaping these errors so that I can still apply the desired styling? The problemati ...

jquerycss

The Bootstrap menu seamlessly extends beyond the edge of the screen

Whenever I try to zoom in on my page, the navigation bar doesn't collapse as expected. Instead, it overflows off the page. This issue persists when viewing the website on mobile devices in landscape mode. Although I am using the jQuery mmenu plugin, ...

htmlcssbootstrap-4mmenu

Create a minimalist Vue table design that enforces a maximum of 2 or 3 columns within

Is there a way to make my v-simple table with v-chips and v-badges align correctly in two or three column peer cell format? Here is the table for reference: https://i.sstatic.net/OFCyx.png Currently, I only have scoped styling applied: <style scoped> ...

javascriptcssvue.jshtml-tablevuetify.js

Is the form background color displaying correctly only in Internet Explorer 8?

Typically, I struggle with IE8, but in this situation it's the only browser that displays the form background color correctly. It's interesting how the CSS only works as intended in IE8, while Firefox and Safari don't show any background col ...

htmlcss

Ensuring an image fits perfectly within a div that spans 100% width using CSS

I'm brand new to CSS and could use some guidance Here's the issue: I have a 1600 pixel wide image and a div that is 100% wide. Is there a method to adjust the image so it fits within the div, eliminating any horizontal scroll bars and cutting o ...

htmlcssimagewidth

What is an alternative method for creating a line break within an anchor tag without utilizing "<br />" or setting the display to "block"?

Creating a website on WordPress and I'm looking to have the "Read more" button placed on the second line, but without using or setting it to display:block. ...

csswordpressline-breaks

CSS: Stack elements vertically based on their height (column-wise)

Looking for some help with designing a menu where the list items float in columns instead of rows. For example, This is how my current menu looks like: I want to change the layout to look like this: My code for the list items is as follows: .mnu-third ...

htmlcss

Steps icons in the MUI Stepper component can be adjusted to remove the space between line connectors

I'm running into an issue while attempting to build a Stepper component using MUI V5. The problem I am facing is the presence of a gap between the icons and the line connectors. Here's what my current setup looks like: https://i.sstatic.net/UoMs ...

cssreactjsmaterial-uiflexboxstyled-components

"Selecting elements with CSS using the 'element'

While exploring some websites for studying purposes, I came across this code snippet. .site-header .widget-area span.but As a beginner in CSS, I'm curious to know more about the span.but part. Is it similar to the :not pseudo selector? ...

csscss-selectors

Using Angular ngClass with a conditional statement

Incorporating data from a JSON file instead of a database, my goal is to assign a color to the icon based on the status value in the JSON. For instance, [if green? class1:class2]. Here is the code snippet I am working with: My HTML file <ng-containe ...

htmlcssangular

Modifying the attributes/properties within a class of a bootstrap button

Here is the code that I have: <b-button id="search-button" size="md" class="mt-1 w-100" type="submit" @click="someEvent()" >Example </b-button If we imagine calling someEvent() and wanting to modi ...

javascriptcssvue.jsbootstrap-4bootstrap-vue

Tips for implementing vertical scrolling in a Windows 8 app when in snapped view

Currently, I am developing a Windows 8 application using Html, CSS, and JavaScript. Upon entering snapped view, certain screens are unable to display the entire content, leading me to seek a solution for vertical scrolling. Is there a way to address this ...

javascripthtmlcssmicrosoft-metrovertical-scrolling

Responsive navigation bar elements adjust to the width of the content

Currently, I am in the process of upgrading to bootstrap 4 but have encountered some challenges. One issue I am facing is with my navbar. It currently appears like this: https://i.sstatic.net/5a4Et.png The problem lies in the fact that the right navbar-c ...

htmlcssbootstrap-4