How to stretch an autocomplete input

Question

I am working with SELECT2 and my autocomplete look like this

myForm

<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" ; 

When i inspected the code i found a span generated from SELECT2 that have width : auto

How to make it look like other form-control .

Answer 1

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

Answer 2

I found the solution SELECT2 Appearance simply do the following :

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