Combobox appearance on bootstrap

Question

Hello!

I’m trying to use the Chosen + Bootstrap in Laravel.

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

Analyze the image above:

Option 1 without using Laravel using Choosen is the way it is in bootstrap;

In option 2 using Laravel is very small.

In both options I call it that way:

 $('#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>
<script src="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>





<div class="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>

Answer 1

You confused the https://github.com/harvesthq/chosen with the https://github.com/alxlit/bootstrap-chosen, this CDN you used is not the same as the link http://alxlit.name/bootstrap-chosen/, are different projects with similar names only.

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

• https://github.com/alxlit/bootstrap-chosen/releases

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

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

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

Which is the selector used in Chosen and customize as you wish, 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>
<script src="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>


<div class="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>

Answer 2

You can apply styles below that will increase the theme size. I’ve 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>
<script src="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>

<div class="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>