How to use dropdownlist of asp.net as input-group in bootstrap

Question

I have a problem in adding dropdownlist in input group..

I use this one..

<div class="input-group">
 <div class="input-group-btn">
  <asp:DropDownList runat="server" CssClass="selectpicker form-control">
  <asp:ListItem Value="Val">Item1sadfasdf</asp:ListItem>
  <asp:ListItem Value="Val3">Item2asdfasd</asp:ListItem>
  </asp:DropDownList>
 </div>

<asp:TextBox CssClass="form-control" ID="txtSearch" runat="server"></asp:TextBox>
<span class="input-group-btn">
<asp:Button CssClass="btn btn-info" runat="server" Text="Search" ID="btnSearch" OnClick="btnSearch_Click" />
</span>
</div>

but it just give me a result like this: enter image description here

I also got a code like this..

<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span runat="server" id="spanCategory">All Category</span>&nbsp&nbsp<span class="caret"></span></button>
<ul id="myMenu" class="dropdown-menu">
<li><a href="#">All Category</a></li>
<li class="divider"></li>
<li><a href="#">JO Number</a></li>
<li><a href="#">Date</a></li>
<li><a href="#">Status</a></li>
<li><a href="#">Client Name</a></li>
<li><a href="#">Institution</a></li>
<li><a href="#">Department</a></li>
<li><a href="#">Location</a></li>
<li><a href="#">Priority</a></li>
<li><a href="#">Problem</a></li>
<li><a href="#">Remark</a></li>
<li><a href="#">Assigned</a></li>
<li><a href="#">CITI Department</a></li>
</ul>
</div>

<asp:TextBox CssClass="form-control" ID="txtSearch" runat="server"></asp:TextBox>
<span class="input-group-btn">
<asp:Button CssClass="btn btn-info" runat="server" Text="Search" ID="btnSearch" OnClick="btnSearch_Click" />
</span>
</div>

and showed me output like this..

enter image description here

It is what i want but the problem is that everytime i click the search button which do the post back, it just change the value into a default value which is the "All Category" value.. The value is just change through jQuery but everytime a postback is done the value back to default so i decided to use dropdownlist which retain its value even if there is a post back happen.. but the design is not that good..

How to make it same as the design i liked.. Thank you so much

Chris L · Accepted Answer · 2014-07-21 08:29:41Z

1

To use DropDownList as an input group you need code like this:

<div class="input-group">
  <asp:DropDownList ID="DD1" runat="server" CssClass="form-control" AutoPostBack="true" />
  <span class="input-group-btn">
    <button id="btn" class="btn btn-default" type="button">Reset</button>
</span>
</div>

The problem you have is a textbox within the input-group div tag as well as the dropdown. This is causing them both to display and your button to span two lines.

answered Jul 21, 2014 at 8:29

Chris L

2,2921 gold badge19 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

How to use dropdownlist of asp.net as input-group in bootstrap

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related