Select2 in Modal with Safari and Chome Mobile

Home Forums Porto Admin – Responsive HTML5 Template Select2 in Modal with Safari and Chome Mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #10028100
    lucianopena
    Participant

    Dear,
    When I use a Select2 in a Modal, accessing by any mobile with Safari ou Chrome, the search input does not work. The inputbox, show correctly but I cant do the search.



    Template Version: 2.1.1
    #10028101
    Support2
    Keymaster

    Hello,

    We made a test here using a iPhone X + Safari: http://www.okler.net/tests/adm2/HTML/ui-elements-modals.html (on the “Basic” modal) and couldn’t reproduce the issue. Please send an online link of your website showing the issue, so we can inspect your code, make tests and send the solution for you.

    Kind Regards,

    Rodrigo.


    #10028102
    lucianopena
    Participant

    Right.
    I do a test and this example really works in Safari using Iphone, but, in this example the select2 is a multiple. When I change my select2 to multiple works to, but, I cant use multiple in this case.
    Watch my select2

    <div class=”form-group row”>
    <label class=”col-md-2 control-label “>Vendedor</label>
    <div class=”col-md-10″>
    <select name=”f_vendedor” data-plugin-selectTwo class=”form-control populate”>
    <optgroup label=”salesman”>
    </optgroup>
    </select>
    </div>
    </div>


    #10028107
    Support2
    Keymaster

    Hello,

    Thanks now we can reproduce the issue.
    You need use the option “dropdownParent” of Select2, please follow the steps below:

    1) Change the select html to:

    <select name="f_vendedor" class="form-control populate">

    2) Initialize the select2 plugin manually, for it add in (js/custom.js):

    $('select[name="f_vendedor"]').select2({
        theme: 'bootstrap',
        dropdownParent: $('#modalBasic') // #modalBasic is the ID of modal
    });

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10028111
    lucianopena
    Participant

    I try this, but, when I remove the “data-plugin-selectTwo” of the select2, this change to a simples combobox without search input.
    See bellow:

    This is corret (but the input does not work)
    https://www.ancoranet.com.br/prowebplus/erros/cwis.png

    whithout input-box (error) in chome:
    https://www.ancoranet.com.br/prowebplus/erros/cwtis.png

    whithout input-box (error) in safari:
    https://www.ancoranet.com.br/prowebplus/erros/swtis.png

    On Desktop, Works anyways, with or without data-plugin-selectTwo and Initialize select2 manually


    #10028115
    Support2
    Keymaster

    Hello,

    We made a test with our last solution and it’s working:

    You can test here: http://www.okler.net/tests/adm2/HTML/ui-elements-modals.html (basic modal). Clear the browser cache before test.

    Seeing your screenshots, seems that the select2 are not initializing. Probably the reason is some javascript error (check the console of browser) or maybe you need clear your browser cache to get the JS code working.

    If possible create a test login for us in your system and send the link of your site, so we can inspect your code and help you with that.

    Kind Regards,

    Rodrigo.


Viewing 6 posts - 1 through 6 (of 6 total)

This topic is marked as "RESOLVED" and can not rceive new replies.