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;">
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)
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...
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;
}
I'm working on my new portfolio and although it's far from finished, i'm getting close to finishing the design. There's just one problem atm that I don't know how to get rid of. If you go to http://minimalito.be/index.html you'll go to the homepage, then when you click on 'about' you'll notice that the footer very briefly jumps to the top of my page...
When you go from the homepage to the about section, not only the footer moves, but the whole content briefly moves up. Would anyone know why?
The content is loaded with ajax, so that's probably got something to do with it, maybe i'm positioning some divs wrong? I don't really see it.
This is rough layout of my code, for more detailed code + example, you can check the website itself of course.
Thnx!
<div id="content" class="block">
<div id="header">
<nav class="centered">
<h2>minimalito.</h2>
<ul>
<li>about.</li>
<li>work.</li>
<li>contact.</li>
</ul>
</nav>
<h1 id="contact" class="ninja">minimalito#info.be</h1>
</div>
<div id="load">Loading</div>
<div id="page">
</div>
<div id="footer">
</div>
</div>
Your #header has a fixed position so it is not part of the document flow.
#content has a top margin that pushes both #content and #footer down so that they are positioned below #header#.
Now when you click on one of the menu links at the top fadeOut is called on #content which sets display: none; on it. With nothing left to push elements that are part of the document flow down anymore #footer is moved all the way to the top of the page until the new content is asynchronously loaded.
Instead of having fadeOut set display to none consider just changing the opacity and replace the content when the element is invisible.
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/