You can check what is going on in www.dynamicpoa.com
Just scroll and you'll see that everything is working properly, except the SVG animation (Lottie) that is going over the header. In both pages ("/" and "/cursos").
Anyone have a hint on how to fix it?
I've tried changing header position to 'fixed' and 'sticky' but nothing seems to work. I've tried to change the properties of the div that holds the animation aswell.
Appreciate your time.
Thank you very much.
You only need to set a z-index for your header or .sticky class, like this:
.sticky{
position: sticky;
z-index: 10;
}
Add z-index:10 to header container: element class:
sticky top-0 bg-white shadow
Add z-index:1 to animation container: element class:
width:500px;height:500px;overflow:hidden;margin:0 auto;z-index: 1;outline:none; z1
Related
I want to make an absolutely positioned element (an icon) to float inside an Antd Drawer title but it gets cut beyond the modal.
I have tried to give it infinite z-index in the div and in the Drawer prop but without success.
I am attaching a codesanbox so that I can explain my point and you can play around.
What am I missing?
Codesandbox example
Is this what you want to achieve?
If yes, just give a position: relative to the parent container :)
z-index will not work until and unless the position of that element is set. You are giving the z-index but not giving the position to the drawer. Please give position: relative; to the Drawer
Alright, I found it!
In the end it was simpler than other approaches that I tried...
It is always tricky when you have to play with a new library. Anyway I updated the codesandbox so you can see it working!
Here is the magic:
.ant-drawer-open .ant-drawer-content-wrapper {
overflow: visible;
}
.ant-drawer-open .ant-drawer-content {
overflow: visible;
}
Can I have a multi line toolbar?
I need a fixed header for all my pages, but the ons-toolbar have only one line. I need two of it in my header.
It is possible to do that?
Thank you!
You can put an extra <div> with the appearance of a toolbar with class="navigation-bar": http://onsen.io/reference/css.html#toolbar
It is also possible to change the CSS of your current toolbar to make it bigger, if you want. The anwer of this question may be helpful: Doesn't show div in onsen ui and angularjs
Hope it helps!
Edit: some CSS to do this...
Fix the position to the top under a main toolbar: position: fixed; top: 44px;
Change the page content so the new toolbar does not overlap with it:
ons-toolbar ~ .page__content {
top: 88px;
}
Working here: http://codepen.io/frankdiox/pen/YXKyjX
I'm creating a responsive site with a gallery composed of fluids images . For this, I must use css img {max-width: 100%;}. I also want a fade effect on hover.
Does anyone have a solution to this?
So far, all the solutions I've tried, does'nt work with css img {max-width: 100%;}
Thank you very much for your help!
Define image width also along with its max-width. And it must be in pixels or em's.
You don't need to keep max-width or min-width in %'s.
Browser renders from its original width or height value. As
This is for example.
img{
width:50%;
height:30%;
max-width:300px;
min-height:100px;
}
And every images'll be flexible with viewport.
this is pretty frustrating...
basically i'm creating a menubar on a site, and have used css sprite to have a hover effect where the image changes as you hover over it. this is working fine, but i can't display multiple images inline because i have to use display:block in the css for the sprite/hover class for it to work.
here is some of the css code i have:
.x a {display:block; width:100px; height:100px; overflow:hidden;}
.x a:hover img {margin-left:-100px;}
/* ie6 needs this fix*/
.x a:hover {zoom:1;}
and then here is the code in the php file (it's part of a wordpress theme, this bit going in the header.php file):
<div class='x'><a href='#' alt='#'><img src='#' /></a></div>
note: the image used is a horizontal sprite, so two images merged into one (100x100 turned into 200x100).
this alone works fine, but then when i add something to it like:
<div class='x'><a href='#' alt='#'><img src='#' /></a></div>
<div class='x'><a href='#2' alt='#2'><img src='#2' /></a></div>
it makes it go to a new line. i thought it may be a padding issue where it's overflowing on the line, but i've tried doing just two images (total area taken up maybe 210px) and it's in a 911px container area and still goes to a new line.
i've tried using < span> tags, tables, inline-block, and several other things but still no success. at one point i got it to stay inline but then the image was placed beneath all the others, in the correct horizontal position but wrong vertical position.
the goal is to have about 8 100x100 images all in a row in the menu bar, with one spacing in between each one, in a container with width 911px. they all will be in the 'x' class so that the image changes when hovered over.
sorry for writing so much but wanted to get it clear. please help!
The divs are rendering as blocks, which is why the images aren't sitting beside eachother.
If I understand what you're trying to achieve correctly, adding a rule
.x { display: inline-block }
will do what you want.
I made a JSFiddle to try it out: http://jsfiddle.net/XZWzW/
Hi I've finally got Suckerfish working and styled but in IE7 it is hidden behind the divs below it. See the dropdown on the 'Your Video/Pics' button here.
I know usually a z-index would solve the issue but in this case it seems not. Can anyone help?
Don't worry this site is not supposed to work in IE6 ;)
Try adding:
#header {
position: relative;
z-index: 1;
}
For IE, the entire block has to have a higher z-index than the block below it.