Внутри начальной загрузки panel У меня есть form, где я использую select2 для выбора входов.
Проблема в том, что когда я определяю panel, который будет закрыт по умолчанию (удаляя in из class="panel-collapse collapse"), ширина входа select2 становится меньше!
$('.js-example-basic-single').select2({
placeholder: "Select...",
allowClear: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-10">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="fa fa-plus mright-1"></i> closed by default
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<form id="form" method="post" action="rpt-action?do=rpt-request-change-mould-submit" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<label for="inputName" class="col-xs-2 control-label">Status</label>
<div class="col-xs-10">
<select name="action" class="js-example-basic-single js-states form-control" required>
<option></option>
<option value="toPrepare">Prepare</option>
<option value="toProduction">Produce</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-xs-2 control-label">Notes</label>
<div class="col-xs-10">
<textarea class="form-control" name="comments" rows="3" /></textarea>
</div>
</div>
<div class="col-xs-2">
<button type="submit" name="formAction" value="next" class="btn btn-primary">submit</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-10">
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne2" aria-expanded="true" aria-controls="collapseOne">
<i class="fa fa-plus mright-1"></i> open by default
</a>
</h4>
</div>
<div id="collapseOne2" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<form id="form" method="post" action="rpt-action?do=rpt-request-change-mould-submit" class="form-horizontal" role="form">
<fieldset>
<div class="form-group">
<label for="inputName" class="col-xs-2 control-label">Status</label>
<div class="col-xs-10">
<select name="action" class="js-example-basic-single js-states form-control" required>
<option></option>
<option value="toPrepare">Prepare</option>
<option value="toProduction">Produce</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-xs-2 control-label">Notes</label>
<div class="col-xs-10">
<textarea class="form-control" name="comments" rows="3" /></textarea>
</div>
</div>
<div class="col-xs-2">
<button type="submit" name="formAction" value="next" class="btn btn-primary">submit</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Однако, если я добавлю in к классу, то ширина ввода select2 будет следовать за столбцом его родителя с!
Я не понимаю, почему это происходит ... Есть идеи, как мне это исправить?