I'm trying to hide an input field by setting its .css('visibility','hidden'); This works fine running in my development browser (Chrome on Windows), but when I run it on Android (version 4.0.4, Samsung GS2, Phonegap), the hiding behaviour doesn't work properly. The field is not hidden at first, but if I then do something with some other JQM widget on the page, such as collapsing or expanding a listview, then the input field is hidden. I get the same result if I rotate the device, which presumably triggers a window redraw that implements the style.
I cannot use .hide() in this case, I must use .css('visibility'), that much cannot be changed.
I've tried .page() and .trigger('create') on the input field, they don't help. How do I trigger the magic sauce that the widget redraw is doing so the .css() changes get carried out on the input field?
In general, I don't recommend adding CSS to elements (inline CSS). It's more conventional to add/remove a class, and then style the class in your CSS file(s).
For example, some CSS rule might have !important, and then the CSS on the element will not override it, and !important can't be used in inline CSS styles. On the other hand, !important rules still follow the CSS cascade rules, so it is possible to override !important rules that are defined in CSS files.
Note that "visibility" does not change layout. The element retains it's play in the layout. Is that what you want?
Thanks for the tip. Yes, I'm using setting visibility instead of hide() because I want to retain layout, but I've had other issues with dynamic content or style, so I wanted to focus more on looking at the redrawing instead of just solving this particular issue with its own workaround.
Your tip to change css class instead of css style worked a treat, many thanks!
Leave a comment on sa_innerfire's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic