I'm using a version of Bootstrap CSS for this site and a live example would demonstrate this the best.
http://autorotation.org/jabilake/index.php?page=residential
Basically, on mobile screens, the parent nav element (li), "Projects", doesn't seem to work at all when you click on the actual word. However, click just right of the letter "s" and it works fine (i.e. goes to the page).
I tried a few CSS and JavaScript tricks, but no luck.
Any idea?
Thanks.
it only doesn't work when on the projects page or it's submenu pages. And its just the touch event not working. click is fine at that screen size, at least in my browser.
I believe the issue is with the custom data attributes. Only on those pages does your menu contain data-toggle= and data-target= for the Projects li. If css is controlling the dropdown, you don't need this and I think the problem will go away. If javascript is controlling the dropdown perhaps it is using these values. try just removing the attributes and see what happens
Related
I'm trying to click a button in a React app, and while it works on desktop, it does not work properly on mobile. I need to long-press or double-click, and play a little bit until the button finally works.
I have replicated my problem in this demo.
If you open the page on a desktop browser and attempt to open the hamburger menu, it should open right away. However, if you open it in mobile, it will not work right away. You will also see the menu jitter a little bit off-screen. Attempting to close the menu by clicking on the overlay has the same problem in mobile.
Why is this not working properly on mobile? How can I get the button to work when I tap it?
I added cursor:pointer to the button after seeing this somewhat similar post, but this doesn't help.
This problem has occurred in the past to me, and I was able to solve it using onMouseDown but it doesn't work this time, I'm guessing because I'm using a component that is imported from a package (react-burger-menu) and can't override its onClick function? I'm not sure what is happening.
EDIT: Solved. See my answer.
Turns out it works if I fix the stacking of elements. I had nested my navbar component inside the MapContainer, but this was making things wonky mobile-side. I moved my component outside the MapContainer, and things worked.
I still don't understand why it went wonky mobile-side and in iOS only, but this problem at least is solvable.
Fixed example is here.
My map token has been removed, so you can use your own to substitute, but it is not necessary to have the map showing to see the problem/solution.
When a bootstrap dropdown is open, opening another dropdown requires two taps. This is because of an overlaying div that swallows all other input in order to close the first dropdown.
This is a known bug. According to the bootstrap documentation:
On mobile devices, opening a dropdown adds a .dropdown-backdrop as a
tap area for closing dropdown menus when tapping outside the menu, a
requirement for proper iOS support. This means that switching from an
open dropdown menu to a different dropdown menu requires an extra tap
on mobile.
However, the behaviour is not consistent. The backdrop overlay is not applied to dropdowns within a .navbar-nav, and as far as I can tell, everything appears to work just fine for me on my iPhone (Safari).
Check out this jsfiddle to see the different behaviours.
Does anyone know more about the iOS-specific issue that this is supposed to be for, and does anyone have a browser-compatible workaround for this?
I've posted some potential solutions in this jsfiddle.
1) Hiding the backdrop
.dropdown-backdrop {
display: none;
}
2) Applying .navbar-nav to the dropdowns (and removing the negative margins).
Working on Windows (Chrome) and iPhone (Safari). Not tested any more than that. Does anyone know any issues with these approaches? It seems too easy...
Apparently this is due to "click" events not bubbling up to the body properly in iOS Safari, which would make Bootstrap unable to listen for dismiss clicks with one global handler. It appears that a different workaround has been added for Bootstrap 4 so that a backdrop is no longer required:
https://github.com/twbs/bootstrap/pull/22426
I'm having an issue with a jQuery-driven accordion drop-down menu when viewed on a mobile device. The problem is when viewed in either portrait or landscape, the drop-down menu quickly flashes (temporarily opens revealing all the links) upon page load, almost flickering. Refresh the page, it does the same thing.
Also, when viewed in landscape mode, the tabs in the drop-down menu wiggle up and down briefly when you click on them.
I'm not sure if this is a jQuery/JS issue or maybe there is something I need to do with CSS? I've done some research and cannot find a solution to this problem.
Can someone please take a look at the example here: http://clients.iconcw.com and let me know how to fix this problem?
Thanks very much.
I'm using Sencha Touch 2.1. I have Ext.carousel.Carousel container and bunch of Ext.dataview.Dataview as pages inside carousel.
On each dataview I have a lot of buttons (rendered using CSS - so they are not buttons controls but simple divs with fancy styles). I'm trying to catch itemtap event when user taps on the "button".
Everything works fine in browser on the desktop. On the iPad however touch sensitivity is different and often I will not get itemtap event when user not carefully and somewhat slowly taps on the button. Carousel would start moving slightly as in swipe event was detected and carousel needs to change pages.
I tried to replace itemtap and use itemtouchstart instead. Button responsiveness got significantly better, but I often see false positives when user legitimately swipes between pages.
I'm stuck. I want to have responsive buttons and also swipe across to change pages.
Anybody seen something similar? Or solve it somehow?
This is a known issue check out this forum post in sencha forum. Tragically i have the same issue & at the moment it cannot be solved using sencha alone perhaps a solution is available in phonegap but i dont know.
I have a problem in the page whose URL can be seen below:
http://hero.mynet.com/new/
There is a tabbed structure at the middle bottom of page.Each tab consists one carousel working.And each carousel item (image) can be shown in an overlay when they are clicked.
I used jQuery 1.3.2 (I know it's old but I cannot change because of other depencies), jQuery UI 1.7.3, jCarousel 0.2.8 and FancyBox 1.3.4 to build this.
Problem can be seen in the screen shots of Internet Explorer and Chrome when 2nd or 3th tab clicked and prev button clicked.
What can caused this, I tried many things to fix this but none of the fixed my problem.
What do you recommend? It's difficult to change all structure to a new one because of the time planing of this job.
tHanks to all answers already now
Internet Explorer Screen Shot
Chrome Screen Shot
This problem is because you are trying to create the carousel after you have created the tabbed interface. So probably jcarousel is trying to render the carousel inside a container whose display property is set to null (a non-active tab) . Since position and many other properties of this container can not be reliably determined, this will fail in most browsers. Please try rendering the carousel before, once the carousel is rendered, then create the tabs.