Change Height of Bootstrap SelectPicker using CSS Property in ASP.Net

Last Reply 13 days ago By dharmendr

Posted 13 days ago

I have several select picker bootstrap controls on my form but I want to reduce their size a little at the height to which the control provides by default, already try changing the height in the properties of the control and it is not reduced, how can I change the height?

<asp:DropDownList ID="ddlSeguro" runat="server" class="form-control selectpicker" data-show-subtext="true" data-live-search="true" Width="100px" Height="10px" >
</asp:DropDownList>

 

You are viewing reply posted by: dharmendr 13 days ago.
Posted 13 days ago

H jmontano,

You can add data-size in the html.

Or override CSS property.

<style type="text/css">
    div.dropdown-menu.open
    {
        max-height: 10px !important;
        overflow: hidden;
    }
    ul.dropdown-menu.inner
    {
        max-height: 10px !important;
        overflow-y: auto;
    }
</style>

HTML

Using data-size

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
</head>
<body>
    <select name="ddlFruits" id="ddlFruits" class="form-control selectpicker" data-show-subtext="true"
        data-live-search="true" data-size="3" style="width: 100px;">
        <option value="Mango">Mango</option>
        <option value="Apple">Apple</option>
        <option value="Banana">Banana</option>
        <option value="Orange">Orange</option>
    </select>
</body>
</html>

Demo

Using CSS

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
    <style type="text/css">
        div.dropdown-menu.open
        {
            max-height: 10px !important;
            overflow: hidden;
        }
        ul.dropdown-menu.inner
        {
            max-height: 10px !important;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <select name="ddlFruits" id="ddlFruits" class="form-control selectpicker" data-show-subtext="true"
        data-live-search="true" style="width: 100px;">
        <option value="Mango">Mango</option>
        <option value="Apple">Apple</option>
        <option value="Banana">Banana</option>
        <option value="Orange">Orange</option>
    </select>
</body>
</html>

Demo