简体   繁体   中英

bootstrap select multiple box height

I have following dropdowns, one is simple select dropdown and other one is select multiple dropdown:

在此处输入图像描述

I am using following code for it:

<div class="row mt-4">
    <div class="col-lg-4" id='trainingTimeDiv'>
        <div class="form-group">
            <label class="form-label">Training Time</label>
            <select class="form-select" name="trainingTime" id="trainingTime">
                <option id="30" value="30">30 seconds</option>
                <option id="60" value="60">60 seconds</option>
                <option id="90" value="90">90 seconds</option>
                <option id="120" value="120">120 seconds</option>
                <option id="150" value="150">150 seconds</option>
                <option id="180" value="180">180 seconds</option>
                <option id="210" value="210">210 seconds</option>
                <option id="240" value="240">240 seconds</option>
                <option id="270" value="270">270 seconds</option>
                <option id="300" value="300">300 seconds</option>
            </select>

        </div>
    </div>

    <div class="col-lg-4" id='independentVariables'>
        <div class="form-group">
            <label class="form-label">Independent Variables</label><br>
            <select name='variableDropDownList' id="variableDropDownList" class="selectpicker col-lg-12"
                    multiple="multiple"  data-live-search="true">
                <option>Opt 1</option>
                <option>Opt 2</option>
                <option>Opt 3</option>
                <option>Opt 4</option>
            </select>
        </div>
    </div>
</div>

I want to make height of Independent Variables dropdown similar to that of Training Time dropdown. How can I make it possible please?

What you could possibly do, is use this adjusting for your preferred height:

select{
  height: 30px;
}

If this is not usable, please post any additional CSS you are using since select adjusts to the size of its contents, therefore, making it difficult to discern the solution here.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM