I am using Bootstrap v3.0.2 with bootstrap-hover-dropdown.min.js to make dropdowns visible on hover in main navigation menu.
For expanded menus I have removed href and put #. I noticed that expanded menus are not working in Safari.
Related
When I put a focusable element in the shadow DOM, OSX Safari doesn't include it in the tab sequence (unlike all other browsers). The button is visible, clickable but not accessible for keyboard users. Is this a known bug? Is there a way to handle it besides making the component tabbable and forwarding focus (which seems kind of gross)?
Here's what a minimal example looks like in Safari's console
<div class="host">
Shadow Content (Open)
<button>Click me</button>
</div>
I created this example by calling .attachShadow({"mode": "open"}) on div.host then setting its .shadowRoot.innerHTML to "<button>Click me</button>"
I'm having this issue in components I created. I tested the example above in Chrome and the button is included in the tab sequence as expected.
Safari doesn't enable tab navigation by default, it must be enabled via preferences.
Tab highlights the next text field or pop-up menu. Tab also highlights
buttons and other controls if “All controls” is selected in the
Shortcuts pane of the Keyboard pane of System Preferences.
Option-Tab highlights the same items as Tab plus all other clickable
items.
To swap the behavior of Tab and Option-Tab, turn on “Press Tab to
highlight each item on a webpage” in the Advanced pane of Safari
preferences.
https://support.apple.com/guide/safari/keyboard-and-other-shortcuts-cpsh003/mac
I am developing an application on xpages using Bootstrap. The main xpages has one tab container. In an action that is inside a button contained in a dialog (from the extension library), inside one of the tabs, in your oncomplete event I give a partial refresh on several elements. All are updated except the current tab that is all blank. Does anyone know if there is any restriction on using Bootstrap that is already shipped in the domino itself with the dojo tab container?
I have created a menu and inserted the generic menu widget onto a newly created page. I think by default it gives a verticle menu. I have tried various css codes found on the web to change it to a horizontal menu, but upon saving and refreshing the page I am not seeing any changes.
Can anyone advise me as to how I enable my generic menu to display the navigation links horizontally instead of vertically?
If I delete the menu and insert an html widget with code and links for a horizontal menu, other items such as my mini menu and footer menu display differently.
Thank you for your time
Regards
Amanda
I am working with IE11. After loading my website elements like checkbox, radio button, drop down arrow get automatically hidden then after hover on them they get visible then after click anywhere in page they again get hide. All this element are present and style are applied tested with developer tool but still they was giving problem. Then after check "use software rendering instead of gpu rendering" option from settings->Internet option->Advanced->"use software rendering instead of gpu rendering" everything got ok. Now my website element not getting hide all style applied perfectly. But I doesn't understand why this happen? How this setting fixed issues. Please any idea help!
I am working on a Javascript Based site, which uses the Dojo Framework.
I am using a DataPicker. I wish to change the background color of the datePicker, and hence I wish to look at where in the CSS is the color being set, so that I can override it in my CSS.
Usually I use FireBug and 'Inspect Element in FireBug' to view the HTML and CSS together. (or even Google Chrome's developer tools)
However this datepicker is a dynamically created component, and If I right click, or move my mouse into the Firebug window, the date picker is shutdown/destroyed. (You can check out the sample on the linked page itself)
Is there a way to inspect the CSS on these kinds of dynamic elements, using Firebug, or something else?
The best approach I've found for the dijit popup widgets is (using chrome)
Open the popup (in this case the date picker)
Right click on the element
Select "Inspect Element" from context menu
Chrome will open and transfer focus to the developer tools without blurring the focus of the page, keeping the popup open, allowing you to modify attributes and css rules and getting instant feedback.