I have made an html wizzard for making order. There are four steps, in each is bunch of radio buttons. I redesigned each radio button label to large button (and hidding the radio input itself). This all work greatly on classic PC. But I've run into problem with mobile device (iPHONE & iPAD, I can't test it on other devices, because I don't have any), which are unable to select the radio button.
I've found only one notice of this problem here on stackoverflow, but the solution published there isn't function either.
The original inspiration comes from apple online store for selecting differnt color of device.
My example code:
<label class="option" for="edit-term-worker">
<input id="edit-term-worker" class="form-radio" type="radio">
<span class="worker-name">Sandra</span>
</label>
It's there need some JS, or I'have some flaw in my code?
Thank you all for your help.
Have you tried this?
<input id="edit-term-worker" class="form-radio" type="radio" />
<label class="option" for="edit-term-worker" onclick="">
<span class="worker-name">Sandra</span>
</label>
EDIT: Added an empty onclick, according to this that should do the trick: HTML <label> command doesn't work in Iphone browser
Note that you shouldn't put the radio button into the label tag, it should be outside.
Related
When touching input checkboxes, on tablet or mobile, the response is slow, and not instant. Is there anything that can be done to increase the speed of the response time? I'm styling my radio buttons in the style of IOS like below.
<div class="iradio simulation-method">
<input name="simulation-method" id="upload-photos" value="0" checked="checked" type="radio">
<label for="upload-photos" class="simulation-method-label-js"><svg class="icon icon_camera"><use xlink:href="#icon_camera"/></svg>Photos</label>
<input name="simulation-method" id="scan-ipad" value="1" type="radio">
<label for="scan-ipad" class="simulation-method-label-js"><svg class="icon icon_ipad"><use xlink:href="#icon_ipad"/></svg>Scan</label>
</div>
a bit like this example:
https://codepen.io/wesruv/pen/vexkd
This is the normal behavior, because Safari is waiting a bit to know if the user wants to tap the radio button, or wants to double-tap on the zone where the radio button is (zooming).
This behavior can be disabled using CSS: touch-action: manipulation;
You can apply this to inputs, labels... or to the html tag so there won't be any delay on taps, even on links.
I encountered a problem, where one radio button group is dependant on other state, which caused a disabled radio button to be selected. This is not a problem when selecting another value in the radio button group with the mouse for example, but it seems it is impossible to tab to the radio button group now. I realise that I maybe should not let this happen, but I think it is strange that you can build radio button group that you cannot change by keyboard alone. Here is a simple example:
<input type="radio" disabled checked name="test" value="1">
<input type="radio" name="test" value="2">
<input type="radio" name="test" value="3">
<input type="radio" name="test" value="4">
Is there something I can do to "fix" this behaviour, or does anyone have a good way to handle these edge cases, or how to code if differently all together to avoid this issue?
This is clearly a browser issue, although i'm not sure what would be the expected bahaviour.
The problem is that when you have a radio group, the keyboard goes to the selected element. If this element is disabled, then the focus will jump the whole radio group even if the other one are not disabled.
One "fix" would be to avoid the problem by dissociating the radio buttons in two groups and relying on some javascript code to let them appear as a whole group. You can also reimplement the whole radio button feature by using aria role="radio" on 4 div elements.
It's also possible to ask and wait for the bug to be fixed.
I have seen it on several webpages (cannot recall where exactly atm) where I am able to check or uncheck checkboxes by clicking on the text in front of the checkbox. I know how to do it in JavaScript (create a span with onclick()) , but I want to know if there is any way I can do it without JavaScript.
You can achieve this functionality using label tag as given below.
<input type="checkbox" id="option">
<label for="option">Select this option</label>
I’m using a jQuery mobile slider in a JQM dialog but it’s not being rendered properly, it’s most noticeable in safari and chrome. It renders fine in a standard JQM page.
<div data-role="dialog" id="Dialog1">
<div data-role="header"> <h1> Dialog</h1> </div>
<div data-role="content">
<label for="slider-2">Input slider:</label>
<input type="range" name="slider" id="slider-2"
value="25" min="0" max="100" />
</div>
<div data-role="footer"><h3>Footer</h3></div>
</div>
Here’s a link to a jsfiddle illustrating the issue, if you click the “open dialog” button the slider isn’t rendered correctly but if you click the “open as page” it is.
I’ve tried calling .slider() and .slider(‘refresh’) in the pageshow event but it doesn’t seem to make a difference.
There is an easier way to fix that:
<input type="number" data-type="range" name="slider" id="slider-0" value="0" min="0" max="100">
Its an number type but with an range data-type. Figured it out by playing around with the code.
Works fine so far!
Anyway it's fixed in the latest version 1.0.1!
OK I sort of solved the problem, though the solution is not to pretty and is a bit of a hack.
I realized that the problem is only when the slider is on a dialog, so what I’m doing is setting the data-role of the page I want as a dialog to page, then in my JavaScript I call the dialog() method on that page to initialize it as a dialog widget. The problem is that when you change to the page next the x in the corner (close button) doesn’t get rendered, so I’m manually creating the styles and markup for it.
Here’s the code I’m using
$('#progWiz').dialog().find('a:first')
.addClass('ui-btn-left ui-btn ui-btn-up-a' +
' ui-btn-icon-notext ui-btn-corner-all ui-shadow')
.attr({ 'title': 'close', 'data-theme': 'a' })
.empty()
.append('<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">' +
' <span class="ui-btn-text">Close</span>' +
'<span class="ui-icon ui-icon-delete ui-icon-shadow"></span></span>');
If someone has a better solution I'd be happy to hear, in the meantime I'll just do this and hopefully this get's fixed in the next release of JQM.
I also seek solution. I have two Sliders in dialog.
Code below is not solution but workaround I did for my problem. Hope it helps someone.
Problem is in Android Phones it does not create input boxes on left showing value of slider.
I handled that by hiding the original input type slide and adding a text box above the slider.
On slide change event I change the Text Box Value. And as I dont want Keyboard operations , I have disabled the text box.
Code Below.
<script>
$("#slider-0").change(function(event, ui) {
$('#thicknessBox').val($(this).val());
});
</script>
<label for="slider-1">Thickness:</label>
<input type="text" id="thicknessBox" name="slider-1" disabled="disabled" ></input>
<input data-role="none" style="display:none;" type="range"
id="slider-0" value="1" min="1" max="10" />
Im not proud of it but atleast now it looks and behaves like slider outside the dialog.
Looking forward to better solution.
I'm trying to make a system which asks users to specify what kind of content they are submitting, using PNG icons to represent each type. Ideally, what I'd like is a group of three buttons (with images on them) which behave like radio buttons - the user can use arrow keys to switch between them, they are treated as one group, etcetera. However, that appears to be impossible, and the closest I can get is putting the images alongside the pre-existing radio buttons. Is there a good way to 'fake' this functionality?
I would suggest using radio buttons as a user will recognise these inputs and it'll work without javascript.
<form>
<input type="radio" name="sex" value="male" id="male"/><label for="male">Male</label>
<br />
<input type="radio" name="sex" value="female" id="female" /> <label for="female">Female</label>
</form>
You can then put an image inside the labels, or better, a background image to supplement the text.
Sure, make two variants of each image (normal and highlighted) and use JavaScript to remember which one is selected and switch the images.
How about radio buttons next to the images. Then use JavaScript to hide the radio buttons and change the (hidden) selected radio when an image is clicked. Combine that with some sort of hightlighting effect on the selected image, and you have an attractive interface that degrades nicely. JQuery or a similar JavaScript library would be useful in achieving this.