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)?

javascriptjqueryhtmlcss

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

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.

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 significance of z-index in relation to relative and absolute positioning?

Is there an issue with z-index when working with a div that has absolute position relative to another div? I am trying to place the absolute div below the other one, but it always appears on top. How can I resolve this problem? ...

css

Unable to upload a file to an email using the mandrillapp JSON API

Having trouble sending an email with an attached document via the Mandrillapp JSON API using the method send-template in JavaScript. The email sends successfully, including images attached to the images array. However, documents sent in the attachements ar ...

javascriptjsonemailmandrill

Adjusting the height of a GAS iframe in WordPress with iframe-resizer: A step-by-step guide

I would like to embed an iframe of my Google Application Script Web into my WordPress site without the scroll bar. Refer to the image below for context. https://i.stack.imgur.com/7L6Tw.png I encountered an error message while attempting to use the iframe ...

javascripthtmlgoogle-apps-scriptiframeiframe-resizer

Introducing a novel class designed to leverage the attributes of another class

Is there a way to use the @extend feature in CSS to inherit properties from one class to another? Imagine having two CSS files loading on a page in this order: <link rel="stylesheet" href="/css/one.css" media="screen"> <link rel="stylesheet" href ...

css

How come when you add ({}+{}) it equals to "[object Object][object Object]"?

I ran the following code: {}+{} = NaN; ({}+{}) = "[object Object][object Object]"; What is the reason behind the difference in result when adding ()? ...

javascripthtmlnode.js

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

I'm encountering an issue related to a Wordpress plugin called PDF Embedder, as well as concatenating/using a string with document.write. My goal is to make this code work: <script src="http://nooze.org/wp-content/uploads/scripts/dateGetter.js"> ...

javascriptphphtmlwordpresspdf

How can a variable value be implemented in HTML style within Jinjia2?

Wondering how to dynamically position a small image on a web page based on a variable value? For instance, if the v_position variable is set at 50, you want the image to be centered horizontally. And if it's set at 100, the image should display at the ...

csshtmljinja2templating

"Unlocking the Power of mediaElementjs: Easy Steps to Accessing the Player Instance

I'm facing a small issue with the MediaElement.js player. To access the player instance, I usually use the following code (which works in HTML5 compatible browsers): // Retrieve player this.playerId = $('div#shotlist-player video').att ...

javascriptjqueryhtmlhtml5-videomediaelement

Best practices for alerting using React and Redux

As I delve into Redux for the first time and work on revamping a fairly intricate ReactJS application using Redux, I've decided to create a "feature" for handling notifications. This feature will involve managing a slice of state with various properti ...

javascriptreactjsreduxredux-thunkreact-toolbox

Select a specific division element using a pseudo element

My goal is to specifically target the third div in my HTML code with a class called .counter-wrap. When viewed on a mobile device, this particular div has a margin-bottom of 40px. I am looking to eliminate the margin-bottom for only the third stacked div n ...

htmlcsscss-selectorsflexbox

Adjusting the waterlevel model attribute to its standard value

In my Sails.js project, I am looking to reset a model attribute back to its original default value. By default value, I mean the value specified using defaultsTo in the model file. I have attempted methods such as: model.update({id:exampleId}, {myAttrib ...

javascriptnode.jsexpresssails.jswaterline

Can you guide me on implementing AWS SDK interfaces in TypeScript?

Attempting to create an SES TypeScript client using AWS definitions file downloaded from this link My approach so far: /// <reference path="../typings/aws-sdk.d.ts" /> var AWS = require('aws-sdk'); var ses:SES = new AWS.SES(); The error ...

javascriptamazon-web-servicestypescript

Displaying the loading image only on the first result within a while loop

When a submit button is clicked on any result, the loading image below the button displays only for the first result in the while loop. For example, if I click the submit button on the first result, the loading image shows below it. However, when I click t ...

javascriptphpjqueryhtmlajax

Having trouble getting npm install to add any libraries? Wondering how to fix this issue?

Currently, I am using Node version 14.15.5, npm version 6.14.11, and working on VS Code. I attempted to install two packages with the following commands: npm install express npm install lodash Unfortunately, neither installation was successful. This ...

javascriptnode.jsnpmnode-modulesnpm-install

How can AngularJS handle sorting based on the start date and end date?

Is there a way to filter the items by Start and End Date, based on the invoice_date, using the date range functionality in a meanjs app? I am facing an issue where the date filter functions work perfectly in Plunker and my localHost production environm ...

htmlangularjsmeanjs

Having issues with @react-three/drei in next.js environment

Having trouble using drei materials and other features like MeshWobbleMaterial, MeshDistortMaterial, or ContactShadows? You may encounter errors such as: react-three-fiber.esm.js:1383 Uncaught TypeError: Cannot read property 'getState' of null a ...

javascriptreactjsthree.jsnext.jsreact-three-fiber

Using arrow keys and return to effortlessly navigate through text input fields

Currently, I am working on developing a jQuery-based navigation system for switching between multiple input fields. The first part of the code is functioning correctly, allowing users to navigate downwards using either the down arrow or the return key. H ...

javascriptjquery

What sets 'babel-plugin-module-resolver' apart from 'tsconfig-paths'?

After coming across a SSR demo (React+typescript+Next.js) that utilizes two plugins, I found myself wondering why exactly it needs both of them. In my opinion, these two plugins seem to serve the same purpose. Can anyone provide insight as to why this is? ...

javascriptreactjstypescriptbabeljsnext.js

Can HTML tags be utilized in swipeable pages?

Currently, I am developing an Android app that incorporates swipe screen functionality. To achieve this, I followed a tutorial which can be found at the following link: http://developer.android.com/training/animation/screen-slide.html#fragment My goal is ...

androidhtmlandroid-fragmentsandroid-viewpager

Problems with CSS text scrolling

We have a client who wants a marquee-style scrolling text banner, and I tried using CSS animations to achieve it. However, I encountered some quirks that I'm struggling to fix. If you want to take a look at the issue, here is the link: https://jsfidd ...

htmlcsscss-animationskeyframe