Asp.Net Bootstrap Classes On <asp:DropDownList

Question

<!DOCTYPE html>

<html lang="en">
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>
Account Group - Add - My ASP.NET Application
</title><script src="/Scripts/modernizr-2.6.2.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/Site.css" rel="stylesheet"/>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /></head>
<body>
    <form method="post" action="./groupAdd" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"    value="tRJn2Kjwvz2Puav8tcpz3Ls6wGBUmb5Ja174Y3bdllDemDMYow1wPnjeUZgjA1y+av/mqygIOqBBxlrkr1A6axhfG/Ic4fMYi6poCOfltc5MR88HYxVigJJBG3tIvHfroT0iXc0csFM0mwyzWlNttzAhjZx7Xogq99vurKroKnK4q23wfM8J72YgScmhpcujEBgtDuKzbt8o6nu6VjwNYg==" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
    theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
       theForm.submit();
    }
}
//]]>
</script>



<script src="/bundles/MsAjaxJs?v=c42ygB2U07n37m_Sfa8ZbLGVu4Rr2gsBo7MvUEnJeZ81" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>

<script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
<script src="Scripts/respond.js" type="text/javascript"></script>
<script src="/bundles/WebFormsJs?v=AAyiAYwMfvmwjNSBfIMrBAqfU5exDukMVhrRuZ-  PDU01" type="text/javascript"></script>
        <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl08', 'ctl01', [], [],    [], 90, 'ctl00');
//]]>
</script>


    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="./" class="navbar-brand">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="./">Home</a></li>
                    <li><a href="About">About</a></li>
                    <li><a href="Contact">Contact</a></li>
                </ul>

                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="Account/Register">Register</a></li>
                            <li><a href="Account/Login">Log in</a></li>
                        </ul>

            </div>
        </div>
    </div>
    <div class="container body-content">

<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <div class="form-group">
            <label for="MainContent_eGroupCode" id="MainContent_lGroupCode">Group Code</label>
            <input name="ctl00$MainContent$eGroupCode" type="text" maxlength="10" id="MainContent_eGroupCode" class="form-control" style="text-transform:uppercase" />
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <div class="form-group">
            <label for="MainContent_ddGroupType" id="MainContent_lGroupType">Group Type</label>
            <select name="ctl00$MainContent$ddGroupType" id="MainContent_ddGroupType" class="form-control">
<option value="IN">Incomes</option>
<option value="EX">Expenses</option>
<option value="AS">Assets</option>
<option value="LI">Liabilities</option>

</select>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <div class="form-group">
            <label for="MainContent_eGroupName" id="MainContent_lGroupName">Group Name</label>
            <input name="ctl00$MainContent$eGroupName" type="text" maxlength="40" id="MainContent_eGroupName" class="form-control" style="text-transform:uppercase" />
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <input type="submit" name="ctl00$MainContent$bSave" value="Save" id="MainContent_bSave" class="btn btn-success" />
    </div>
</div>

        <hr />
        <footer>
            <p>&copy; 2016 - PFA</p>
        </footer>
    </div>

<div class="aspNetHidden">

<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="3AAE92F6" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="qSAzVSuS/WkdQ0+7cpffhRi71ZlGYos9x6mRfTlJETXx5PzLHrvJMrvKTBR+gk0eqMw6L0G8IaFchRCu2+y5qUSvQESXisN7B0rrXdNd3EB6D+zzcccmRVsiGszQD39higpryIq2R7q+im2eg0bLsdGa55i5eD7cOF8/Kh9ZNlMhO8NUTJ05Ef8LDMxYv+jB89mlh5Un6dkvjksggF8mBZp2pDYrDoGaINzbFwJzC5Q65UIgChzA9VRKUUWFG/BU" />
</div></form>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Firefox","requestId":"d3ed4f11e0994099a89d07a103267276"}
</script>
<script type="text/javascript" src="http://localhost:50950/1ed6bd9582884a84ad84c822a4bf5589/browserLink" async="async"></script>
<!--  End Browser Link -->

</body>
</html>



   Version 2
   <%@ Page Title="Account Group - Add" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="groupAdd.aspx.vb" Inherits="PFA.groupAdd" %>
   <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <div class="form-group">
            <asp:Label runat="server" ID="lGroupCode" Text="Group Code" AssociatedControlID="eGroupCode"></asp:Label>
            <asp:TextBox runat="server" ID="eGroupCode" CssClass="form-control"></asp:TextBox>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <div class="form-group">
            <asp:Label runat="server" ID="lGroupType" Text="Group Type" AssociatedControlID="ddGroupType"></asp:Label>
            <asp:DropDownList runat="server" ID="ddGroupType" CssClass="form-control">
                <asp:ListItem Text="Incomes" Value="IN"></asp:ListItem>
                <asp:ListItem Text="Expenses" Value="EX"></asp:ListItem>
                <asp:ListItem Text="Assets" Value="AS"></asp:ListItem>
                <asp:ListItem Text="Liabilities" Value="LI"></asp:ListItem>
            </asp:DropDownList>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <div class="form-group">
            <asp:Label runat="server" ID="lGroupName" Text="Group Name" AssociatedControlID="eGroupName"></asp:Label>
            <asp:TextBox runat="server" ID="eGroupName" CssClass="form-control"></asp:TextBox>
        </div>
    </div>
</div>

And the result - the dropdown is still wider than the text boxes above and below.

Please see screenshot of rendered for below. Why does the dropdownlist occupy the whole screen width while the other two controls don't? Very new to web development. Please advice and help. Many thanks. Iyer

<%@ Page Title="Account Group - Add" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="groupAdd.aspx.vb" Inherits="PFA.groupAdd" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
   <div class="form-group">
        <asp:Label runat="server" ID="lGroupCode" Text="Group Code" AssociatedControlID="eGroupCode"></asp:Label>
        <asp:TextBox runat="server" ID="eGroupCode" CssClass="form-control">    </asp:TextBox>
    </div>
    <div class="form-group">
        <asp:Label runat="server" ID="lGroupType" Text="Group Type" AssociatedControlID="ddGroupType"></asp:Label>
        <asp:DropDownList runat="server" ID="ddGroupType" CssClass="form-control" width="100%">
            <asp:ListItem Text="Incomes" Value="IN"></asp:ListItem>
            <asp:ListItem Text="Expenses" Value="EX"></asp:ListItem>
            <asp:ListItem Text="Assets" Value="AS"></asp:ListItem>
            <asp:ListItem Text="Liabilities" Value="LI"></asp:ListItem>
        </asp:DropDownList>
    </div>
    <div class="form-group">
        <asp:Label runat="server" ID="lGroupName" Text="Group Name" AssociatedControlID="eGroupName"></asp:Label>
        <asp:TextBox runat="server" ID="eGroupName" CssClass="form-control"></asp:TextBox>
    </div>

because you have given the width:100% fro thr drodownlist

Tummala Krishna Kishore
– Tummala Krishna Kishore

2016-10-03 11:50:18 +00:00
Commented Oct 3, 2016 at 11:50 — Tummala Krishna Kishore
– Tummala Krishna Kishore, Commented Oct 3, 2016 at 11:50

Michael McMullin · Accepted Answer · 2016-10-03 16:06:45Z

2

As Webruster says, you have specified a width of 100%. However, that's not the whole story. Even without this, Bootstrap will by default define a CSS width of 100%. Try wrapping the whole block in a <div class="col-***"> tag to better control sizes. For example, col-sm-3.

See the Bootstrap documentation for how to control form sizes.

EDIT: After chatting with the OP for a while, it transpired that the problem is with the Content/Site.css file that's automatically generated by Visual Studio when creating a new Web Forms app. Amongst other things, it contains the following style:

/* Set widths on the form inputs since otherwise they're 100% wide */ 
input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="tel"], 
input[type="select"]{ 
max-width: 280px; 
}

This is overriding the default Bootstrap behavior. Furthermore, there is not (as far as I'm aware) an input type called select. Asp.net dropdown lists render to normal select tags. So what the above style does is restrict the maximum width of several input tags, without affecting the dropdown lists.

There are two solutions. First, we can simply delete this block entirely. This will allow Bootstrap to behave as expected, as far as form elements are concerned. This would be my preference.

Second, replace input[type="select"] with simply select. If it transpires that my knowledge of input types is lacking, then add ", select" after it, rather than replacing it (don't forget the comma!)

edited Oct 3, 2016 at 16:06

answered Oct 3, 2016 at 12:33

Michael McMullin

1,4703 gold badges15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

K Y Iyer Over a year ago

Thanks - had done that initially but that did not help so, tried this - without the 100% width as well - let me change and post it back.

Michael McMullin Over a year ago

If you're having trouble, you may need to create another outer <div class="row">, and nest it inside that. The column classes represent some division of 12 at a particular screen size. For example, <div class="row"><div class="form-group col-sm-3">....</div></div> will take up 3/12 (1/4) of the width of the parent row at small screen sizes and above (unless a larger size is also specified).

K Y Iyer Over a year ago

Even that does not help.

K Y Iyer Over a year ago

No change if I add Width="100%" to the textboxes. Their sizes do not change. Thanks

K Y Iyer Over a year ago

Could it be asp.net? Am editing my question and pasting view source

|

Collectives™ on Stack Overflow

Asp.Net Bootstrap Classes On <asp:DropDownList

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related