Appearance of Combobox in bootstrap

Navigation
0

Hello

I'm trying to use Chosen + Bootstrap in Laravel.

But I would like the appearance using choosen to look like the bootstrap itself.

Reviewtheimageabove:

Inoption1withoutusingLaravelusingChoosenitgetsthewayitisinthebootstrap;

Inoption2usingLaravelisverysmall.

InbothoptionsIcallitthisway:

 $('#cidades').chosen( {
              allow_single_deselect: true,
              search_contains: true,
              no_results_text: "Nenhum resultado enontrado!"
          } );
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.3/chosen.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.3/chosen.jquery.min.js"></script><divclass="form-group ">
   <label for="tipoos" class="col-md-1 control-label">Cidades</label>
   <div class="col-md-3">
      <select  class="form-control"  id="cidades" data-placeholder="Selecione a cidade">
         <option value="0"></option>
         <option value="1">Manaus</option>
         <option value="1">Boa Vista</option>
         <option value="2">São Paulo</option>
       </select>
   </div>
</div>
    
asked by anonymous 21.02.2018 / 17:42

2 answers

1

You've confused the link with link , this CDN you used is not the same as the link link, they are different projects with similar names only .

In the @alxlit repository if you download version 1.0.1 on the releases tab the appearance is almost identical to the bootstrap:

However if you want to use harvesthq/chosen just use the .chosen-container-single .chosen-single selector for the "select" element and the following for the arrow:

  • .chosen-container-single .chosen-single div b (closed menu)

  • .chosen-container-active.chosen-with-drop .chosen-single div b (open menu)

What is the selector used in Chosen and customize it as desired, even to look like Bootstrap. 

$('#cidades').chosen( {
              allow_single_deselect: true,
              search_contains: true,
              no_results_text: "Nenhum resultado enontrado!"
          } );
.chosen-container-single .chosen-single {
    background-color: #ffffff !important;
    -webkit-background-clip: padding-box !important;
    -moz-background-clip: padding !important;
    background-clip: padding-box !important;
    border: 1px solid #cccccc !important;
    border-radius: 4px !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075) !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075) !important;
    color: #555555 !important;
    display: block !important;
    height: 34px !important;
    overflow: hidden !important;
    line-height: 34px !important;
    padding: 0 0 0 8px !important;
    position: relative !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background-image: none !important;
}

.chosen-container-single .chosen-single div b {
     background-position: 1px 5px !important;
}

.chosen-container-active.chosen-with-drop .chosen-single div b {
     background-position: -15px 5px !important;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.3/chosen.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.3/chosen.jquery.min.js"></script><divclass="form-group ">
   <label for="tipoos" class="col-md-1 control-label">Cidades</label>
   <div class="col-md-3">
      <select  class="form-control"  id="cidades" data-placeholder="Selecione a cidade">
         <option value="0"></option>
         <option value="1">Manaus</option>
         <option value="1">Boa Vista</option>
         <option value="2">São Paulo</option>
       </select>
   </div>
</div>
    
21.02.2018 / 18:35
1

You can apply styles below that will increase the size of the theme. I applied some styles that will increase font size and element dimensions (see comments in CSS). 

$('#cidades').chosen({
   allow_single_deselect: true,
   search_contains: true,
   no_results_text: "Nenhum resultado enontrado!"
});
/*ajustes do select*/
select.form-control + .chosen-container.chosen-container-single .chosen-single{
    height: 40px; /*altura*/
    padding: 6px 10px; /*ajuste do espaçamento vertical/horizontal*/
    font-size: 18px; /*tamanho da fonte*/
}

/*seta*/
select.form-control + .chosen-container.chosen-container-single .chosen-single div{
    top: 8px;
}

/*ícone de deselecionar*/
select.form-control + .chosen-container.chosen-container-single .search-choice-close{
    top: 14px;
}

/*caixa de texto*/
select.form-control + .chosen-container .chosen-search input[type=text] {
    height: 40px;
    font-size: 18px;
}

/*resultados*/
select.form-control + .chosen-container .chosen-results {
    font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.3/chosen.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.3/chosen.jquery.min.js"></script><divclass="form-group ">
   <label for="tipoos" class="col-md-1 control-label">Cidades</label>
   <div class="col-md-3">
      <select  class="form-control"  id="cidades" data-placeholder="Selecione a cidade">
         <option value="0"></option>
         <option value="1">Manaus</option>
         <option value="1">Boa Vista</option>
         <option value="2">São Paulo</option>
       </select>
   </div>
</div>
    
21.02.2018 / 19:24
Which combo box was selected inside a form Adding points in a range of known data