CSS Bootstrap in Ajax combobox

Question

I am using an ajax combobox, so it can be typed inside the combobox data, but I am using bootstrap and it is not configured correctly, I use class to configure, follows how it is getting:

<div class="grid-16 search">
  <div class="grid-3">
    <asp:Label ID="labelPersonSituation" runat="server" Text="Situação da Pessoa:"></asp:Label>
    <select id="Situation" runat="server" class="form-control">
                            <option value="Todos">Todos</option>
                            <option value="Ativo">Ativo</option>
                            <option value="Bloqueado">Bloqueado</option>
                            <option value="Inativo">Inativo</option>
                            <option value="Livre">Livre</option>
                        </select>
  </div>
  <div class="grid-6">

    <asp:Label ID="labelModality" runat="server" Text="Modalidade:"></asp:Label>
    <asp:ComboBox ID="DropModality" runat="server" DropDownStyle="DropDownList" AutoPostBack="False" CaseSensitive="False" ItemInsertLocation="Append" AutoCompleteMode="SuggestAppend" class="WindowsStyle"></asp:ComboBox>
  </div>
  <div class="grid-3">
    <br />
    <asp:Button ID="btnRelatorioAlunosSituacao" runat="server" Text="Pesquisar" OnClick="btnRelatorioAlunosSituacao_Click" CssClass="btn btn-block btn-primary" />
  </div>

But it stays that way. It works the search, but it doesn’t work the bootstrap css.

I found that it is giving conflict with the ajax that I am using, look how is the css that it uses ajax:

.ajax__combobox_buttoncontainer button {
  background-position: center;
  background-repeat: no-repeat;
  border-color: ButtonFace;
  height: 0px;
  width: 15px;
}

.ajax__combobox_itemlist {
  background-color: brown;
  border: solid 1px ButtonShadow;
  color: WindowText;
  cursor: default;
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.ajax__combobox_itemlist li {
  padding: 0 3px 0 2px;
  white-space: nowrap;
  width: 100%;
}

.ajax__combobox_inputcontainer {
  border-spacing: 0;
}

.ajax__combobox_inputcontainer td {
  padding: 0;
}

Answer 1

Well your bootstrap css must be being interfered by some external element

try the following

<div class="grid-6">
    <div style='float:left;marin-top:15px'>
       <asp:Label ID="labelModality" runat="server" Text="Modalidade:">
       </asp:Label>
       <asp:ComboBox ID="DropModality" runat="server" DropDownStyle="DropDownList" AutoPostBack="False" CaseSensitive="False" ItemInsertLocation="Append" AutoCompleteMode="SuggestAppend" class="WindowsStyle">
       </asp:ComboBox>
   </div>
</dib>

if it is still outside the edge increases the value of the margin marin-top:15px until adjust