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/
Related
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.
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'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.
first of all here is the link to jsfiddle: http://jsfiddle.net/HotFrost/RnNX3/6/
you can see that in chrome the graph layout inside the svg element, panned and zoomed ok. Whereas for IE (v9.0) it totally disregards the borders.
basically for this simple layout:
<div id="wrapper">
<div id="content-col"> graph
<div id="graphwidget_graphContainer" style="border: 4px solid purple;" ></div>
</div>
<div id="right-col"> menu </div>
</div>
IE and Chrome render graph differently.
I have tried to use different settings for width/height/remove them. I have tried to replace the divs with table cells.. Still same problem - in IE graph nodes are rendered above the svg element and then (when panned/zoomed) also go over the svg element borders.
Anyone can give some ideas how to fix it?
Thanks in advance!
HF