I'm currently working on creating a form-group that contains a textbox and a button using asp.net and bootstrap.
Here is the code snippet:
<div class="col-sm-4 col-md-4 col-lg-4 input-group">
<asp:TextBox ID="txtPN" runat="server" placeholder="Search" CssClass="form-control" ClientIDMode="Static" />
<span class="input-group-btn">
<asp:Button ID="btnSearchPN" runat="server" Text="Search" CssClass="btn btn-default" />
</span>
</div>
Initially, everything appears to be working well:
https://i.sstatic.net/UWwAi.png
However, when I resize the browser window, the textbox and the button seem to separate:
https://i.sstatic.net/AHMiJ.png
This form group is nested within
<div class="container-fluid"/><div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4 form-group">
<label for="cbMarcas">Select Brand:</label>
<asp:DropDownList ID="cbMarcas" CssClass="form-control" runat="server" ClientIDMode="Static" DataTextField="Description" DataValueField="Id" OnSelectedIndexChanged="cbMarcas_SelectedIndexChanged" AutoPostBack="True"></asp:DropDownList>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 form-group">
<label for="cbModelos">Select Model:</label>
<asp:DropDownList ID="cbModelos" CssClass="form-control" runat="server" ClientIDMode="Static" DataTextField="Description" DataValueField="Id"></asp:DropDownList>
</div>
<div class="col-sm-4 col-md-4 col-lg-4 input-group">
<asp:TextBox ID="txtPN" runat="server" placeholder="Search" CssClass="form-control" ClientIDMode="Static" />
<span class="input-group-btn">
<asp:Button ID="btnSearchPN" runat="server" Text="Search" CssClass="btn btn-default" />
</span>
</div>
</div>
</div>
Any ideas on what could be causing this issue?