This topic contains 1 reply, has 2 voices, and was last updated by Sean Sean 9 months, 1 week ago.

select2 with wrong width when div display is set to none on ready document

  • andrezanchi

    Posts: 4
    Member Reply #10881

    I have a div with a m-select2 inside. I want to initialize this div in hide mode. I tryed with the code “$(“#selectCliente”).css(“display”, “none”);” on document ready function, but when i set the display to block, the select shows with reduced size.

    This is the Div, and bellow is the java script. I attached the image example. Thanks!

    <div class=”form-group m-form__group row” id=”selectCliente”>
    <div class=”col-lg-6″>
    <label class=””>Cliente</label>
    <div class=”m-input-icon m-input-icon–right”>
    <select class=”form-control m-select2″ id=”clientId” name=”clientId” data-placeholder=”Selecione o Cliente…”>
    <option value=””>Selecione o Cliente</option>
    @foreach (var item in Model.Clients){
    <option value=”@item.Id” selected=”@(Model.Current.ClientId == item.Id)”>@item.Name</option>}

    $(document).ready(function () {
    $(“#selectCliente”).css(“display”, “none”);

    • This topic was modified 9 months, 1 week ago by  andrezanchi.
    You must be logged in to view attached files.

    Posts: 4464
    Support Staff Reply #10913


    Unfortunately this is the Select2 plugin’s limitation and you will need to find workaround to not using “display:none”. Or you can initialize Select2 instance after display: none changed to display: block.


You must be logged in to reply to this topic.