如何拉伸自动完成输入答案

【问题标题】：How to stretch an autocomplete input如何拉伸自动完成输入
【发布时间】：2018-09-30 09:32:36
【问题描述】：

我正在使用SELECT2，我的自动完成功能看起来像这样

我的表单

<form th:object="${field}" name="modal" method="post"
            th:action="@{/ecran/champ}">

    <div class="modal fade" id="exampleModal" name="exampleModal"
                role="dialog" aria-labelledby="exampleModalLabel"
                aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
    <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Ajouter un
                                field a l'ecran</h5>
    <button type="button" class="close" data-dismiss="modal"
                                aria-label="Close">
    <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
    <div class="modal-body">


    <input th:value="${ecran.id}" type="hidden" id="idEcranField"
                                name="idEcranField" /> 
    <input value="" id="idFieldExiste"
                                type="hidden" name="idFieldExiste" /> 
    <label class=" mb-2">Choisir
                                un field existant</label>




    <div class="control-group">
    <select class="js-example-basic-multiple" id="existeField" >
    <option value="" disabled selected>Selectionnée le
                                        champs</option>
    <option th:each="fields: ${listFields}"
                                        th:value="${fields.id}" th:data-jira="${fields.idJira}"
                                        th:data-type="${fields.type}"
                                        th:data-defaut="${fields.value}" th:text="${fields.nom}">

                                    </option>
                                </select>
                            </div>


    <label class="mt-2">ID Jira du field</label> 
    <input type="text"
                                id="idJiraInput" class="form-control mb-2" autocomplete="off"
                                disabled> 
    <label class="mt-2">Type du field</label> <select
                                class="typeField form-control " id="typeField">
    <option value="" disabled selected>Selectionnée le
                                    type du field</option>
    <option value="text" disabled>text</option>
    <option value="Text Long" disabled>Text Long</option>
    <option value="Date" disabled>Date</option>
    <option value="Select Simple" disabled>Select Simple</option>
    <option value="Select Multiple" disabled>Select
                                    Multiple</option>
                            </select>



    <div id="defaultValue" class=" mt-2">
    <input id="tagsinput" class="form-control input-width"
                                    type="text" data-role="tagsinput" disabled>
                            </div>






                        </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-secondary"
                                data-dismiss="modal">Annuler</button>
    <button type="submit" class="btn btn-primary">Valider</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>

myCSS

@import "https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" ; 
@import "https://fonts.googleapis.com/icon?family=Material+Icons" ; 

@import "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" ; 

@import "https://use.fontawesome.com/releases/v5.0.10/css/all.css" ; 
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" ; 
@import "https://fonts.googleapis.com/css?family=Roboto" ;

当我检查代码时，我发现从SELECT2 生成的跨度有width : auto

如何让它看起来像其他form-control。

【问题讨论】：

没有 CSS 我们无法回答这个问题。请提供一个最小示例（如果可能，使用代码 sn-p 工具）。另请注意，您的法语充满了错误:)
请张贴整个表单的 HTML 和您目前拥有的 CSS。
@Yann39 对 CSS 代码来说还可以/跨度>

标签： html css jquery-select2

【解决方案1】：

在这里发布整个表单的 html 代码会有所帮助，但也许您可以验证该类是否与其他选择的相同。

【讨论】：

【解决方案2】：

我找到了解决方案SELECT2 Appearance，只需执行以下操作：

<select class="select2" id="existeField" style="width: 100%">
...

【讨论】：