css - 默认情况下打开引导面板时,select2输入的宽度越来越小
问题描述
在引导程序中,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
跟随其父列!
我不明白为什么会这样……有什么想法可以解决吗?
解决方案
您可以使用插件的宽度选项轻松解决此问题,在这种特殊情况下使用width: "100%"
将修复它,如下所示:
$('.js-example-basic-single').select2({
placeholder: "Select...",
allowClear: true,
width: "100%"
});
检查工作示例:
$('.js-example-basic-single').select2({
placeholder: "Select...",
allowClear: true,
width: "100%"
});
<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>
推荐阅读
- python - 读取文件名并用它创建一个列
- ios - 在运行时从模型中获取和插入属性值
- android - 使用 Gson 序列化时忽略主键
- python - 使用 check_correlation 加速 pandas 分析?
- android - 使用cordova构建的Android应用程序在使用该应用程序时不断崩溃
- php - 垃圾收集器是否可以收集属于处于 `sleep()` 条件下的脚本的元素?
- linker - 无法在 BPL 中找到未解析的外部/过程入口点
- reactjs - 模态打开时反应键盘事件未触发
- yii2 - 在 Yii2 中的 DetailView::widget 上打开图片
- python - 如何使用 xlwings 在 Excel 中复制和粘贴筛选表