Home / Questions / 26756
Accepted
Cidius
Asked: 2020-10-10 15:24:06 +0800 CST 2020-10-10 15:24:06 +0800 CST

Problems with a Select using a chosen and a collapsed button in Bootstrap

  • 772

Hello, I am wanting to implement an advanced search form in which it is opened from a collapsed button in bootstrap. Here I implement a panel with a select.

I implement a plugin called Chosen that improves the aesthetics of the select and others. the is that this happens to me 

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Busqueda Avanzada
</button>
<div class="collapse" id="collapseExample">
 <div class="panel panel-default" style="margin-top:2px">
  <div class="panel-body">
    <div class="form-group">
            {!! Form::label('provincia_id','Provincia') !!}
            {!! Form::select('provincia_id',$provincias,null,['class'=>'form-control select-provincia','placeholder'=>'Provincia del evento...','required']) !!}
    </div>

  </div>
 </div>
</div>
@section('js')
<script>

    $('.select-provincia').chosen({
        placeholder_text:'Seleccione una Categoria',
    });

</script>   
@endsection

If I deactivate the plugin, it looks fine (like a normal select), activated but outside of collapsed it works fine too.

Any idea where the problem could be?

jquery

1 Answers

  1. Best Answer

    The answer was quite simple although not as logical as I expected. Somehow you have a problem with size el collapsed

    Through trial and error, looking for something among the parameters of chosen, I found that its size can be modified. I tried and indeed it grows in percentage like any css.

    $('.select-provincia').chosen({
    width: "100%"
});

    Putting 100% adjusts to the size of the container

    • 0