I'm using a drawer-panel from the core_elements, to display a side menu and a main part.
<core-drawer-panel>
<div drawer>
<core-menu selected="0">
<core-item icon="favorite" label="Menu Label"> </core-item>
</core-menu>
</div>
<div main>
<ng-view></ng-view>
</div>
</core-drawer-panel>
This work perfectly using both Dartium and Chrome, but in Firefox the views connected to ng-view get messed up. Removing the core-item helps to recover the layout in Firefox, but having a menu is convenient. Replacing the menu with a standard <ul> helps until you put a link in the list.
The following works fine:
<core-drawer-panel>
<ul class="menu">
<li><core-icon icon="favorite"></core-icon>Menu Label</li>
</ul>
...
While adding a link anywhere in the drawer-panel messes up the layout in Firefox.
Why would this behavior occur? Adding a ng-click to the item results in the same layout problems, as when using a link.
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 am using a responsive image slider which I am trying to put inside a colorbox however firstly when the colorbox pops up, it opens a blank tiny content box, I want the image slider to appear within the colorbox. The content opens up fine in the colorbox live on my site so can't understand why I can't replicate this in the fiddle.
Secondly, it seems that colorbox doesn't adapt it's size as the browser window is shrunk, is this something that can be changed? I tried setting max-height and max-width in colorbox.js to 100% but that doesn't make any difference.
I have spent most of yesterday trying to sort this but had no luck so far so any help you could give would be appreciated.
The HTML:
<a class="colorbox-link fade_hov" href="#port1">Click to open colorbox</a>
<div style="display: none;">
<div id="port1">
<div>
<div id='ninja-slider'>
<ul>
<li><div data-image="http://www.yourdesignpartner.co.uk/dev/wp-content/themes/colorroom/ninja-slider/img/md/1.jpg"></div></li>
<li><div data-image="http://www.yourdesignpartner.co.uk/dev/wp-content/themes/colorroom/ninja-slider/img/md/2.jpg"></div></li>
<li><div data-image="http://www.yourdesignpartner.co.uk/dev/wp-content/themes/colorroom/ninja-slider/img/md/3.jpg"></div></li>
<li><div data-image="http://www.yourdesignpartner.co.uk/dev/wp-content/themes/colorroom/ninja-slider/img/md/4.jpg"></div></li>
<li><div data-image="http://www.yourdesignpartner.co.uk/dev/wp-content/themes/colorroom/ninja-slider/img/md/5.jpg"></div></li>
</ul>
</div>
</div>
The CSS and JS is linked to externally in this Fiddle THIS FIDDLE Here is the fiddle without the colorbox which, as you can see, is responsive.
So I just need a way of being able to click a link which opens up the slider in a popup window, if there are any other options or perhaps a mobile responsive lightbox available please let me know.
Used fancybox instead of colorbox which it seems is fully responsive to mobile so problem solved.
for some reason this navbar is not rendering correctly on the browser :
<header data-role="header">
<div id="navbar-personalize" data-role="navbar" class="my-navbar">
<div data-align="left">
<img src="../../Images/dashboard6.png" alt="Dashboard"/>
</div>
<span data-role="view-title">Cart Summary</span>
<div data-align="right">
<a href="#merchandise-otherorders-view">
<img src="../../Images/whoelse6.png" alt="Who else is going?"/>
</a>
</div>
</div>
</header>
I have other navbars just like this one all around my index file, and they all work fine, except for this one. It seems that KendoUI isn't initializing it all. By inspecting the code I can see that it's missing all of kendo's styling (like "km-navbar" and such).
It may have to do with the fact that I'm defining this header in each one of the views inside the file, instead of defining it in the app layout, but for some reason defining it inside the app layout doesn't work for me, it simply doesn't render at all.
I'm out of ideas, can somebody help me?
Thanks
I had this problem today. Make sure that kendo.mobile.min.js is included on your page. The docs don't say to put it in, but adding that made it work for me.
I am attempting to rewrite a multi-page website into a SPA using jQuery UI Tabs. In the shell page, one tab references an id within the page, while the rest of the tabs load other pages via AJAX. It looks something like this:
<div id="tabs">
<ul id="nav">
<li>HOME</li>
<li>LEARN</li>
<li>LISTEN</li>
<li>SUPPORT</li>
<!--etc.-->
</ul>
<div id="home">
<!--blah blah blah-->
</div>
</div>
Within learn.html, I have another set of UI tabs that are set up the same way:
<div id="tabs2">
<ul id="nav2">
<li>About Us</li>
<li>Sponsors & Donors</li>
<li>Staff & Board</li>
<!--etc.-->
</ul>
<div id="about">
<!--blah blah blah-->
</div>
</div>
The problem arises in clicking a tab within learn.html: the event of clicking one of the AJAX tabs within this AJAX tab bubbles up to the window, and sponsors.html or whatever loads in place of the shell page.
I have tried event.stopPropagation() but it did not work; using event.preventDefault on the tabs prevented the tab functionality in the first place. What else is there to do?
You could try adding the result of the ajax call to a specific div. In the success function of the ajax call.
Are you calling preventDefault on the click of the tab, or the anchor? You might need to setup a separate handler for the anchor click.
$("ul#nav2 li a").click(function(e) {
e.preventDefault();
});
My problem is gone now...
The page I had loading via AJAX had its own doctype and head tag and the whole shebang. After I removed that, I no longer had any problems.
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/