I'm encountering a problem where radio buttons work inconsistently.
The buttons only respond on some touch devices (iPhone & iPad) when the right side of the outer element is touched.
Desktop works fine.
If the user touches the radio button directly the button doesn't respond.
The weird thing is this doesn't happen on all touch devices. Some will work fine while others won't.
I tested on iPhone X and it works fine but iPhone 11 and iPad don't.
It works on mobile Chrome but not Safari and Firefox.
I've included the js, HTML, and css of one radio button below.
Thanks for you any help.
Js
document.querySelector("#s89fdf874ee_services > li:nth-child(1) > div > label")
HTML
<label><div class="icheckbox_square-blue checked"><input type="checkbox" id="s89fdf874ee_services_0" name="s89fdf874ee[services][]" value="2" checked="checked" style="position: absolute; visibility: hidden;"><ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins></div><span class="control-label__text">
Buyback</span></label>
CSS
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
--zd_bold: LatoBold,var(--zd_fallback_font);
--zd_heavy: LatoHeavy,var(--zd_fallback_font);
--zd_fallback_font: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--zd_regular: LatoRegular,var(--zd_fallback_font);
--zd_semibold: LatoSemibold,var(--zd_fallback_font);
font-size: 14px;
line-height: 1.42857143;
color: #333;
font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
list-style: none;
box-sizing: border-box;
display: inline-block;
max-width: 100%;
min-height: 20px;
padding-left: 20px;
margin-bottom: 0;
cursor: pointer;
font-weight: 700;
margin-left: -20px;
Related
I know the title is familiar, but the answers weren't !
The answers here :
Button onclick event not working in iOS unless you go away from app and back, then it works
OnClick not Working on Ios11
Safari on iOS 9 does not trigger click event on hidden input file
onclick event doesn't work on iphone
Click events not firing on iOS
How do I use jQuery for click event in iPhone web application
jQuery click events not working in iOS
JavaScript OnClick not working on iOS
Make onclick work on iphone
https://www.quirksmode.org/blog/archives/2010/10/click_event_del_1.html
https://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
didn't work for me, so before marking this question as duplicate, check my code :
THIS IS HTML :
<script>
function showalert() {
alert("I am an alert");
}
</script>
<div id="replace1" >
<br><br><br>
<a class="btnxyspace" onClick="alert("sometext");"><input type="button" value="Hi"></a>
<!-- <button value="HI" onclick = "showalert();">-->
<br><br><br>
</div>
THIS IS THE CSS :
#import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,300,300i,4 00,400i,700,700i,900,900i');
* {
font-family: Montserrat;
font-size: 14px;
}
.U3Gxm-butn {
border: 1px solid #E77817;
-webkit-border-radius: 15px;
border-radius: 15px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 5px;
color: #E77817;
cursor: pointer;
background:white;
margin:0 auto 10px;
width: 100%; /* Set a width if needed */
display: block; /* Make the buttons appear below each */
float: left;
}
.U3Gxm-butn:focus, .U3Gxm-butn:hover {
background: #E77817;
outline: 0;
color: #fff;
}
.actn-disabled{
cursor: not-allowed !important;
background: #dddddd !important;
color: black !important;
pointer-events: none;
}
.actn-selected{
background: #fba250 !important;
color: black !important;
}
#loading
{
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image
{
position: absolute;
top:30%;
left: 40%;
z-index: 100;
}
td {
word-wrap: break-word;
}
/* Below class use for op position */
.xspace{
position: relative;
top: 20px;
}
.xspace:first-letter{
position: relative;
top: 20px;
text-transform: capitalize;
}
.xspacedown:first-letter{
padding-bottom: 0%;
text-transform: capitalize;
}
.xspaceop{
position: relative;
top: 50px;
style:overflow-x:auto;
}
.xyspace:first-letter {
text-transform: capitalize;
}
#replace1 > .xyspace{
display:inline-block;
}
#replace1 > .xyspace:first-letter{
text-transform: capitalize;
}
.ntfnbkpjob1{
cursor:pointer;
}
I have created separate HTML and CSS files in my xCode project and this is how i am loading my html file in swift :
let url = Bundle.main.url(forResource: "webview", withExtension: "html")
webView.loadFileURL(url!, allowingReadAccessTo: url!)
Have tried everything possible, changed CSS to cursor:pointer, did everything mentioned in these solutions, nothing seems to work.
These solutions might be relating to their problem.
Every problem has different answer !
Can anyone suggest anything that works in this scenario ?
<a class="btnxyspace" onClick="alert("sometext");"><input type="button" value="Hi"></a>
Shouldn't your on click look like this onClick="alert('sometext')" ?
I'm guessing you are talking about this one as button is commented out.
I'm totally perplexed by this - the app is a simple React project, but the button is simple HTML with CSS styling. The text inside the button element - which should be centered - works fine on all desktop browsers, but everything is right-aligned on iPhone. The button includes a FontAwesome icon and some text, which are on different lines, but when I remove either it doesn't make a difference, the problem persists. I don't have the ability to inspect the code on my phone, and all desktop iPhone emulators online don't show the problem. Does anyone have any idea what might be causing this?
JavaScript/JSX (state contains FontAwesome icon and text):
<div className='textcontainer'>
<button disabled={this.state.disabled}
onClick={e => this.handleOpen(this.props.id)}
className='opencapsule'
id={this.props.title + '_button'}>
{this.state.clock}
<span className='opentext'> {this.state.status}</span>
</button>
</div>
Relevant CSS:
.textcontainer {
padding: 5px;
display: flex;
}
.opencapsule {
margin:0 auto;
color: white;
width: 80px;
height: 80px;
font-size: 2.5rem;
line-height: .8rem;
border-radius: 3px;
border: 1px solid white;
background-color: gray;
cursor: pointer;
outline: none;
}
.opentext {
font-size: .8rem;
line-height: 1rem;
}
Live version of current app: https://timecapsule.now.sh/capsules
This should fix it:
On your button element, .opencapsule, add display: flex; and justify-content: center;, like so:
.opencapsule {
margin:0 auto;
color: white;
width: 80px;
height: 80px;
font-size: 2.5rem;
line-height: .8rem;
border-radius: 3px;
border: 1px solid white;
background-color: gray;
cursor: pointer;
outline: none;
display: flex; //add this
justify-content: center; //add this
}
I'm not completely sure why the icons are not being centered on mobile, it has something to do with the behavior of the <svg>. I tried many other ways of centering it on iphone, such as, text-align: center;, and margin: auto; and others, but the only way that worked for me on mobile was to center the icon by making the button display: flex and justify-content: center.
Try adding the webkit center to .opencapsule
text-align: -webkit-center;
How do I make this work? I keep fiddling around with the codes but I get no luck. I'm trying to make a responsive mobile menu. I tried searching google and can't find any solution. Thanks
<div class="sidenav" id="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×
</a>
Home
Order
About
</div>
<div class="main_header">
<div class="main_nav">
<span onlick="openNav()">☰</span>
</div>
<h1>Treat your tastebuds</h1>
Order a coffee
</div>
<script type="text/javascript">
function openNav() {
document.getElementById("main_nav").style.width = "100%";
}
function closeNav(){
document.getElementById("closeNav").style.width="0";
}
</script>
Here is the CSS
.sidenav{
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition:0.5s;
}
sidenav a{
color: white;
text-decoration: none;
display: block;
transition: 0.3s;
font-size: 16px;
font-weight: 100;
text-align: center;
padding: 1em 0;
}
.main_header{
background-image: url(coffee1.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
text-align: left;
color: white;
width: 100%;
height: 750px;
}
.main_header h1{
font-size: 36px;
font-weight: 900;
margin-left: 2em;
margin-top: 8em;
}
.btn_one{
margin-left: 11em;
color: white;
background-color: darkslategray;
text-decoration: none;
padding: 1em 2.5em;
}
.main_nav{
height: 40px;
}
.main_nav span{
color: white;
font-size: 30px;
text-decoration: none;
line-height: 40px;
margin-left: 0.25em;
float: left;
cursor: pointer;
}
Utilizing the bootstrap framework is an option.
Here is an example that provides a side navigation.
https://blackrockdigital.github.io/startbootstrap-simple-sidebar/
You have various typos in your code as well as undefined elements that you're attempting to manipulate.
Firstly, you have:<span onlick="openNav()">☰</span> which contains a typo. It's 'onclick', not 'onlick'.
Next, you're attempting to manipulate an element "main_nav", but in your HTML and CSS, you defined main_nav as a class (using a period). So, if you change your html to <div class="main_nav"> your issue for that will be fixed.
I'm unsure what your final menu design will be, but those changes will fix the problems you're running into.
I'm trying to get a popup to show on load once per session. I'm seeing it okay from my end but my client is saying that he's not seeing it after the first time even after restarting his browser and clearing the cache.
Is there something I should change with the code below? Also, I'm unable to click the close button on mobile with touch. How can I make #popup-close respond to touch?
HTML
<div id="popup-wrap">
<div id="popup">
<div id="popup-close">×</div>
<a href="http://google.com/" target="_blank">
<img src="image.jpg" width="100">
</a>
<h2>We are featured this month in Architectural Digest!</h2>
Read the article »
</div>
</div>
JS
if (localStorage.getItem('popState') != 'shown'){
$("#popup-wrap").delay(2000).fadeIn();
localStorage.setItem('popState','shown')
}
$('#popup-close').click(function(e) {
e.preventDefault();
$('#popup-wrap').fadeOut(); // Now the pop up is hidden.
});
CSS
#popup-wrap {
background: #fff;
box-shadow: 1px 0 3px #999;
display: none;
font-family: 'montserrat', sans-serif;
height: 210px;
left: 50%;
margin-left: -250px;
margin-top: -105px;
opacity: .8;
position: absolute;
text-transform: uppercase;
top: 50%;
width: 500px;
z-index: 11;
}
#popup {
padding: 40px;
position: absolute;
}
#popup-close {
cursor: pointer;
font-size: 36px;
position: absolute;
right: 10px;
top: 0;
}
#popup img {
float: left;
margin-right: 20px;
}
#popup h2 {
color: #222;
font-size: 20px;
margin-bottom: .5em;
}
#popup a {
font-size: 12px;
text-decoration: none;
}
http://jsfiddle.net/23gu3L0h/
You may try to change localStorage to sessionStorage like I have done
In this Fiddle.
localStorage is meant for longterm use where as sessionStorage is more shortterm. Here is another post with some answers explaining them further.
It shows up once until you either clear your cache or restart your browser.
Also the I was able to close the pop-up from my phone in the fiddle.
Hope this helps.
Am developing windows phone app with backbone.js using phonegap. When i try to use a custom select box like this image. it always shows the default select box like this
Why it is not displaying the custom select box?
My Code
HTML:
<select class="custom-select custom-select-smaller no-border" id="lang-select">
CSS:
.custom-select {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
border: 2px solid #dfdfdf;
color: #6b6b6b;
height: 38px;
font-size: 11px;
line-height: 38px;
padding: 0 6px;
position: relative;
width: 100% !important;
display: block !important;
}
.custom-select.custom-select-smaller {
height: 34px;
line-height: 34px;
}
.custom-select.custom-select-smaller:after {
top: 14px;
}
#lang-select{
z-index:~1000;
}
Styling a element is always tricky and not reliable.
You may wanna add the following styles to get it to work in webkit & firefox
-webkit-appearance: initial;
-moz-appearance: none;
appearance: none;
text-indent: 0.01px;
text-overflow: '';
But it's not possible (so far as I know) to make it work in IE. If you wanna get consistent results, try to use ul+li with hidden tags.
or just use a plugin like http://adam.co/lab/jquery/customselect/