hiI use bootstrap v431I put 2 dropdown list on the page below are codesltdiv id34Dsep13134gt ltdiv class34dropdown34gt ltbutton class34btn btnsecondary dropdowntoggle34 type34button34 id34dropdownMenuButton34 datatoggle34dropdown34 ariahaspopup34true34 ariaexpanded34false34gt Country ltbuttongt ltdiv class34dropdownmenu34 arialabel

Hi nedashCheck this example Now please take its reference and correct your Codeprotected void PageLoadobject sender EventArgs e if thisIsPostBack SystemDataDataTable dt new SystemDataDataTable dtColumnsAddRangenew SystemDataDataColumn new SystemDataDataColumn34Transfer34 new SystemDataDataColumn34Type34 dtRowsAdd34Transfer 134 34Type 134 dtRowsAdd34Transfer 234 34Type 234 dtRowsAdd34Transfer 334 34Type 334 dtRowsAdd34Transfer 434 34Type 434 RptCountryDataSource dt RptCountryDataBind RptCityDataSource dt RptCityDataBind HTMLltlink rel34stylesheet34 type34textcss34 href34httpsmaxcdnbootstrapcdncombootstrap431cssbootstrapmincss34 gtltscript type34textjavascript34 src34httpsaja

Set width of bootstrap DropDownList menu items using CSS in ASP.Net

nedash

SOLVED CLOSED ACTIVE ANSWERED
User: nedash
Posted: on Jan 08, 2021 10:24 PM
Forum: ASP.Net Web Forms
Answer: 1
Views: 11222
Sample Code: Download

I use bootstrap v.4.3.1

I put 2 dropdown list on the page below are codes

<div id="Dsep131">
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            Country                             
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <asp:Repeater ID="RptCountry" runat="server">
                <ItemTemplate>
                    <li><a target="_blank" class="dropdown-item" id="btnsystem" runat="server" commandargument='<%# Eval("Transfer") %>'><%# Eval("Transfer") %></a></li>
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </div>
    <div id="Dsep132">
        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="false">
                City 
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <asp:Repeater ID="RptCity" runat="server">
                    <ItemTemplate>
                        <li><a target="_blank" class="dropdown-item" id="A1" runat="server" commandargument='<%# Eval("type") %>'><%# Eval("type") %></a></li>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
        </div>
    </div>
</div>

here I put 2 different size for dropdown

<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
    aria-haspopup="true" aria-expanded="false" style="width: 108px !important;height:30px;">
    Country
</button>


<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
    aria-expanded="false" style="width: 130px !important;height:39px;vertical-align:central;">
    City
</button>

for city width=130px and for country width=108px

now here I should define size for Items in dropdownlist so I should change below code in bootstrap.css:

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width:7rem;/***********size of Items**************/
    padding-left:0px;
    margin: 0.125rem 0 0 0;
    font-size: 12px;
    color:white;
    text-align: right;
    list-style: none;
    background-color: #2c2a1e;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    cursor:pointer;
}

but when I change it both dropdownlists Item's size will change in same but here rptcity is bigger than rptcountry and I can't define different Items size for each dropdown list

I try to change class name to

.dropdown-menu

.dropdown-menuCity

and put it for city dropdownlist but when I did it rptcity didn't work

Best Regards

Neda

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Jan 09, 2021 04:02 AM
Modified: on Jan 11, 2021 04:23 AM
Report

Hi nedash,

Check this example. Now please take its reference and correct your

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.AddRange(new System.Data.DataColumn[]
        {
            new System.Data.DataColumn("Transfer"),
            new System.Data.DataColumn("Type")
        });
        dt.Rows.Add("Transfer 1", "Type 1");
        dt.Rows.Add("Transfer 2", "Type 2");
        dt.Rows.Add("Transfer 3", "Type 3");
        dt.Rows.Add("Transfer 4", "Type 4");
        RptCountry.DataSource = dt;
        RptCountry.DataBind();
        RptCity.DataSource = dt;
        RptCity.DataBind();
    }
}

HTML

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    body {
        padding-left:10px;
    }
    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        float: left;
        min-width: 7rem;
        padding-left: 0px;
        margin: 0.125rem 0 0 0;
        font-size: 12px;
        color: white;
        text-align: right;
        list-style: none;
        background-color: #2c2a1e;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 0.25rem;
        cursor: pointer;
    }
</style>
<table>
    <tr>
        <td>
            <div id="Dsep131">
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 108px !important">
                        Country                            
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton1" style="width: 100% !important">
                        <asp:Repeater ID="RptCountry" runat="server">
                            <ItemTemplate>
                                <li><a target="_blank" class="dropdown-item" id="btnsystem" runat="server"
                                    commandargument='<%# Eval("Transfer") %>'><%# Eval("Transfer") %></a></li>
                            </ItemTemplate>
                        </asp:Repeater>
                    </div>
                </div>
            </div>
        </td>
        <td>
            &nbsp;
        </td>
        <td>
            <div id="Dsep132">
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 130px !important">
                        City
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2" style="width: 100% !important">
                        <asp:Repeater ID="RptCity" runat="server">
                            <ItemTemplate>
                                <li><a target="_blank" class="dropdown-item" id="A1" runat="server"
                                    commandargument='<%# Eval("type") %>'><%# Eval("type") %></a></li>
                            </ItemTemplate>
                        </asp:Repeater>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</table>

Set width of bootstrap DropDownList menu items using CSS in ASP.Net

Company

Explore

Follow us

Contact Us