I have a website at tbmaster.co.uk which has 3 radio buttons and they work fine in normal browsers but when I use a iPhone/iPad to view the site I am unable to click the radio buttons.
If you look at the source there is some JavaScript going on to set the states of radio buttons and other things so not sure if this is the problem
Your <div class="postit"> is the problem. On the iPad, it just covers the radio buttons and keeps click events from getting through. If you adjust the size of your non-iPad browser you can get the same effect. Try making your .postit thinner so that it won't cover up the radio buttons; or you could try playing the z-index of the form and .postit to get the form on top.
You'll also notice that you can't click the ADD ANOTHER SERIAL button but you can click the other two buttons, ADD ANOTHER SERIAL is buried under the .postit but the other buttons are not. And similar issues will apply to Machine ID.
Related
I am trying to work with the Bootstrap 5 Toggle Button (using the Outline Style for a more evident visual emphasis). However, the UX experience is not quite what I'm hoping for.
(See https://getbootstrap.com/docs/5.0/forms/checks-radios/#outlined-styles)
The toggle per se works well, its the focus (or after the click focus I should say) that's the problem. When the button is in an unchecked state, the visual clue is prominent since the button is outlined. When the button is in an checked state, again the visual clue is prominent because the button is filled. When the button transitions from an unchecked to checked state, the change is evident as it transitions from outlined to filled.
The problem is when unchecking. When the button transitions from a checked to unchecked state, the button remains filled until a) the mouse is moved on device with a cursor, or b) another location on the page is touched on a touch device. The user obviously believes that they have not unchecked the button when it has in fact been unchecked and then proceeds to continue to attempt to uncheck the button.
The problem is even more evident when dealing with multiple checkboxes in a button group.
(See https://getbootstrap.com/docs/5.0/components/button-group/#checkbox-and-radio-button-groups)
I have tried using javascript to call blur on the checkbox's click event, and although that approach has a limited degree of success, it does nothing on touch devices as the virtual pointer for the device remains hovering over the button. I also tried calling focus on a different element on the page with the same result.
Does anyone have any suggestions?
Was submitted for bugfix here: https://github.com/twbs/bootstrap/issues/34664
I use bootstrap dropdowns on my top panel.
The problem is, that in mobile devices (touch devices), when I open one dropdown, to open another one I need firstly to click somewhere to close it and then just open the next dropdown.
For generally, I need two clicks to open other dropdowns. I need only one click (like on desktop).
https://peterlyshak.github.io/BidexAdmin
Thanks for help!
I tried with focus, select, triggering click/tap events but no luck.
I see Facebook sign up page implementing this.There is a exclamation mark. It will show up if you touch any of the birthday select control without changing it and then focus elsewhere. The interesting thing happens when you tap the exclamation mark on iPad Safari. The year options will show up. (It doesn't show on desktop Chrome which I'm using to type this ask).
So the question is how to implement the same behavior for iPad?
I put the picture of the Facebook sign up page at http://imgur.com/Hh6JHPW
Some code I tried:
$('#someselect').val('test');
$('#someselect').focus();
$('#someselect').click();
$('#someselect').prop('selectedIndex',0);
$('#someselect').mousedown();
$('#someselect').prop('size',10);
You can just use a hidden <label> with some Javascript to show it if the dropdown's value is the default.
jsfiddle
I'm having some strange issues in Safari on Mac desktop and on iOS on a site currently being built. It seems that when there are jQuery interactions with elements, the elements disappear. When I inspect the element, I can't see any properties that indicate why the element would be hidden. If I toggle one of the checkboxes on any of the CSS properties for the element, it reappears.
Steps to Recreate
In Safari, go to: http://bisqitstage.promotw.com/
Refresh the page using the refresh button (not by hitting return on the URL).
Click the darker area (intended checkbox) to the right of "I agree to the terms and conditions of the site.".
Here is where you should see a checkmark appear based on the jQuery event.
Right click the box area and choose "Inspect Element".
In the HTML inspector, within div.bisqit-checkbox click on div.glyphicon.glyphicon-ok.check.
Scroll down within the CSS inspector and toggle the checkbox next to any of the property options (for example, uncheck and then re-check width: 35px;).
The checkmark will now be displayed
Expected
After step 3, the checkmark should be displayed after step 3. When inspecting in step 6, if you chose "width" for instance, the property was already checked. Unchecking it and checking it again shouldn't change it's state - so why does it not display after step 3?
I'm having several issues similar to this within this site build. I've tried different jQuery versions as well as removing other components that might be interfering, but cannot seem to resolve the issue.
Browser Version: Safari 7.1 (although we've noticed it back to v6).
I've created a watermark/hint solution for a drop down where I absolutely position a label over top of a select element.
Unfortunately, when the user clicks where the label is, the drop down doesn't open - obviously the click is being blocked by the label. Is there any way to have it so when a user clicks on the label, the drop down is opened? I understand you can't open a dropdown via javascript but can you do something like hide the label when the click fires?
Edit: Creating a custom drop down like gmail does on their dropdowns is not a viable option.
CSS can handle that: add pointer-events: none to the label.
That's supported in all modern browsers.. except for current versions of IE (and Opera), so you'll still unfortunately have to use JavaScript.