I have a navbar at the top of my website and it's fixed position. However, whenever you scroll down on the page, all of the content goes over the navbar instead of under it... how can I fix that? I assume showing my code won't help because if you know how to fix it you could probably just explain, but if you'd like to see my code just ask. Thanks.
I think you should post some code or a url. This could be as simple as setting z-index: -1 if the main part of the page is a sibling element of the navbar. Since z-index calculations depend on the parent child relationship of the DOM, knowing the relationship of the elements is necessary to answering the question.
Related
I'm not able to get my ngbPopover to show up in a table's td element. I'm seeing lots of questions but no clear solution as to how to make this work in my Angular 5 application.
I can see that my method to return the popover text is being called, but the popover never actually appears.
Problem: I have got similar problem, My NgbPopover is in <td>, when I click, popover is not visible but dom expands.
Solution: What I figure out by inspecting element : find this element named "ngb-popover-window" and remove style property, and my popover is visible then. I don't know how to handle that in project, Probably overriding some css, I guess.
My Sample : removed style element from below shown code.
<ngb-popover-window role="tooltip" class="popover bs-popover-top" id="ngb-popover-0" style="top: 114px; left: 885px;">
Hope this helps!
I am using the materialize css slider. The first slide works fine. When it moves to the next slide it stops adding the .active class.
I have the basic setup. What happens after the first slide is shown is that it doesn't move to the next one. Look at the image. Velocity stays buzzy on the first slide and never adds an .active class to any other slide anymore. Not even the first.
Does anyone have an idea why? It worked 2 days ago without issues. Something that i changed in JS must have broken this but i can't seem to figure out why.
Maybe somebody had this situation before? Hope you can help me out.
Cheers,
Victor
I found that VideoJS does not work in combination with VideoJS. Both use Slider class, and therefor conflicts occur.
If you are able to strip Slider from either one of the 2 then your good I guess. For me, ... it was way to much work so I downgraded to HTML5 native :)
I've got theme transitions (entrance and content with a set offset) on elements which overlap. The issue is as theme transitions are bought to the front of the page the elements which are animated unreliably overlap each other causing a nasty transition when it is returned to the correct z-index.
It doesn't seem to matter how the elements are structured in the visual tree or the z-index applied to the element, the issue still occurs.
Any help very much appreciated - Ideally I want to avoid writing storyboards though, I'm happy with the entrance/content transition in this scenario!
I ran into a similar problem myself. Here are some things you can try:
make sure the "correct" z-order observed at the end of the animation is indeed correct. Putting some label on your items should make that clear if the items have the z-order you intended
make sure the items are are added to the control according to their z-order. In case you use binding make sure the items you add to the collection are arranged by their z-index
in case you are using PrepareContainerForItemOverride make sure the logic around your binding is correct
Hope it helps,
Mihai
I decided simular problems with:
Position: Relative;
Transition: All... (All includes Z-Index)
I made Z-Index:4 and for "HOVERed" elements Z-Index:2000.
I've found a rather interesting mishap here.
I have a negative margin on my navigation as I wanted it to sit specifically. All appears fine in FF, but in Safari my content is jumping up to where my nav is, as if my nav does not exist.
I tried playing around with the numbers, when I change it from -77px to -55 the content jumps where it's supposed to be (but obviously my nav does not).
Here's a link to my code via pastebin.
Any help is much appreciated!
Oh, the site is here
Thanks
You've got a few problems with the layout design of the site that are causing the problem, I think. It is having issues in Chrome as well.
First, your nav isn't contained in its own div, which doesn't really fit in with the design pattern you're following. Consider a redesign with the following:
div wrapper
div header
div nav
div content
div column1, etc
div footer
div wrapper (end)
This will give you much more control over the layout, and you'll make changes on the nav div instead of the ul. Your clearing divs aren't completely necessary as you're not floating any elements, but I think you're using them to create white space - either use margins or assign the nav element a height and your original issue should be resolved. I hope this helps.
I posted this a week or so ago:
Position simplemodal modal on top of an existing div
and thought that I had solved my problem, but when the window is scrolled, the modal container moves.
I think I need to change it from fixed to absolute positioning, but when I change it in the script, the right side of the container lines up with the left side of the div (but it does stay in the same place vertically).
Here's what I'm doing now:
$('.slider-caption #large-spot-two').click(function (e) {
$('#basic-modal-content-two').modal({appendTo:"#slider1", autoPosition: false});
return false;
});
What's the best way for me to keep the modal container above the div, whether the page is scrolled or not?
Thanks,
Wendy
The plugin was created to be fixed (not move when the page is scrolled, etc.). Changing the CSS position works until the page is resized or scrolled, as you have found.
The code required to change that behavior would require more work that I currently have time for. You might try BlockUI, as it sounds like that would fit your needs better?