Atrributes Selection is NOT working on Android browsers 4.x

Question

I have a problem with attributes (PrestaShop 1.6)

http://www.zapateriamiqueca.es/ropita/20-leotardos-condor.html

If you click on Choose Size (Talla): from any browser (Chromme, Firefox...) but on Android 4.x o 5.x it works right, but... if you click on Choose Size: from android 4.x browser default it opens the options to select from then closes it straight away.

I followed these instructions:

1. Open up product.tpl inside your themes folder and look for:

   <select name="{$groupName}" id="group_{$id_attribute_group|intval}" class="form-control attribute_select no-print">
   

2- Comment out form-control after class so it looks like:

<select name="{$groupName}" id="group_{$id_attribute_group|intval}" class="attribute_select no-print">

3- Then to add your global.css file inside your {your_theme}/css Add the following to make it look go again (The numbers after group vary per website, so take a look which group number is being used for you attribute selector):

select#group_3.attribute_select {width: 60%!important;}

select#group_1.attribute_select {width: 60%!important;}

I managed to get up to modifying the product.tpl but I'm not sure where to copy the code lines in point 3, in order to maintain the attribute selection style.

I also don't know where to look for my group number. I really would appreciate your help.

Thank you for yout time! ;-)

Answer 1

If you look at your source code you'll find:

<select name="group_3" id="group_3" class="form-control attribute_select no-print">

So your groupName id for this value is group_3 as in the example.

You need to edit this file /themes/Calisto/css/global.css and add this line at the end before saving:

select#group_3.attribute_select {width: 60%!important;}

I'm not saying it will work to solve your problem, but that's what your instructions say.