I am using the offcanvas plugin from Jasny Bootstrap to implement a menu. It works as expected on a desktop browser. However, on mobile (iPhone 6 to be exact) the menu does not dismiss if the user clicks outside the menu. On a desktop browser, when an offcanvas menu is displayed, clicking outside the menu area dismisses the menu. Am I missing something, is this a bug, or is this expected behavior?
I reproduced this problem comparing desktop Chrome and iPhone Chrome using the supplied Jasny Bootstrap menu sample:
http://www.jasny.net/bootstrap/examples/navmenu-push/
tyipss!
Perhaps, it's a bug, though it looks like I can reproduce it only on a real iPhone6 (not in Chrome dev tools).
You can hide the menu explicitly in its callback function, like here:
$('.your-menu-selector').on('shown.bs.offcanvas', function() {
$('.your-backdrop-element').on('click', function() {
$('.your-menu-selector').offcanvas('hide');
});
});
Related
I am facing a issue regarding Extjs Menu. When we click on user icon (iconCls)then handler of menu is not working in Mozilla browser.
Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/29vm
In my react / redux application, on click of a particular button, I want to scroll up at a particular position.
It's working fine in firefox, chrome and Safari. But it is breaking in Blackberry access browser.
Can someone provide me the solution for it . I have already used approaches like window.scroll, scrollTo, scrollIntoView,
jquery approach:
$('html, body').animate({
scrollTop: $("#elementID").offset().top
}, 2000);
and focus()
All these approaches are not working in Blackberry Access browser.
I'm developing a MEAN application that needs to look good on mobile browsers. At first I was trying and failing to use Bootstrap to make this responsive, as I didn't realize Angular was clashing on the Bootstrap and JQuery JS libraries that Bootstrap depended on.
So I found Angular-UI project on GitHub...sorry for no link but I don't have enough reputation.
I'm trying to get the Collapse Navbar to be responsive on a mobile device. (responsive meaning it adjusts to the "hamburger menu" and the names of the links no longer appear in the menu)
I'm failing to get this to work within the bounds of my Node application.
To isolate the issue, I took the HTML and JS from the plunker referenced by the Angular-UI Bootstrap example (which, by the way also appears responsive to small displays when viewed from a iPhone or Samsung Edge) and made a stripped down Node app, which basically returns what is in the Plnkr example, but that still doesn't appear responsive when viewed from a mobile phone browser (I tested mobile Chrome, Safari, and Firefox)
See screenshot of sample app on OpenShift cloud:
http://angbootstrapnotresponsive-215api.rhcloud.com/assets/
This sample is not responsive
Note: If I view my sample in "responsive" mode in the dev tools, or simply resize my desktop browser window, the menu links fold up into that hamburger menu as desired. Only when I try to use the mobile browser from either iPhone 6 or Samsung Edge this responsive Navbar isn't responsive.
thanks in advance for any ideas!
I'm trying to get a Google Chrome Extension to run as a Firefox Webextension. My original Problem is that the popup has no height. Besides that I could not for the life of me figure out how to inspect the DOM of the popup.
Btw the popup is just an HTML file and it is defined in browser_action.default_popup.
The bugs referenced in #minj's comment above are resolved in recent versions of Firefox. You can debug popups now. MDN explains it well; in brief...
enter about:debugging in the URL bar.
In the left-hand menu, click This Firefox (or This Nightly).
click Inspect next to your extension to open the "Extension Toolbox".
Check the option to "Disable Popup Auto-Hide" in the Extension Toolbox
then you select which HTML document you mean to debug (in this case it would be your popup HTML code) using the context switcher ("select an iframe as the currently targeted document")
After doing this, the popup stays on the screen and the inspector contains its HTML. I'm doing it now for the first time (in Firefox 49) and it's working well.
It's not currently possible since the popup closes automatically and there is no DOM view available. See bug 1236944 and bug 950936.
Popup sizing does not seem to work correctly in Firefox. There are a bunch of bugs related to it.
In my application, I have a div (iframe) that I am hiding/showing when a button is clicked, which displays the content of my .xap file. When I click the button to hide the div, I see the Silverlight frame disappear, and when I click the button to reshow the div, the Silverlight App reloads. Sometimes it'll appear blank too, but when I right-click the area, it has "Silverlight" listed in the context menu.
According to this post, the reloading is a FireFox bug.
Does anyone have a work around to the reload?
In IE, the div appears without having to reload the Silverlight App. I would like to get FireFox to have the same behavior. More over, I would like to stop FireFox from making the div content blank.