State Select Dropdown Problem For Mobile Navigator Prestashop 1.6

[Miguel_SV]

Hello, 

 

in Prestashop 1.6 in some of mobile and tablet navigators the state dropdown doesn´t work well, I have founded a video with the same problem:

 

http://luposanshop.com/private/presta_error.mp4

 

Only happens in some mobiles and some navigator, default mobile one or Explorer.

 

Any idea?

[univers3]

Hello, 

 

in Prestashop 1.6 in some of mobile and tablet navigators the state dropdown doesn´t work well, I have founded a video with the same problem:

 

http://luposanshop.com/private/presta_error.mp4

 

Only happens in some mobiles and some navigator, default mobile one or Explorer.

 

Any idea?

 

Same Here!

 

Any solution?

[tuk66]

This issue can be related to the mobile browser. It works for me in Firefox (Windows 7) with narrow screen.

[razvy]

Hi,

 

Did you solve this issue?

I have the same, please share your solution.

 

Thanks!

[chrisconcise]

I think this issue may be connected to the jQuery Uniform plugin.

 

Try editing this file: themes/{your theme}/js/autoload/15-jquery.uniform-modified.js

 

Around line 958, find the 'selectAutoWidth' option and change it to be false.

Once that has been updated, you'll need to reload the page.

 

Hope this helps!

[Miguel_SV]

Hello, thank you for the reply, I still having this problem.

 

I will try this solution, this only happens to some of my customers and not to me so I will don´t know If it works, If anybody tried and solved the problem please report.

 

Thank you!

Edited May 19, 2016 by Miguel_SV (see edit history)

[razvy]

I tried chrisconcise suggestion, but it's not solving the problem.

 

The fact is that it was working just fine a few weeks ago, I don't understand what could have caused this issue.

 

Please help, I'm loosing a lot of orders!!!

[tuk66]

You can also change your theme.

[razvy]

Sorry, but why should I exchange the theme if it was working?

There should be a quicker solution to this...

[Miguel_SV]

Hello, I think it is not problem of the theme.  I have the default one and I have the problem.

 

The problem now is different, now it happens to me in a Samsumg with Chrome navigator.  The dropdowns appears but when you select the state the dropdowns dissapear and the state is not selected.

 

And it is not problem with the version because I have two Prestashop shops 1.6.0.5 and 1.6.0.14 and it happens in both.

Edited May 20, 2016 by Miguel_SV (see edit history)

[Miguel_SV]

And tried in the default navigator of the mobile and it works 100% well.

[razvy]

Right!

 

All my previous tests were made on Chrome browser under Android.

Now I tried on the default Android browser and it's working, so it might have been a Chrome update that started this issue.

 

Nevertheless, that means that this is a Prestashop-Chrome compatibility issue and there must be something that can be done to solve it.

 

Any suggestion?

[tuk66]

jQuery update?

[Miguel_SV]

Hello, 

 

here is a posible solution, I have to check it:

 

https://github.com/PrestaShop/PrestaShop/commit/fc1c1f3dfe362c7298b84a761ff3184ac47f0a8d

[Miguel_SV]

Last solution works but with this in 

themes/default-bootstrap/js/autoload/15-jquery.uniform-modified.js

 

I have founded here: https://www.prestashop.com/forums/index.php?app=forums&module=post&section=post&do=reply_post&f=86&t=441717

 

 

var is_touch_device = 'ontouchstart' in document.documentElement;

if (!is_touch_device) {

$(window).load(function () {
    $("select.form-control,input[type=checkbox]:not(.comparator), input[type=radio],input#id_carrier2, input[type=file]").not('').uniform();
});

// refresh uniform selects on document width change
$(window).resize(
    function () {
        $.uniform.update("select.form-control, input[type=file]");
    }
);
}

 

Only works in atribute dropdown, not in the state one.

 

But we are closer.

Edited May 22, 2016 by Miguel_SV (see edit history)

[RazrElite]

Last solution works but with this in 

themes/default-bootstrap/js/autoload/15-jquery.uniform-modified.js

 

I have founded here: https://www.prestashop.com/forums/index.php?app=forums&module=post&section=post&do=reply_post&f=86&t=441717

 

 

var is_touch_device = 'ontouchstart' in document.documentElement;

if (!is_touch_device) {

 

$(window).load(function () {

    $("select.form-control,input[type=checkbox]:not(.comparator), input[type=radio],input#id_carrier2, input[type=file]").not('').uniform();

});

 

// refresh uniform selects on document width change

$(window).resize(

    function () {

        $.uniform.update("select.form-control, input[type=file]");

    }

);

}

 

Only works in atribute dropdown, not in the state one.

 

But we are closer.

Any further solutions to this issue? I have had the same issue for awhile, but am only experiencing on Chrome on a Galaxy S6. I get a lot of mobile traffic so I am sure this is causing me to lose out on quite a few sales.

[Euqara]

Hello,

 

Have anybody found a solution to this bug??

 

Thank you so much

[RazrElite]

I tested this on the demo store and it seems to work fine, so I assume the bug was fixed in the latest versions. Anyone has any idea what file might be responsible for the fix? I would just upgrade to the latest version but am getting all kinds of problems doing so, so I'd like to solve this particular issue.

[Euqara]

Hi RazrElite,

 

Did you test it in Chrome? It works fine in Firefox and Safari but not in Chrome.

 

Regards

[RazrElite]

Hi RazrElite,

 

Did you test it in Chrome? It works fine in Firefox and Safari but not in Chrome.

 

Regards

 

Yes, it is Chrome that I am using. After checking again, I notice the state dropdown in the demo store is working fine but the date of birth dropdown isn't. I'm still trying to find a solution.

[RazrElite]

Ok, I believe I've found the solution. After days of trying to find the issue, I noticed this problem with this piece of code in your theme's global.css (\themes\default-bootstrap\css\global.css).

 

/* more sprites.less reset */

.icon-white,

.nav-pills > .active > a > [class^=icon-],

.nav-pills > .active > a > [class*= icon-],

.nav-list > .active > a > [class^=icon-],

.nav-list > .active > a > [class*= icon-],

.navbar-inverse .nav > .active > a > [class^=icon-],

.navbar-inverse .nav > .active > a > [class*= icon-],

.dropdown-menu > li > a:hover > [class^=icon-],

.dropdown-menu > li > a:hover > [class*= icon-],

.dropdown-menu > .active > a > [class^=icon-],

.dropdown-menu > .active > a > [class*= icon-],

.dropdown-submenu:hover > a > [class^=icon-],

.dropdown-submenu:hover > a > [class*= icon-] {

  background-image: none; }

 

Simply removing the code solved the problem for me on both attribute dropdowns and state dropdowns on Chrome mobile. I haven't noticed any other changes after removing this code but you can test for yourself and see.

[Juanan13]

My version of Prestashop is 1.6.0.14

 

I had the same problem, but I've solved replacing in the themes/{your theme}/js/autoload/15-jquery.uniform-modified.js approximately on line 1075, on the end of the file:

 

$(window).load(function () {

$("select.form-control,input[type=checkbox]:not(.comparator), input[type=radio],input#id_carrier2, input[type=file]").uniform();

});

// refresh uniform selects on document width change

$(window).resize(

function () {

$.uniform.update("select.form-control, input[type=file]");

}

);

 

For this:

 

if (typeof isMobile != 'undefined' && !isMobile){

    $(window).load(function () {

     $("select.form-control,input[type=checkbox]:not(.comparator), input[type=radio],input#id_carrier2, input[type=file]").uniform();

    });

    // refresh uniform selects on document width change

    $(window).resize(

     function () {

     $.uniform.update("select.form-control, input[type=file]");

     }

    );

}

 

Don't forget to back up the file before making any change to it.

Edited June 2, 2016 by Juanan13 (see edit history)

[Miguel_SV]

I have tried RazrElite solution -deleting global css code- and it seems it works, thank you!

 

The only problem I had is It is necessary to clic two times in the state dropdown, the first time the problem continues, the drowdown dissapears without fixing the state, but the second time and next it works fine.

[razvy]

I have tried both solutions, none works in my shop:

 

@Juanan13 - the code you specified does not exist in my file, there is something similar though:

if (typeof isMobile != 'undefined' && !isMobile){
    $(window).load(function () {
     $("select.form-control,input[type='checkbox']:not(.comparator), input[type='radio'],input#id_carrier2, input[type='file']").uniform();
    });
    // refresh uniform selects on document width change
    $(window).resize(
     function () {
     $.uniform.update("select.form-control, input[type='file']");
     }
    );
}

@RazrElite - the code you specified does not exist in my global.css

 

 

My shop version is 1.6.1.1

[samjouzel]

same problem for me on desktop, i have to "resize" manually the windows to make appears the drop down for birthday menu....

 

Any helps ?

 

It seems there is a problem with the width of the selector but i can't find a way to resolve it...

 

i'm in 1.6.1.1

[mark91722]

Did anyone post a (solved) fix for the chrome state dropdown issue on mobile devices? Please post a complete answer if you have. Thank you.

Both fixes didn't work for me either

Edited July 26, 2016 by mark91722 (see edit history)

[zumbador]

A customer just alearted me to this issue. None of the solutions mentioned worked for me. Any new ideas on this?