How can I create an HTML select dropdown menu with a maximum height of 100% and a dynamic size?

Question

How can I create an HTML select dropdown menu with a maximum height of 100% and a dynamic size?

The dropdown menu I created using an HTML select tag contains a total of 152 options. However, the large number of options causes some of them to be out of view on most monitors when the size is set to 152. I attempted to limit the number of displayed options by setting the max-height of the select to 100%, believing that it would restrict the size to fit within the div. Despite my efforts, all 152 options are still being shown, with some extending beyond the visible screen.

<select name="school" size="152"  style="max-height: 100%;">
...
</select>

I am wondering if there are ways to make select tags display as many options as possible on the screen (with 100% height), while also enabling scrolling to access any options below the screen (exceeding 100% height)?

javascript jquery html css

Answer 1

Answer №1

By targeting browsers that are IE9 or newer, you have the option to utilize viewport units (vh) to ensure that a select element always matches the height of the viewport. Here is the CSS code to achieve this:

select {
    display: inline-block;
    height: 100vh;
}

To ensure compatibility with older browsers, you must also include a size attribute with a minimum value of 2 on the select element itself. While older browsers will not support the 100vh value and default to their standard height, modern browsers will adhere to the specified height.

The only downside is that the select list will always match the screen's height and won't dynamically adjust if the content is limited.

You can see a demonstration of this in action here.

Answer 2

By targeting browsers that are IE9 or newer, you have the option to utilize viewport units (vh) to ensure that a select element always matches the height of the viewport. Here is the CSS code to achieve this:

select {
    display: inline-block;
    height: 100vh;
}

To ensure compatibility with older browsers, you must also include a size attribute with a minimum value of 2 on the select element itself. While older browsers will not support the 100vh value and default to their standard height, modern browsers will adhere to the specified height.

The only downside is that the select list will always match the screen's height and won't dynamically adjust if the content is limited.

You can see a demonstration of this in action here.

Answer 3

Answer №2

In my opinion, it would be challenging to achieve this without using a jQuery replacement plugin. After testing on Firefox and Safari, I found that Firefox sets a height on the opened list while Safari automatically scrolls to the bottom of the browser window.

If you're looking for a solution, I recommend trying out Chosen.js. It's an excellent tool that allows you to style your dropdown lists easily. You can find more information and download it from here: . It even offers search options and other useful features.

Answer 4

In my opinion, it would be challenging to achieve this without using a jQuery replacement plugin. After testing on Firefox and Safari, I found that Firefox sets a height on the opened list while Safari automatically scrolls to the bottom of the browser window.

If you're looking for a solution, I recommend trying out Chosen.js. It's an excellent tool that allows you to style your dropdown lists easily. You can find more information and download it from here: . It even offers search options and other useful features.

How can I create an HTML select dropdown menu with a maximum height of 100% and a dynamic size?

Answer №1

Answer №2

Similar questions

Add a library to a server with npm installation

Issue with jqGrid when filtering small numerical values

A guide on uploading a photo to an existing mySQL database using a form

Using React js to transform objects into arrays for useState

What is the best way to display an HTML page in the bottom right corner instead of within a div?

How do you manage dependencies for nested components within Angular2?

Allowing horizontal scrolling in a table cell set to full width

Leveraging strings as URLs to embed PDFs in Wordpress using PDF Embedder

Best method for extracting object values from an array in Javascript using loops?

Aligning a row with space between columns

What is the best way to send and configure GET information when the characters in a URI surpass 5,000?

Choose a specific 24-hour range with the Date Interval Selector

Author Names Missing from Book List in Locallibrary Tutorial

The mistake in npm install is when the console logs a bug that is notorious for causing npm to malfunction

What causes this statement to consistently be incorrect?

Error: The property 'combine' of 'winston_1.default.format' cannot be destructured since it is not defined

What is the best approach to breaking down attributes upon import according to the theme?

Is it possible to extract content from a remote website by utilizing javascript and iframe?

Change the background color of a MUI ToggleButton based on a dynamic selection

UI-Bootstrap selectively adds modal backdrop to specific elements