I have a problem with attributes (PrestaShop 1.6)
http://www.laddersukdirect.co.uk/telescopic-ladders/abbey-telescopic-ladders.html
If you click on Choose Size: from any browser but an android browser it works as it should.
BUT if you click on Choose Size: from an android browser it opens the options to select from then closes it straight away.
Anyone else have this problem if so have you solved the issue?
PrestaShop uses jQuery Uniform plugins to style up it's inputs. This plugin actually generates some divs that show the selected information and hides the actual input (opacity = 0). You should try inspecting the amrkup and you'll see what I'm talking about.
I think you have two options:
Trying to disable Uniform plugin from styling up that select element - either by calling some "undo" function (you should look up the documentation) or by removing the class from that triggers the plugin (I'm actually just guessing here)
Modifying product.tpl - replacing current select element with a basic select element (which I assume works on Android)
You can also use jQuery: remove the overlay element, and set opacity for select element back to 1. (I don't really recommend this method)
Well thank you very much, editing the product.tpl file was indeed the way to go.
It seems that the select form_control is not functioning properly with the explorer for mobile phones (it was working perfectly for Google Chrome on mobiles though).
This is a solution for your problem:
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">
And comment out form-control after class so it looks like:
<select name="{$groupName}" id="group_{$id_attribute_group|intval}" class="attribute_select no-print">
Then to add your global.css file inside your {your_theme}/css
Add the following to make it look go again:
select#group_3.attribute_select {width: 60%!important;}
select#group_1.attribute_select {width: 60%!important;}
The numbers after group vary per website, so take a look which group number is being used for you attribute selector.
Related
I don't often work with HTML these days, and I'm working with some JS libraries that manipulate canvas. I got done all that I needed - but I just realized, that
When the webpage starts, all text is selectable (titles, subtitles, notifications etc - basically all text in spans and divs)
Then, I typically click on the canvas and interact with it
But, if after clicking the canvas, I try to go to, say, the title span, and click on it to select - the text is not selectable anymore (and no text on the webpage is anymore, apart from text form inputs)
So, I tried looking into this, and found:
HTML input fields does not get focus when clicked
The root cause of the problem is disableSelection(). It is causing all the problems, but removing it is not a solution, as (at least in 2016 or slightly before), on touch-screen devices, you "have" to use this if you want to be able to move objects with jQuery.
So, disableSelection is apparently jQuery, but so far I have just used vanilla javascript in my project (I think, but some of the libraries I use might use jQuery).
Anyways, I thought - before I try to blindly copy/paste online code, in an attempt to restore selectability, - could I somehow confirm through the DOM inspector in the browser, that an element is selectable or not? Say, here is how my Firefox Inspector form Web Developer Tools looks like:
Is there something accessible in the Inspector, like a CSS property, to tell me if an object is selectable? If not, can I quickly run a JavaScript one-liner in the browser Console, and find out the selectability status of an element?
OK, thanks to the comment of #burkay, I got it - indeed, it is about user-select. So, in Firefox,
right-click on an element then choose Inspect Element, then
Right-click on the entry (corresponding to this element, autoselected) in the Inspector, and choose "Use in Console"
Then you will get a temp1 variable in Console, which you can query:
Note that CSS properties end up as properties of .style property of the element, however their names do not include hyphens anymore, but are instead CamelCase - so for user-select in CSS file, we have .style.userSelect in Console. (also, note that .mozUserSelect tracks/copies the values of userSelect)
Above is the log that I got for my problem; at start, the object has .style.userSelect set to empty string, and it is unselectable; then I tried setting it to "auto", and it remained unselectable; finally I set it to "text" - and at that point, the text became selectable (credit to #RaduSimionescu)
As the title suggests, I'm struggling to fire a click event on a link element.
I have the following HTML structure (I'm reporting just the interested part):
<!-- Table markup here.. -->
<td class="text-center">
<a class="text-danger"><i class="fi-trash" aria-hidden="true" player-id="108"></i></a>
<a class="text-muted"><i class="fi-x hide" aria-hidden="true" player-id="108"></i></a>
<input value="" name="" type="hidden">
</td>
<!-- More table markup here -->
Basically I'm trying to fire a click event on i.fi-trash and i.fi-x, in such a way that i.fi-trash is displayed when the page is loaded, and as I click on it, it's hidden and i.fi-x is shown.
$(document).ready(function(){
$('i.fi-trash').click(function(){
//Do stuff
$(this).addClass('hide');
$(this).parent('a').siblings('a').children('i.fi-x').removeClass('hide');
});
$('i.fi-x').click(function(){
//Do other stuff
$(this).addClass('hide');
$(this).parent('a').siblings('a').children('i.fi-trash').removeClass('hide');
});
});
This works flawlessly in every browser except stock android browser.
I tried using vclick with jquery mobile, nothing.
I tried moving the click event on the a tag, nothing.
I tried using other events like tap, bind, but no one seems to work.
I tried switching from jQuery 2 to jQuery 1.9, nothing.
The only thing that works is moving the click event on the TD element, but then I would need to do some checking to see which of the two i elements I have to activate.
Any help?
what phone you're testing and what's the android version?
i had a miliar problem, where it would not work on Sony's default mobile browser(in a Xperia Z3 compact), but works fine on the ASUS Zenfone 2 default browser...
As far as i know, the manufacturer creates this mobile browser at will, so it can differs from phone to phone
And just after you ask for help, you find the solution...
To quickly reply to the various comments asking on which platform I tested my code: I know for sure that on stock AOSP android 4.2.1 and 4.2.2 with stock browser the issue is present. Likely also on stock AOSP android 4.4.4 and CM based 4.4.4 roms (always with android browser).
It turns out stock android browser is not able to fire click events (and probably any other event) on a elements containing icons in the form of font (like Foundation icons), and on span and i elements (used for rendering these icons) unless you add to your css element display: inline-block .
I found out the solution when I noticed that the same exact HTML with Bootstrap css and icons (instead of Foundation css and icons like in my case) was not affected by the problem.
In fact, .glyphicon Bootstrap class has this rule defined (you can take a look at the core CSS file).
Unfortunately, since I'm using Zurb Foundation, I didn't have this line in my css ( span and i elements have minimal style with Foundation) and spent hours trying to fix this silly problem.
So, in my case, I modified the CSS in the following way:
i[class^="fi-"],
i[class*=" fi-"],
span[class^="fi-"],
span[class*=" fi-"]{
display: inline-block;
}
This should target every span or i element used for Foundation icons.
Problem
I have an Eclipse RAP application, and as soon as I change some dropdown box value, random texts became changed in my application. They become bigger. You may need to know, that in Eclipse RAP all styles are inlined and calculated server side.
Steps to Reproduce
I open a tab inside RAP with a page with dropdown lists
Change the dropdown till random texts inside the browser become bigger (usually happens by first trial)
Investigation so far
I checked the JSON ajax request-replies, nothing is related to font change. Actually nothing is related to the tab widget in which I am currently and which has its font changed.
I attached a function to the div representing the tab inside debugger
using onpropertychanged event. I log the names of events. When I change the dropdown list and the tab text becomes bigger, there is nothing style.font* in the console. Other things like background color change display the events.
the last thing is hillerious. As soon as I click on inspect, and I "touch" the client area of my application with the mouse, all fonts become OK. So inspecting the problem is impossible:
Question
Did you see something similar ever?
Do you know about known issues
for IE, which could cause this?
Is there any workaround?
Update
So the problem is originated from my using custom fonts with #font-face. I realized the followings:
- Using web-font kit generated by FontSquirrel does not make any difference. IE loads then EOT (i checked with developer tools), but still the fonts are changing randomly.
- I tried a randomly downloaded TTF, same problem occours.
- if I remove the fallbacks from the css font definitions, there is no "font-change" phenomen described above
- if there is no fallback, IE uses the custom font always, but it seems to have calculation problems when it comes to the width of a text div. For example from my two word menu items only one word is shown (obviously the second word is word wrapped).
Solution
I guess the solution for me is to use native fonts. I don't want to spend my life with hacking around bugs of IE.
My suggestion is to look at this bug report.
From your image I can see that your doctype is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
which triggers quirks (refer here) mode rendering in browsers. So my suggestion is to try to change it.
pages rendered in quirks mode might not be able to take advantage of
features the browser supports when using standards mode.
in IE the CSS rules applied when the :hover pseudo selector are not
applied when using quirks mode (colour should change and pointer
should turn into a hand).
Hovering over option in a select list (window ) in IEs does not generate a tooltip, but works fine in FireFox and Chrome. I’ve set up a working demonstration on jsbin.com and jsfiddle.net, whichever is more convenient.
Link To jsfiddle.net Demo.
and
Link To jsbin.com Demo.
So you can see it in action.
The function which is in use was not written by me, I found it here: owainlewis.com/blog/post/simple_jquery_tool_tip_plugin. Originally it was written for showing 'tittle' attributes as a tool-tip, but I re-wrote it some of it (replaced 'title' with 'option') to accommodate my needs.
To know exactly what I mean, check out those demos in Firefox or Chrome first.
Sorry, I forgot to mention that this HTML code is generated by PHP. Using title attribute would be great for me, if I was in charge of PHP, then I would not have to re-write the original plugin.
Unfortunately, for now I have to keep looking.
P.S.
I am open to any workarounds. (If there is no hack I will go back to the title attribute.)
You don't need JavaScript to do it, and in fact, you can't use JavaScript to do it. IE does not respond to mouseover on option items. If you need dynamic tooltips just change the title attribute of the option.
Though it's a simple title attribute, this works for me in IE9: http://jsfiddle.net/n5YUk/4/
Check the first option in the list - I changed it to:
<option title="dash dash" Value="">--</option>
I know it's not what you're hoping to get but it's the only way you'll get it in IE.
Paul
Set the title property of the option (you can use jquery for this also by setting the attr) tag and you should be good to go.
I am working on an application than needs to create pages looking like this:
http://iui-js.appspot.com/samples/music/music.html#_usage
The problem I have is that, just like in the page linked above, the values are not selectable neither with iSafari nor with the desktop version of Safari.
I need to be able to select and copy the values (in the example page these are '2', '8' and '27').
I would be fine simply knowing why the above text is not selectable in the first place, as this would probably be enough to find a workaround solution.
Thanks everybody for the kind attention.
In this case the problem is caused by the following option
-webkit-user-select:none;
Alternative options, for the same property, are auto and text.
Further documentation available on Safari CSS reference page