How to use ASP.NET DropDownList in Bootstrap navbar

Question

I have an ASP.NET web page and I'm using Bootstrap for the UI. In the navbar I want to use an ASP.NET DropDownList but I can't get it to render like a Bootstrap DrowDown. Currently my navbar looks like this:

when I want it to look more like this:

Here is my HTML for the navbar:

<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 class="navbar-brand" runat="server" href="~/">Application name</a>
</div>
<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a runat="server" href="~/">Home</a></li>
        <li><a runat="server" href="~/About">About</a></li>
        <li><a runat="server" href="~/Contact">Contact</a></li>
    </ul>

    <ul class="nav navbar-nav navbar-right">
        <li>
            <asp:DropDownList runat="server" ID="ddlLanguage" AutoPostBack="true" CssClass="k-dropdown">
                <asp:ListItem Text="English" Value="en-us" />
                <asp:ListItem Text="Francais" Value="fr" />
            </asp:DropDownList>
        </li>
        <asp:LoginView runat="server" ViewStateMode="Disabled">
            <AnonymousTemplate>
                <li><a runat="server" href="~/Account/Login">Log in</a></li>
            </AnonymousTemplate>
            <LoggedInTemplate>
                <li><a runat="server" href="~/admin">Admin</a></li>
                <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Logic.HelperFunctions.GetUser.FirstName %>!</a></li>
                <li>
                    <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                </li>
            </LoggedInTemplate>
        </asp:LoginView>
    </ul>
</div>

So I want the DropDownList for language to render on the right and centered vertically. How do I adjust the CSS? The CssClass of the server control doesn't seem to have an effect, and I need the control to be a server control, as the server changes the language of the site based on the AutoPostback from selecting a language option.

Grizzly · Accepted Answer · 2016-06-14 17:02:04Z

0

I believe you are missing some elements:

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li>
                <asp:DropDownList runat="server" ID="ddlLanguage" AutoPostBack="true" CssClass="k-dropdown">
                    <asp:ListItem Text="English" Value="en-us" />
                    <asp:ListItem Text="Francais" Value="fr" />
                </asp:DropDownList>
            </li>
            <asp:LoginView runat="server" ViewStateMode="Disabled">
                <AnonymousTemplate>
                    <li><a runat="server" href="~/Account/Login">Log in</a></li>
                </AnonymousTemplate>
                <LoggedInTemplate>
                    <li><a runat="server" href="~/admin">Admin</a></li>
                    <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Logic.HelperFunctions.GetUser.FirstName %>!</a></li>
                    <li>
                        <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                    </li>
                </LoggedInTemplate>
            </asp:LoginView>
        </ul>
    </li>
</ul>

Let me know if this works.

answered Jun 14, 2016 at 17:02

Grizzly

5,9559 gold badges63 silver badges117 bronze badges

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

1 Comment

Nse Over a year ago

Your answer was close, but it's missing some tags as well. The main problem is that the ASP.NET control renders the DropDown options as an <option> element while Bootstrap expets an <li> element for its DropDown list. I rendered my options manually as <li> elements and use JavaScript to perform the postback. My solution is posted below.

Nse · Accepted Answer · 2016-06-21 16:44:23Z

I figured it out. The main problem is that the ASP.NET control renders the DropDown options as an element while Bootstrap expects an

element for its DropDown list. I rendered my options manually as

elements and use JavaScript to perform the postback. My solution is posted below.

<ul class="nav navbar-nav navbar-right">
<li class="k-dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><asp:Literal runat="server" Text="<%$Resources:Resources, Language%>" /><span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li><a href="#" onclick="javascript:__doPostBack('en-us','')">English</a></li>
        <li><a href="#" onclick="javascript:__doPostBack('fr','')">français</a></li>
        <li><a href="#" onclick="javascript:__doPostBack('es','')">Español</a></li>
    </ul>
</li>
</ul>

Collectives™ on Stack Overflow

How to use ASP.NET DropDownList in Bootstrap navbar

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related