Bootstrap menu not working after the Bootstrap Dialog is called - javascript

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.

Related

Bootstrap dropdown menu closes its container menu when clicked

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?

Kendo Panel Bar not working for alternative load of the panel

I have a requirement where i have to show a popup on click of a button and in the popup i have to show 2 panels. But on alternate click of the button when the popup appears, nothing happens on clicking the panel. I had faced a similar type of issue where a grid was not loading properly on alternate click of the tab where it was present. I just emptied the grid using $("#GridId").empty before every load and it worked. But i don't understand how to implement that concept in case of panel. I am using Kendo panels and grids. I am setting the panel items using <ul> <li> tags. It's working when i give expandMode: "single" for the panel bar but my requirement is to show all the panel dropdowns. Can someone help resolve this issue?
I solved the issue by adding this line $("#Gridname").kendoPanelBar() in the $(document).ready function of the js file

Menu Links not working in Mobiles/Tablets

I have a AngularJS application which has a left to right menu slider of bootstap.
The problem is on clicking the links in the menu,page is not navigated.
This problem only occurs in every Mobile and Tab device not Laptops/Desktop.
On clicking the menu item,page should navigate and the menu should go inside right to left slider,but only the menu goes in.
I know the click event is workig as the menu goes in on a click event.
What could be the issue.
I tried the z-index, to check if other part of the pages are overalaping with menu but it doesnt make any diference.
Bootstrap Javascript components will never work with Angular JS views
because the views in Angular loads via HTTP request which mean when bootstrap javascript fires there is no DOM element to attach event listener
The solution is to use Angular Bootstrap
https://angular-ui.github.io/bootstrap/
all component is Angular directives so it fire after views loading

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?

Bootstrap modal dialog tabbing in behind page

When I initialize and show bootstrap modal dialog, all elements on the page behind the dialog and expose mask are still reachable by tab navigation.
Here on official Bootstrap page that is not the case. There is no any specific code for this, just simple modal show.
Any ideas how to disable tabbing behind the modal?
Consider migrating to Bootstrap 3, where this is not an issue.

Categories