I have a dropdown on my top menu, and for certain browser window widths, the dropdown gets much too big and moves way over to the left. I'd like to have it always be the same size and stay in the same position, even if that would mean going off the edge of the screen. (Currently it moves even before it would go off the edge though)
Album with screenshots of correct/incorrect behavior
Here is a fiddle showing the behavior. Code for the dropdown is:
<a href="#"
data-dropdown="drop1"
aria-controls="drop1"
data-options="is_hover:true;"
aria-expanded="false"
class="button custom">
Link2
</a>
<ul id="drop1" class="tiny f-dropdown content" data-dropdown-content aria-hidden="true" tabindex="-1">
<li>Drop1</li>
<li>Drop2</li>
<li>Drop3</li>
</ul>
Thanks!
This works well for me, hope it will resolve your issue.
Remove width:100% from the class
.f-dropdown.content{
width:auto!important;
}
Related
I have few dropdowns on my page, with buttons opening and closing a dropdown. Everything goes well after initial page load, but after changing to a different page, the dropdown opens with a click, but never closes. It seems that button's aria-expanded is stuck on true and the dropped down div has classes collapse open, which tries to collapse but won't ever do it (clicking the button gives the div collapsing class and then returns).
I have no idea why this happens and and if it's got to do with Liferay, freemarker, css or any of those...
This is my application display template:
<div id="a_language_selector">
<button
aria-controls="a_language_list"
aria-expanded="false"
role="button"
data-toggle="collapse"
data-target="#a_language_list"
>
<!-- CHANGE THIS -->
<#liferay.language key="EN" />
</button>
<ul
id="a_language_list"
class="panel-collapse collapse"
aria-labelledby="a_language_list"
>
<#if entries?has_content>
<#list entries as navigationEntry>
<li aria-label="${navigationEntry.getName()}">
<a href="${navigationEntry.getURL()}">
${navigationEntry.getName()}
</a>
</li>
</#list>
</#if>
</ul>
</div>
The answer was found and has to do with Liferay's own javascript (SennaJS)!
Changing a page in Liferay doesn't update the whole site and leaves old information lying around the session, breaking the collapsing.
I added this line to my portal-ext.properties and while it now loads after all page changes, it works well!
javascript.single.page.application.enabled=false
More information found here (help.liferay.com)
Please open Microsoft Edge and go to this site here: https://www.bodecanada.com/
Click on the Scroll button at the bottom of the blue box at the top of the page. Notice that it doesn't scroll further down the page. If it does, try it a few times. It will eventually stop working. This bug is only replicable in Edge.
We developed this site in Vue.js. This is the code for the scroll button:
<div id="scroll-wrap">
<a #click="$vuetify.goTo('#section2')" class="white--text" style="margin:0 auto;">
<p class="white--text" style="font-size:12px;">Scroll</p>
<v-icon color="white" style="width:100%; text align:center;">expand_more</v-icon>
</a>
</div>
Can anyone tell why it won't always scroll in Edge? Thanks.
You could directly use <a> tag href attribute link to an element with a specified id within the page.
<a href="#section2" #click="$vuetify.goTo('#section2')" class="white--text" style="margin:0 auto;">
I just updated Firefox to 48.0.1 from 48.0 and now I'm seeing an issue with the Bootstrap tooltip. Looking at the HTML in Firebug, it appears that Firefox is adding a new <div> at the bottom of the page that is not in the .jsp:
<div id="tooltip404721" class="tooltip fade top in" role="tooltip" style="top: 162.4px; left: 1220.5px; display: block;">
<div class="tooltip-arrow" style="left: 50%;"></div>
<div class="tooltip-inner">Delete</div>
</div>
This only happens if the tooltip is attached to a button - links are not affected. The links and buttons are column elements in a jQuery DataTables table. The tooltip portion of the code for link vs. button is identical.
Link:
<td><a class="btn btn-info btn-xs" href="<c:url value='/recipe/viewRecipe/${recipe.id}'/>"
data-toggle="tooltip" data-placement="top" title="<spring:message code="tooltip.view"></spring:message>">
<span class="glyphicon glyphicon-list-alt"></span></a>
Button:
<td><button class="btn btn-danger btn-xs" type="button" id="delete${recipe.id}" onclick="deleteRecipe(${recipe.id},
'<spring:escapeBody javaScriptEscape="true">${recipe.name}</spring:escapeBody>')"
data-toggle="tooltip" data-placement="top" title="<spring:message code="tooltip.delete"></spring:message>">
<span class="glyphicon glyphicon-remove"></span></button>
This DataTables-specific setting is in a .js file included on the page:
$('[data-toggle="tooltip"]').tooltip({
container : 'body'
});
Removing the above gets rid of the extra <div> but then the tooltip no longer appears with Bootstrap formatting. Adding data-container="body" to the button itself didn't work either.
Any ideas?
EDIT:
Although I just recently noticed the issue I downgraded to 47.0.1 and still see the problem. I will keep downgrading to find out which version this starting appearing in. I don't think it's my code because the production version has the same problem as my dev version. Also, this does not happen in Chrome but it does in Edge.
I found the problem. I have a function that's applied to all pages that sets the input focus for form pages to the first form control. This is because the menu contains a search input and button, which would otherwise get the focus instead of the first form input.
function setInputFocus() {$(':input:visible:enabled:eq(2)').focus();}
For some reason that I don't remember now I moved the code to toggle the tooltip (see question) above this focus code. That meant that the first button in the first row of the datatable ended up getting the focus, hence the tooltip being visible when the page was displayed. Moving the tooltip toggle after this focus code fixed the problem.
Obviously, I should be more careful about site-wide code that is specific to a particular issue but ends up being applied to all pages...
Is it possible to navigate using keyboard to the drop down menu using arrow keys(up/down) for JAWS users?
Here is the code:
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Dropdown link1</li>
<li>Dropdown link2</li>
</ul>
</div>
Steps:
1. open JAWS 15.0
2. focus on button with drop down menu
3. Press enter key
4. Press Up/Down key to move focus
Expected results:
Focus should be visible
Actual results:
1. Focus is invisible after JAWS started
2. Focus is visible if JAWS not start
http://jsfiddle.net/fewu2/t8q71q8f/
A good way to prevent Virtual Cursor mode from becoming activated when pressing "up" or "down" buttons via the keyboard is to use the role of application in a parent element.
If you are using Javascript to control navigation between the <li> elements, try this:
<div role="application">
<div class="btn-group" role="group">
...
</div>
</div>
Try giving your dropdown option li elements a role o menuitem.
In NVDA at least, I believe, which works very similarly, coming across a dropdown like this will trigger it to go into what Jaws would call "forms mode", which means you can use the arrow keys.
If this doesn't work, try moving the user's focus after clicking that dropdown button onto the first li of the menu.
I do have some code that handled this satisfactorily, and I remember that one of these were what fixed it for me. I'll go find out specifically which, if not both.
HTH.
I have tried all the suggestions on here I just can't seem to get mine to pop-up in front of my stylesheet in IE. Works in firefox and chrome. Here is a very basic example of my layout.
the website is gulfstreamdata dot com . If you add anything to the cart and then in the top-right click on "expand" it drops down whats in your cart, but in IE it pops-under the template. :(
<div class="vmCartModule" style="position:relative; z-index:900; ">
<div id="dropdown" style="position:absolute; z-index:901;">
</div>
</div>
I tried making both z-index values the same and i tried making the outer div higher. Tried about everything I could think of in IE developer tools to no avail.
Anyway since it is positioned in a position you know, maybe you could detach it from the parent div, and move it after its actual parent div, so it will be drawn on front (also removing the z-index values).
<div class="vmCartModule">
</div>
<div id="dropdown" style="position:absolute; z-index:1;">
</div>
you shouldn't have problems in positioning it relative to the body, since it's on top right of the site.
EDIT
If it pops under your template, move that div to the bottom of your website, maybe right before </body>. I had the same issue with many menu and sub menus and it always worked perfectly.
Do this:
<div id="dropdown" style="position:absolute; z-index:901;">
//your content
</div>
<div class="vmCartModule" style="position:relative; z-index:900; ">
//your content
</div>
See demo in IE8 : http://jsfiddle.net/WtWqX/8/