How do I ensure that a fieldset and a multiple selection box have equal heights using CSS?

Is there a way to make the multiple selection box the same height as the fieldset, without using JavaScript? I have a form with a fieldset and select box side by side, and any assistance would be appreciated.

<!DOCTYPE html>
<html lang="en>
<head>
    <meta charset=utf-8 />
    <title>Adjusting Heights</title>
    <style type="text/css">
        fieldset {
            width: 20em;
            float: left;
        }

        select {
            float: left;
        }
    </style>
</head>
<body>
    <fieldset>
        <legend></legend>
        <ol>
            <li><label for="Field1">Field 1</label><input id="Field1"></li>
            <li><label for="Field2">Field 2</label><input id="Field2"></li>
            <li><label for="Field3">Field 3</label><input id="Field3"></li>
            <li><label for="Field4">Field 4</label><input id="Field4"></li>
            <li><label for="Field5">Field 5</label><input id="Field5"></li>
            <li><label for="Field6">Field 6</label><input id="Field6"></li>
            <li><label for="Field7">Field 7</label><input id="Field7"></li>
            <li><label for="Field8">Field 8</label><input id="Field8"></li>
            <li><label for="Field9">Field 9</label><input id="Field9"></li>
            <li><label for="Field10">Field 10</label><input id="Field10"></li>
        </ol>
    </fieldset>

    <select multiple="multiple">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <option>Option 4</option>
        <option>Option 5</option>
        <option>Option 6</option>
        <option>Option 7</option>
        <option>Option 8</option>
        <option>Option 9</option>
        <option>Option 10</option>
        <option>Option 11</option>
        <option>Option 12</option>
        <option>Option 13</option>
        <option>Option 14</option>
        <option>Option 15</option>
        <option>Option 16</option>
        <option>Option 17</option>
        <option>Option 18</option>
        <option>Option 19</option>
        <option>Option 20</option>
    </select>
</body>
</html>

Answer №1

It seems like there may be some confusion regarding your question about the select box and scrolling.

If you're looking to prevent the options from scrolling and instead have them line up neatly with two options per field, I'm not entirely sure how to achieve that at the moment.

However, I can provide a more refined solution based on your original inquiry. This approach ensures that the select box maintains its relative height when resizing the text on the page:

li {
    height:2em;
    padding:0px;
    font-size:1em;
    line-height:2em;
    vertical-align:middle;
}

select {
    height:20em;
    font-size:1em;
}

If this solution doesn't meet your requirements, you could also consider styling the option element as needed:

option {
    padding:0;
    margin:0;
}

Feel free to check out the example provided in this JSFiddle link for further clarification: http://jsfiddle.net/xsPr6/1/

Answer №2

When styling a fieldset and select elements, set the height to 200 pixels.

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

Trigger a slide-down effect on a particular div element with jQuery when clicked

I'm struggling to remember how to make a specific div use jQuery slideDown on a click event. This is the code I have been working with: $('.content--link').on('click', function(e) { $(this).next('.content').slideTog ...

Attempting to create a single function that can be utilized with numerous divs that share the same class in jQuery

Currently, I am working on creating a basic jquery gallery viewer. In my code, I have the following structure: <div class="photoset"> <img /> <img /> </div> <div class="photoset"> <img /> <img /> <i ...

Exploring all the options within a dropdown menu using JQuery

Within the MVC 4 view, there is a dropdown box that, when its value changes, needs to capture all selected values. Each selection consists of three items: the Id, the visible value on the form, and a path to a file. While the functionality works for readin ...

Jquery allows for the toggling of multiple checkboxes

I have a group of check-boxes that I would like to toggle their content when checked. Currently, I am using jQuery to achieve this functionality, but I am searching for a way to optimize my code so that I do not need to write a separate function for each ...

Separate compound words without hyphens at the boundaries of each word

I am currently incorporating the use of Bootstrap for my project. Let's assume that I have text displayed in this way: "Stackoverflow" Is there a method to automatically ensure that it breaks like below if the text exceeds the container: "Stack ...

Determining the Width of a DIV Dynamically with CSS or LESS Depending on the Number of Siblings

One of my challenges involves a parent DIV with a width set to 100%. Dynamically, this parent DIV is filled with numerous children DIVs. I am trying to calculate and assign their widths using only the calc method in CSS or LESS. This is because the flex ...

Can someone assist me with accessing jQuery variables within the agiletoolkit (ATK4) framework?

I am trying to retrieve the window height and width of the browser using ATK4, a PHP framework integrated with jQuery The JavaScript code for this would be $(window).height(); $(window).width(); Since agiletoolkit works with jQuery, I believe it shou ...

Exploring the world of animation with Jquery and images

I'm delving into the world of jQuery to create some captivating animations. Currently, I've been tasked with an assignment involving images that expand, contract, change opacity, and eventually hide. Below is my code snippet: function play_pic1 ...

Unable to locate element by index using XPath

When using XPath in the Console to locate an icon element like $x("//mat-icon"), a list of elements is retrieved: 0: <mat-icon class="mat-icon notranslate mat…-color ng-star-inserted" _ngcontent-cvb-c17="" aria-hidden="false" aria-label="start" role= ...

What is the best way to search for a specific term in Visual Studio Code/IDE without including another term in the search results?

Is it feasible to search for instances in my code where the term "<img" appears without being accompanied by the term "alt="? This would help me locate all image tags that do not have the alt attribute. Can you provide guidance on how this can be achiev ...

What is the process for generating a MediaWiki article that contains preloaded text derived from an HTML form input?

I am in the process of developing a private wiki using MediaWiki, and I have designed a Special page with HTML elements to serve as a template entry form. My goal is to create a new WikiPage based on the input provided by the user, following a similar s ...

When a td element is clicked, the Textbox will also be clicked

Similar Question: Dealing with jQuery on() when clicking a div but not its child $(oTrPlanning).prev().children('td').each(function () { this.onclick = setCountClick; }); When a TD element is clicked, the function setCountClick() i ...

Incorporate a line break into a document using JavaScript

Is there a way to make all the items inside document.get on new lines without using paragraph elements? I have tried br/ and \n, but they do not work as expected. They either cause issues with JavaScript execution or fail to create new lines. <scr ...

what distinguishes CSS properties for Id versus class selectors

Currently in the process of creating my inaugural website, which consists of just four pages. Each page follows the standard layout structure with a header, navigation bar, content division (div id="content"), and footer. As I delve into adding CSS proper ...

Animate.css glitch: The webpage grows exponentially

While using animate.css to add animations to some elements, I noticed that when applying the classes fadeInRight and fadeInLeft, a strange issue occurs just before the animation finishes - the bottom scroll bar briefly appears. This is something new for m ...

Having difficulty transforming both scale and box-shadow at the same time

Is there a way to animate the circle's box-shadow while also scaling it down from 1.6x to 1 during the same transition period? I'm having trouble with the timing of the scale animation, as it seems to occur after the box-shadow animation is fini ...

Retrieve complete browsing history using asp.net

Similar Question: How can browser history be accessed? I am interested in obtaining a list of websites visited by the client through their browser history in order to gather information from these sites and display it on my website. How can I access t ...

Discover the process of extracting HTML content that's stored within a JavaScript variable

Having a HTML snippet stored in a variable, like this: var parse= 'Hello<i class="emoji emoji_smile" title=":smile:"></i><i class="emoji emoji_angry" title=":angry:"></i>World' I am looking to extract the value of the "t ...

Manipulating CSS for a certain ID that is applied to multiple elements with the help of JQuery

I am attempting to conceal all div elements except the initial one within a specific ID. Despite my efforts to create a custom jQuery script, it does not appear to be functioning. $("div.hero-featureSwap:not(:first)").css({display:none}); Is this scr ...

Instructions on how to make a radio button selected when clicked are as follows:

My radio button is currently checked, but I would like it to be onclicked because there is a Javascript function that uses the on.click function. Are there any possible methods or examples to achieve this? <label style="margin-left:177px;">Order Ty ...