Bootstrap dropdown menu closes its container menu when clicked - javascript

I have a Bootstrap dropdown menu on my website, it works fine on desktops and screens larger than 737px, but when it's less than that, the dropdown menu just closes the hamburger menu containing it.
I am using the latest Bootstrap through their CDN and I have checked through this website for answers and also checked their JavaScript to see if there was a problem, but I found nothing, I have also tried stopPropagation, but that didn't help neither.
What am I missing?

Related

Prevent responsive menu from auto-collapsing in Bootstrap

My responsive menu is auto-collapsing to "display none" when I click the menu button, in both directions: when I click to hide or when I click to show it.
I tried modifying styles, and main js but had no result. I realy can't figureoute what could be the problem.
I am using Bootstrap as framework and have an autoscroller animation, maybe there is the problem.
I let the link here: https://davidpulido.com.mx/
I'll be glad if you can helpme.

Bootstrap menu not working after the Bootstrap Dialog is called

I am having trouble on my project. I just incorporated the bootstrap menu and everything is working fine. But then I arrived to a situation where I need to call the BootstrapDialog.show() method. The dialog appears then, but when I closed the dialog, my menu is not working anymore, the sub menu's under my main menu are not showing. Does anyone encounter the same problem.
Thanks.

Switching from an open Bootstrap 3 dropdown menu to a different dropdown menu requires an extra tap on mobile

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

Drop down links not working in iOS

I have a Wordpress website that has a horizontal menu bar with a drop down sub-menu that appears when hovering over the parent menu item. The links to the sub menu works in a regular browser, however, when using my iPhone, the links to the sub menu do not work. It previously worked only in a long press mode, but I didn't want the long press mode so I added the following code in my CSS to remove the long press mode:
.navWrap .top-bar2 li.menu-item {
-webkit-user-select:none;
-webkit-touch-callout: none!important;
}
and I also added the following javascript (because the CSS didn't work and some people suggested the javascript solution):
<script type='text/javascript'>document.documentElement.style.webkitTouchCallout = "none";</script>
You can test this by going to the following link: http://sa4iserver1.com/~hoffer/ -- at this time, the only menu item that has a drop down sub-menu is the RENT menu item.
Any suggestions on how to make the sub-menu links clickable via iPhone/iPad would be greatly appreciated!

jQuery Slidedown - I search another effect but don't know the name

I'm working on a HTML version of the Office Ribbon to implement it in any HTML website.
Currently everything is working fine. I do have a button and when I click on it, a menu is shown.
This is done by using the jQuery SlideDown function:
$(this).slideDown({
duration: time
});
Here's a fiddle to demonstrate the effect: http://jsfiddle.net/Complexity/qwV84/
Now, when you open the fiddle and you click the "new items" icon, you see that a menu is rendered (it's slowed down just for showing you). And I do have a problem with the rendering of the menu. The top of the menu is rendered and than it goes to the bottom.
When you have Office 2013 installed open Outlook and click an icon to open a menu there. There the bottom of the menu is rendered just under the icon and then the menu is falling down and the top is being rendered. In fact, it looks like the menu is dropping down from behind an invisble white panel.
I would like to achieve the same effect but I don't know how. Anyone has an idea?

Categories