Having trouble with the overflow hidden feature in my Firefox browser

My Firefox browser is having issues with the overflow hidden property, whereas all other browsers are working fine.

select {
  overflow: hidden;
}
<select multiple="" size="20">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>

Firefox Output https://i.sstatic.net/HOtSv.png

Other browser Output https://i.sstatic.net/11rbg.png

css

Answer №1

When the content of an element is larger than its size, we use the overflow property to control its behavior.

In this scenario, the container is actually bigger than the content, so there is no overflowing happening.

If you wish to adjust the size of the select element to match the content, you can do so by setting the size of the select to equal the number of options available:

select {
  overflow: hidden;
}
<select multiple>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>

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

How to customize the footer in Vuetify's list, menu, and combobox components

I've been struggling to add a footer to the Vuetify components like lists, menus, and comboboxes. Despite trying numerous CSS solutions, I haven't found one that works. What I'm aiming for is to have a fixed bottom button visible at all tim ...

htmlcssvue.jsvuejs2vuetify.js

The right padding on an HTML table is not functioning properly when the table width is larger than

I am facing an issue with a table that has multiple columns. I want each column to have the same width, resulting in the total table width being wider than the page width. This is fine as it prompts the browser to display a horizontal scrollbar. However, d ...

htmlcsshtml-table

The transparency of the text in my navbar is glitching when I scroll down

I'm experiencing an issue with my navbar text becoming translucent when scrolling. How can I fix this problem? Check out the picture below for more details. ...

jqueryhtmlcssbootstrap-4

How to Align an Icon to the Right in a Bootstrap 4 Modal Title

I'm attempting to position two icons next to the close button within a Bootstrap 4 modal. Unfortunately, I am struggling to remove some unwanted margin-left that persists despite my best efforts. While inspecting the element, I was successful in achie ...

htmlcsstwitter-bootstrapbootstrap-4

Navigating through a Single Page Application (SPA) can be achieved without

Can the CSS (Level 4) @document rule handle URLs that have the # symbol or include query parameters? For those who are not familiar with this topic Currently, only Firefox supports this feature with the @-moz-document prefix. If other browsers start supp ...

javascripthtmlcssroutessingle-page-application

How to Customize Bootstrap Tooltip Size for Images

I'm currently working on customizing Bootstrap 4 tooltips to display images. <img src="myimage.png" data-toggle="tooltip" data-html="true" title=\'<img src="myimage.png" class="d-block">\'> To achieve this, I created ...

cssbootstrap-4twitter-bootstrap-tooltip

Content will be displayed below the background image

Help Needed: Content Going Over Background Image Hey there! I'm having a bit of trouble with my home page design. I have a full-width background image, but the content isn't displaying below it like I want it to. Instead, it's showing over ...

htmlcssflexbox

When rendering, HTML characters are not translated

My JavaScript code generates the following HTML structure: <div contenteditable="false" tabindex="0" class="ProseMirror"> <p> didn't project a significant increase</p> </div> When rendered in the browser, it shows the cha ...

htmlcssvue.jsprose-mirror

Issue with CSS3 box-shadow transitions failing specifically in Firefox

Can anyone explain why this transition works in Safari and Chrome (Webkit browsers), but not in Firefox (Mozilla)? a.lorem { width: 100px; padding: 20px; display: block; color: white; text-align: center; background: rgb(191,210,85) ...

csstransition

Is there a way in Jquery to remove a class?

I have created a code for a single page website where clicking on the toggle bar will display the 'ul' and clicking on one of the 'a' links will take me to the corresponding div. I want the toggle bar to automatically close back after c ...

jqueryhtmlcss

How can you insert text onto a page with restricted space?

As I work on my web page, I find myself restricted by a character limit of 10,000. This limitation is proving to be quite challenging for me. The tabs on the page I am editing are divided with div ID, and all my writing already takes up 80% of the charact ...

htmlcssembed

Ways to add extra dots to your listing style

Is there a CSS property or list style that can display an expanding list? For example: Order now for a discount! <ol style="list-style: none"> <li>* Available only for the first 12 months</li> <li>** Only for new customers ...

htmlcss

Adequate dynamic object arrangement

In my pursuit using JavaScript, I am striving to fit a group of objects of set sizes into a container with a specified horizontal width, all while preserving their approximate initial order. While whitespace is not a major concern, the goal is to keep it t ...

javascriptcsspackingtetris

Twitter Bootstrap navbar-collapse can be seen overlapping navbar-header section, causing a

I seem to be having a problem with the Twitter Bootstrap navbar-collapse element overlapping the navbar-header logo, 'the alpha', and causing the link to be unclickable. As shown in the image below, the alpha logo has an href link but is not cli ...

htmlcsstwitter-bootstrap

I am struggling to add a column in HTML for this specific layout. Can someone please provide me with guidance on how to proceed?

This is the code I have: <div class="container"> <div class="row"> <div class="col-md-4"> <img src="https://s21466.pcdn.co/wp-content/uploads/2018/02/Logo-FIVB-Liga-nacija-1.jpg" width="500" height="640"> </div ...

htmlcssbootstrap-4

Encountered an issue locating the stylesheet file 'css/style.css' that is supposed to be linked from the template. This error occurred when trying to integrate Bootstrap with Angular

<link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css"> <link rel="stylesheet" href="plugins/owl-carousel/owl.carousel.css"> <link rel="stylesheet" href="plugins/magnific-pop ...

cssangularangular2-bootstrapping

The combination of the card hover effect and the bootstrap modal creates complications

Hey there! I'm in the midst of crafting a webpage using Bootstrap and EJS. My aim is to craft a modal window that pops up when a specific button is clicked to display extra information, and upon clicking an X or "close" button, the modal should disapp ...

javascriptcssbootstrap-5

"Encountering an undefined index error while submitting data to a

thisBtn = $(this); parent = $(this).parent(); num = parent.data('num'); var id = parent.attr('id'); if(typeof num != 'number'){ num = 0; } $(this).attr('disabled', true); $.post('javas.php', {n ...

phpjqueryhtmlcssajax

The Navbar design in Bootstrap is not scaling properly with the background image, making

I am currently in the process of developing a Bootstrap 5 webpage based on a provided design, but I am encountering some challenges. Here is the design I am working from: https://i.sstatic.net/MsFzq.jpg Here is my current progress: https://i.sstatic.ne ...

cssbootstrap-5

I aim to align all the div elements to the right, except for the brand

I am working on customizing a navigation bar with links contained in a div tag. I would like to shift all the items to the right except for the navbar brand. My goal is to achieve a design similar to a PSD file, but I am encountering some issues with my co ...

htmlcssbootstrap-4