I'm displaying some alerts using angular-UI which is basically powered by bootstrap. However the issue is that the alerts can't be seen by the client if they are navigating to the bottom of the page. I would like to know how can I display the alerts always on top ( I think the right term is "on fixed position" )
How exactly do you want it to work? It might be easiest to use a library like PNotify or AngularJS-Toaster (plnkr).
If you want to do it yourself, you could put them in a special area. For something like this you can put the alerts in a div that is position:fixed (plnkr):
<div style="position: fixed; top: 0; right: 0">
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">
{{alert.msg}}
</alert>
</div>
There are various css position properties that will help you.
.class_of_your_alerts {
position: absolute; /* position: absolute rather than position: fixed
because you will be declaring left, right, top, etc. */
left: 0;
right: 0;
top: 0;
bottom: 0; /* now it covers the whole browser window because all absolute
positioning properties are set to 0. Tweak to your liking
using px or percentage */
z-index: 105; /* optional - if your application has a lot of layers that are
already absolutely positioned, you may wish to up the z-index
which is essentially the element stacking order for the current
dom node */
}
well, you should add or override alert styles with position:fixed if you want to "pin" it to the screen..
with additional properties left and top for positioning relative to viewport.
Related
I have tried Lottie widget and html widget, but they only allow you to scroll to a single section (up or down). What I am trying to make is one sticky button that can jump from one section to another with each click (through all sections one by one on a single-page website). Here's the website I got the inspiration from : Brightwoodlp.com. I am still a beginner so any simpler tricks would be of great help.
The button in the website you've linked in your question is not sticky (as in position: sticky), but fixed (as in position: fixed). That means the element will be situated outside the normal element flow and stay were you move it via properties like top, right, bottom, left, margin, etc.
You can set a fixed position on an element, such as a button and center it horizontally by using CSS like this:
.your-button {
position: fixed;
z-index: 1;
left: -50%;
bottom: 2rem; /* or whatever distance from the bottom you prefer */
width: 3.2rem; /* or whatever width you prefer */
}
I have this UI element that opens a tooltip/popover thing when clicked. I would like the tooltip window to appear right below the UI element, but on mobile it should be aligned to the left and right side of the viewport instead of being centered under the "more…" button.
In other words, I would like to have:
.tooltip {
top: 100%; // appear right below the button
left: 10px; // 10px *from the edge of the window*
}
Is there a way to mix referentials like this? Have the top position be calculated based on a parent, while left and right are calculated based on the viewport?
(by the way I know I can do this with JavaScript but I wanted to look for a pure CSS solution first)
The best solution I have so far is to make sure that the parent that has position: relative and acts at the referential for the absolutely positioned tooltip spans the whole width of the viewport. This works but it means the tooltip can't just be a drop-in component that can be added anywhere in your app, which is what I was trying to achieve.
It’s possible with an extra parent element around the tooltip to position it vertically.
Working demo: https://codepen.io/paweldecowski/pen/vYXaXvN
<span>Anchor
<div class="tooltip-parent">
<div class="tooltip">Tooltip</div>
</div>
</span>
.tooltip-parent {
position: absolute;
left: 0;
right: 0;
}
.tooltip {
left: 10px;
position: relative;
}
Edit:
Actually, this will work without the parent element, too. Just position the tooltip absolutely:
.tooltip {
left: 10px;
position: absolute;
}
The tooltip will by default stick to the bottom of the anchor. Of course, you won’t be able to use top or bottom properties because they will be relative to the viewport, but you can adjust the vertical position with margin.
So I'm creating a new layout for my blog, www.thatgirlmag.com, and I want a fixed navigation bar at the top (which goes with you when you scroll down). I've written the CSS right (I think), but now I can't see it because it's behind the bar that shows up when you're logged in to wordpress. I could just move it down, but then viewers who AREN'T logged in to wordpress will see something weird, right? It looks weird when I view it from an incognito window.
I'm assuming there has to be a better way to do this. I just want the navigation bar to sit right at the top of the VISIBLE portion of my blog. Help?
Here's the CSS we're looking at
#main-nav {
position: fixed;
top: 0px;
left: -10px;
width: 110%;
height: 25px;
background-color: #000;
}
Also, I have the bar positioned at -10 and 110% wide because I want it to go 100% across the page (and setting width: 100% makes the nav bar just go across the width of the element, which has margins). There must be a better way to do that as well. Can someone help me? I'm not sure I'm explaining this right.
What you're dealing with is called z-index. You need to add a z-index value to a positioned object - like #main-nav - to place it in visibility context with other objects with or without z-index values and positions.
Briefly (from https://developer.mozilla.org/en-US/docs/Web/CSS/z-index )
The z-index CSS property specifies the z-order of an element and its
descendants. When elements overlap, z-order determines which one
covers the other. An element with a larger z-index generally covers an
element with a lower one.
Take a look at other answers to z-index questions on SO: https://stackoverflow.com/search?q=z-index And see Understanding z-index and The Z-Index CSS Property: A Comprehensive Look | Smashing Magazine
For the WordPress admin bar specifically: move it down (only for logged in admins) to account for not being able to override the 9999 z-index value in WP core CSS by targeting the admin-bar div:
body.admin-bar .header {
position:fixed;
top: 28px;
z-index: 1000;
height: 40px;
}
See http://wahldev.com/making-fixed-nav-work-with-the-wordpress-admin-bar/
Try adding a z-index to to main-nav. It would look something like this:
#main-nav {
position: fixed;
top: 0px;
left: -10px;
width: 110%;
height: 25px;
background-color: #000;
z-index: 9999;
}
I used a large number for z-index because wordpress might give a z-index to the div on top of that.
I'm really not sure how to word this question, but here goes... I have a navigation bar at the top of my web page with a position of "fixed" so that it stays at the top even if I scroll down. However, I have a box that will hold all of my text/blogs that overlaps with this navigation bar whenever I scroll down.
Is there a way to "delete" a few pixels of the box (the one that holds all of my stuff) so that the navigation bar never overlaps with it? I'm sorry if this is confusing, but like I said, I'm not sure how to word it.
Screenshots:
When I'm not scrolled down-
When I am (overlapping)-
So I want to get rid of the overlapped area of my content container (and maybe 5px below it).
The other answers are spot on. I'd check the margins, and the overflow setting.
If the div's have absolute, relative, or fixed positioning, you can also play around with the z-index.
The higher the value of the z-index, the higher up in the stack an element is. So an element with a z-index of 2 will be displayed in front of an element with a z-index of 1.
On the box that contains your main content, add a margin-top equal to the height of the navigation bar. For example, if this is your html:
<div id="navbar">...</div>
<div id="content">...</div>
Then your css would be something like this:
#navbar {
position: fixed;
top: 0;
left: 0;
height: 50px;
}
#content {
margin-top: 50px;
}
Ok, thanks for the screen shots.
#navbar_id {
position: absolute;
top: 0;
left: 0;
height: 50px;
z-index: 25;
}
#main_stuff_id {
z-index: 24;
/*other
style
rules*/
}
keep in mind the "css box model" too: http://www.w3schools.com/css/box-model.gif
It sounds like you want to enforce a margin on an element with position: fixed; set. I don't think this will work, but you could put a fixed-position container around the element which you want to actually be fixed. This container can have padding, which will then give the desired effect.
<div style="position:fixed;padding:16px;background-color:#fff;width:100%;box-sizing:border-box">
<!-- don't fix the inner element -->
<div style="background-color:red">The content you want to be fixed.</div>
</div>
Working Fiddle: http://jsfiddle.net/qtHtY/
Or if you are using position you can then use top: #px; and left: #px
I want to float a div to the right at the top of my page. It contains a 50px square image, but currently it impacts on the layout of the top 50px on the page.
Currently its:
<div style="float: right;">
...
</div>
I tried z-index as I thought that would be the answer, but I couldn't get it going.
I know it's something simple I'm missing, but I just can't seem to nail it.
What do you mean by impacts? Content will flow around a float. That's how they work.
If you want it to appear above your design, try setting:
z-index: 10;
position: absolute;
right: 0;
top: 0;
If you don't want the image to affect the layout at all (and float on top of other content) you can apply the following CSS to the image:
position:absolute;
right:0;
top:0;
If you want it to float at the right of a particular parent section, you can add position: relative to that section.
Try setting its position to absolute. That takes it out of the flow of the document.