I've got a fairly basic core-drawer-panel setup with a core-header-panel inside another core-header-panel in the main panel of core-drawer-panel. With me so far? OK.
Now in that container I have a paper-fab, which is great except it appears on top of the drawer when it slides out. I've tried messing about with z-indexes but can't seem to affect the drawer's z-index at all.
Anyone faced a similar issue?
Thanks!
I had the same issue. Setting z-index of the drawer to big number solved it for me, without any side effects
core-header-panel[drawer] {
z-index: 9999;
}
Related
i'm working on some website. I wanted to add a Cube Effect by swiper.js.
But when i'm adding into my JS an [effect: 'cube',] the whole website is going crazy :/
But if delete [effect: 'cube',] OR use flex-box instead of GRID, everything works?
Plz help
https://github.com/AdamZajler/First-Website
The solution was to add a position: absolute; FOR .swiper-wrapper
I'm having a hard time figuring out how to make my footer stick to the bottom of the screen, even when the page is smaller than the screen.
www.test-domain.sk
I'm guessing it's something to do with the container length, but I'm honestly completely unsure.
Any help would be appreciated. :)
This concept is something known as a sticky footer. The Mozilla Developer Network has a page here illustrating a few ways to accomplish it. In the example of your www.test-domain.sk page, I believe you can add the following css to make your footer stick to the bottom of the viewport (screen).
html {min-height:100%)
body {100vh}
div#page {min-height:100vh; display:grid; grid-template-rows: auto 1fr auto}
Assuming you are looking for something like this, but if not, be more specific. As in post the code you already have.
footer {
position: fixed;
bottom: 0;
}
I've a matter with this code, why do the foreignObject children go out from the mask ?
Here's my code http://jsbin.com/ehukom/2/
.posand .pos2should be in the mask... Where's my error?
I assume your errors are
trying only Chrome (have a look at Firefox as well) and
assuming that Chrome is right and you're in error.
The only good fix to this problem I can think of is reporting a bug.
The image below is a simplified version of the problem I'm facing. Both #custom and #ext-ct are hand coded. An ExtJS component is rendered to #ext-ct. Then #custom is toggled playing with its display CSS property. In IE7, showing #custom causes the component to stick to its initial position, while hiding #custom causes the component to move up.
I have tried to reproduce this bug in jsFiddle unsuccessfully. I already know the famous "hasLayout" concept, so I have tried to apply zoom:1 to #custom, then I tried this solution still unsuccessfully. Does anyone has already encountered this kind of situation? Is there a simple fix to force the component to stick to its container?
I have found an ugly fix, I run the code below each time #custom is toggled :
if (Ext.isIE7) {
Ext.get('custom').setStyle('zoom', 0);
Ext.get('custom').setStyle('zoom', 1);
}
I leave this question unanswered until a better fix is found.
This is a cached map from the software: ogmaps
Please look carefully at the tiny shades below the address bar in the main window here.
On once clicking the minimize/maximize button, it gets showed up fully. Tested on firefox, and google chrome.
Can't say that this is the browser problem, since when I loaded this cached map on the Qt widget, I still had to click the minimize/maximize button, to get it gets showed up fully.
The html for the map is too long to be posted here. If there is any relevant section that you know of, then please tell me and I'll post it here.
EDIT 2
Finally I have managed to upload that html code here: http://code.google.com/p/earthhtml/source/browse/trunk/ogmap.html
Please have a look about the div tags.
Although this may seem like something trivial, it worked out for me. I had the exact same problem (among other GM problems) using GMv3 and couldn't figure it out.
I added a min-height to the div containing the map (with !important)
I removed ALL max-height & max-widths from the CSS
This fixed the 'small map' problem plus an additional problem I had with the GM pins and infowindows.
On top of that, make sure that there are NO divs with a high z-index on your page, as GM will resize the containing div not to interrupt with the top div. Another div with a higher z-index will also mess up the map and make the height and the width go crazy.
div#map{
min-height:600px !important; /* or any value that suits you */
position:relative;
margin-left:0;
margin-right:0;
left:0;
border:1px solid #979797;
}
I hope this works as good for you as it worked for me. If not, good luck!