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

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


  • andrezanchi
    Participant

    Posts: 2
    Member Reply #10881

    Hello,
    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>}
    </select>
    </div>
    </div>
    </div>

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

    • This topic was modified 2 months, 1 week ago by  andrezanchi.
    Attachments:
    You must be logged in to view attached files.
    Sean
    Sean
    Keymaster

    Posts: 4022
    Support Staff Reply #10913

    Hi,

    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.

    Thanks.

You must be logged in to reply to this topic.