设置select2输入的宽度(通过Angular-ui指令)

时间:2012-10-02 02:48:30

标签: css twitter-bootstrap angularjs jquery-select2

我有问题使这个plunkr(select2 + angulat-ui)工作。

http://plnkr.co/edit/NkdWUO?p=preview

在本地设置中,我得到了select2工作,但我无法按照docs中的描述设置宽度。它太窄而无法使用。

enter image description here

谢谢。

编辑: 没关系那个plnkr,我在这里发现了一个工作小提琴 http://jsfiddle.net/pEFy6/

看起来select2的行为会折叠到第一个元素的宽度。我可以通过bootstrap class="input-medium"设置宽度。但是不确定为什么angular-ui不接受配置参数。

14 个答案:

答案 0 :(得分:201)

您需要指定要解析的属性宽度以保留元素宽度

$(document).ready(function() { 
    $("#myselect").select2({ width: 'resolve' });           
});

答案 1 :(得分:192)

在我的情况下,如果有零个或多个药片,select2会正确打开。

但如果有一个或多个药丸,并且我将它们全部删除,它将收缩到最小宽度。我的解决方案很简单:

$("#myselect").select2({ width: '100%' });      

答案 2 :(得分:44)

这是一个老问题,但新信息仍值得张贴......

从Select2版本3.4.0开始,有一个属性dropdownAutoWidth可以解决问题并处理所有奇怪的情况。请注意,默认情况下不启用。它会在用户进行选择时动态调整大小,如果使用该属性,则会为allowClear添加宽度,并且它也会正确处理占位符文本。

$("#some_select_id").select2({
    dropdownAutoWidth : true
});

答案 3 :(得分:18)

select2 V4.0.3

<select class="smartsearch" name="search" id="search" style="width:100%;"></select>

答案 4 :(得分:7)

在您的脚本中添加方法容器css,如下所示:

$("#your_select_id").select2({
      containerCss : {"display":"block"}
});

它会将您的选择宽度设置为与div的宽度相同。

答案 5 :(得分:6)

使用&gt; 4.0的select2我正在使用

$("select").select2({
  dropdownAutoWidth: true
});

其他这些不起作用:

  • dropdownCssClass:&#39; bigdrop&#39;
  • 宽度:&#39; 100%&#39;
  • 宽度:&#39;解决&#39;

答案 6 :(得分:1)

将宽度设置为'resolve'对我来说不起作用。 相反,我在我的选择中添加了“width:100%”,并修改了这样的css:

.select2-offscreen {position: fixed !important;}

这是唯一对我有用的解决方案(我的版本是2.2.1) 您的选择将占用所有可用位置,这比使用

更好

class="input-medium"

来自bootstrap,因为select总是停留在容器中,即使在调整窗口大小后(响应)

答案 7 :(得分:0)

您可以尝试这样。它对我有用

$("#MISSION_ID").select2();

在隐藏/显示或ajax请求上,我们必须重新初始化select2插件

例如:

$("#offialNumberArea").show();
$("#eventNameArea").hide();

$('.selectCriteria').change(function(){
    var thisVal = $(this).val();
    if(thisVal == 'sailor'){
        $("#offialNumberArea").show();
        $("#eventNameArea").hide();
    }
    else
    {
        $("#offialNumberArea").hide();
        $("#eventNameArea").show();
        $("#MISSION_ID").select2();
    }
});

答案 8 :(得分:0)

与select2无关的更简单的CSS解决方案

//HTML
<select id="" class="input-xlg">
</select>
<input type="text" id="" name="" value="" class="input-lg" />

//CSS
.input-xxsm {
  width: 40px!important; //for 2 digits 
}

.input-xsm {
  width: 60px!important; //for 4 digits 
}

.input-sm {
  width: 100px!important; //for short options   
}

.input-md {
  width: 160px!important; //for medium long options 
}

.input-lg {
  width: 220px!important; //for long options    
}

.input-xlg {
  width: 300px!important; //for very long options   
}

.input-xxlg {
  width: 100%!important; //100% of parent   
}

答案 9 :(得分:0)

为您的select2函数添加宽度解析选项

$(document).ready(function() { 
        $("#myselect").select2({ width: 'resolve' });           
});

将下面的CSS添加到样式表中

.select2-container {
width: 100% !important;
}

它将解决问题

答案 10 :(得分:0)

在最近一个使用 Bootstrap 4 构建的项目中,我尝试了上述所有方法,但没有任何效果。我的方法是使用 jQuery 编辑 CSS ,以在表上获得 100%

 // * Select2 4.0.7

$('.select2-multiple').select2({
    // theme: 'bootstrap4', //Doesn't work
    // width:'100%', //Doesn't work
    width: 'resolve'
});

//The Fix
$('.select2-w-100').parent().find('span')
    .removeClass('select2-container')
    .css("width", "100%")
    .css("flex-grow", "1")
    .css("box-sizing", "border-box")
    .css("display", "inline-block")
    .css("margin", "0")
    .css("position", "relative")
    .css("vertical-align", "middle")

工作演示

$('.select2-multiple').select2({
        // theme: 'bootstrap4', //Doesn't work
        // width:'100%',//Doens't work
        width: 'resolve'
    });
    //Fix the above style width:100%
    $('.select2-w-100').parent().find('span')
        .removeClass('select2-container')
        .css("width", "100%")
        .css("flex-grow", "1")
        .css("box-sizing", "border-box")
        .css("display", "inline-block")
        .css("margin", "0")
        .css("position", "relative")
        .css("vertical-align", "middle")
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />

<div class="table-responsive">
    <table class="table">
        <thead>
        <tr>
            <th scope="col" class="w-50">#</th>
            <th scope="col" class="w-50">Trade Zones</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                1
            </td>
            <td>
                <select class="form-control select2-multiple select2-w-100" name="sellingFees[]"
                        multiple="multiple">
                    <option value="1">One</option>
                    <option value="1">Two</option>
                    <option value="1">Three</option>
                    <option value="1">Okay</option>
                </select>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

答案 11 :(得分:0)

也想在这里添加我的解决方案。这类似于Ravindu的回答。

我在select2中添加了width: 'resolve',作为属性:

    $('#searchFilter').select2({
        width: 'resolve',
    });

然后我将min-width的{​​{1}}属性添加到select2-container

!important

在select元素上,.select2-container { min-width: 100% !important; } 属性需要style='100px !important;'才能起作用:

!important

答案 12 :(得分:0)

在您的样式表中添加:

.select2 {
  width: unset !important;
}

答案 13 :(得分:0)

您可以使用的其他方法是在 Select 标签的样式中设置宽度。

<select id="myselect" style="width: 20%;">
    <option>...</option>
</select>

然后,使用这个

$(document).ready(function() { 
    $("#myselect").select2({ width: 'style' }); //This will use style attr of the select element  
});