I have a group of radio buttons, and have styled them so that they display:block so that they appear like buttons (have also hidden the radio button itself). This works great in Chrome and Firefox on desktops and on android tablets...but will not work on an iPad.
See it here:
http://jsfiddle.net/WhNRK/
For whatever reason the block element is not 'active' on an iPad and does not set the radio button. If I 'unhide' the radio button you can see that it doesn't get select when clicking the block. However if I click the actual radio button itself, it selects properly and even changes the block element background color as it should!
http://jsfiddle.net/WhNRK/1/
Any idea as to what I'm doing wrong that is causing this to happen? Seems like it should be pretty straightforward functionality, so I'm hoping its just something simple I'm overlooking...
The primary use of the site that this is incorporated within is meant for mobile devices, so definitely need it working on any iOS device (assuming it likely happens on an iPhone as well, just don't have one here with me to test right now).
Thanks for any suggestions you may have!
Fisrt of all, your fiddle does indeed not work on the iphone either, both in safari and chrome.
Curious as i am, i tried to find the solution by playing a bit with your code. In changed the html a bit to make the label a sibling of the input, rather then a parent. Still with no effect on my iphone.
After some googling i found this: http://forums.macrumors.com/showthread.php?t=785632
I tryed the solution and it seems to work, allthough i have no clue why. I guess it is some sort of bug...
You have to add onclick="" to your labels.
I didn't test it on an iPad, but as it is just a big iPhone it should work the same. A working example can be found here: http://jsfiddle.net/WhNRK/15/
Related
This is my website for a school project, it is designed to be viewed on a phone. I have a dropdown menu on it near the top that uses hover, which does not work on touch devices. I need to make this work with clicking (I don't really care if hover still works, I need to click) but do not know how. How do I make this work with tapping on a touchscreen? I really want to stay away from javascript for now and just use HTML and CSS. I am very new to webdesign so I will need a very basic explanation. Also I know my images take a long time to load, any suggestions on how to address that would also be appreciated.
Thank you!
Most touch devices lack the ability to provoke a true hover interaction (some exceptions would be the Samsung Galaxy Note with pen, Microsoft Surface devices with pen, and the iPad Pro with pen).
That said, touching an element that has a :hover pseudo selector with associated styles (as you do) should invoke that hover event, even in mobile browsers on touch devices.
Have you viewed your website on a touch device? The menu appears as expected with tapping on my Google Pixel (with Chromium browser) as well as on my Surface device in tablet mode.
There may be some browsers/devices or combinations thereof that do not exhibit this behavior, but I believe it's quite standard.
If you need a more principled solution, I'd suggest making the nav toggle a <button> element and executing some basic JavaScript on click events. I realize you don't want to stray into that territory right now, but that's exactly the sort of use case at which JavaScript excels.
If you really want to avoid JavaScript and you don't like relying on the touch-invokes-hover-event approach, there's always the checkbox hack. As the name indicates, it's a hack. I wouldn't recommend it for your particular use case. But to each his/her own.
Here's a CSS Tricks article on all the interesting uses the checkbox hack can be applied to.
I have a strange behavior with drop down lists and button in my layout.
I have just made a fiddle here to illustrate how this looks like.
As you can see in the example, if you resize the browser the you can still open the lists or click on the Filter button which is ok.
When I do the same on my desktop, the first list will work properly, but the second and third list will not open as well the button in not clickable anymore.
I have spent the all day trying to fix this issue, unfortunately with no success at all.
Maybe someone of you guys have had the same issue or knows what is going on here?
Any help will be much appreciated.
I've encountered issue like that before when wrapper elements were stretching over other elements via zindex and couldn't track it down until i gave each element a background color and could see how they were transforming in size as i adjusted the window size.
for some reason my checkboxes will not work inside some divs.
They cant be checked and are around half the size they normally are...
They work in firefox, but not chrome and they dont even show in safari...
This is not a live site so cant give a link, but its just a basic checkbox code.
I have had a look around the css of the containing div etc but nothing seems out of place.
Any suggestions on what i could look for? Sorry if theres a lack of information.
Take a look at the computed style tab in the source view of chrome by pressing f12. You can then see all the styles that are applied to it and also add new styles. Experiment with it till you get the wanted result. Also, you can use jsfiddle.com for posting bigger blocks of code.
Cheers!
I'm trying to make a custom checkbox, so I made something like that : http://jsfiddle.net/wQdUn/2/
The problem is that, on WebKit based browsers, the checkbox is toggled only when clicking on the content of the <span>, not on the box itself, while in Firefox I get the behavior I expect.
So I have two questions:
Which one is the right behavior (i.e. the one conform to specifications)?
How do I get the result I want in both browsers (and others...)?
Thanks.
Not sure about the first question, but if you make the span an inline block too, it'll work as you expect in WebKit browsers. See http://jsfiddle.net/wQdUn/5
For those who come to this topic form google:
Safari 6.0.4(8536.29.13) still got this problem, you need to set inline-block on pseudo-element to make click work.
Chrome switched to Blink as it's rendering engine, so this problem didn't happen on chrome any more(26.0.1410.65).
Site: http://heidenfreelance.com/FullSite/shop.html
When I view in Chrome, dropdown already displays. On Firefox, Hover works correctly.
Also, text back button does not work like the button. I want it to be dynamic.
Take note from this example: http://www.htmldog.com/articles/suckerfish/dropdowns/
It's a simple way to do what you're trying to do, which works consistently.
In my opinion,back buttons aren't worth thinking about. Browsers already have a back button.
Error pages, 404 etc, sometimes benefit from it, but really, a consistent navigation is what a site needs.