I would like to do a responsive design for the popup notifications in my application.I'm using Angular Toaster for the notifications.
For instance I have located the toaster-container element in the center of the screen, but using an absolute position,so for smaller screens the notifications stay in the same position so they are not displayed. I would like to make the notifications relative to the parent element where they are contained, (in this case the container grid). How do I achieve that using CSS? This is my html code:
<body data-ng-controller="AppController">
<div id="container" class="container">
<toaster-container toaster-options="{'position-class': 'toast-container-custo','time-out': 3000, 'close-button':true}"></toaster-container>
<div id="header" data-ng-include="'partials/header/header.html'" ></div>
<div data-ng-view></div>
<div id="footer" data-ng-include="'partials/footer/footer.html'"></div>
<!-- This is the div with the overlay css class, so no matter where it is located this div inside the screen, it will cover the whole screen-->
<div id="loader" class="loading overlay" data-ng-if="loader.loading">
<p>We are loading the products. Please wait...</p>
<img alt="" src="images/ajax-loader.gif">
</div>
</div>
<div id="loginPanel" data-ng-include="'partials/content/panels/login.html'"></div>
</body>
And the custom css rule I use for the toaster-container element:
.toast-container-custo
{
position: absolute;
top:100px;
left: 780px;
}
Use percentages instead of pixels
You can make your div relate to it's container using percentages both for width/height and top/left values. The percentage you use here will be in relation to the parent container size. So if your parent container is set to width:300px and your child is set at width:50% then the child will be rendered at width:150px;
Use relative positioning for the element.
Relative positioning, is just what it says on the label - it positions the element relative to other elements. So you also need to set the element to position:relative;
Here is how I would go about this:
.toast-container-custo{
position: relative;
margin: 0 auto;
width: 30%;
height:30px;
}
margin:0 auto will center
the child elements within it's container, horizontally
the width now is 30% of the parent container
the height, well, I just prefer to set this at a fixed px value but
you can definetely use % here as well
You can change your container to:
.toast-container-custo{
position: absolute;
top: 100px;
margin-left: auto;
float: none;
margin-right: auto;
left: 0;
right: 0;
}
Generally, this is a good way to center horizontally absolute elements.
Related
I am trying to position a div along a line with a position that is calculated at runtime. I've set the div's display to inline-block (in the full code there are elements inside the div) and the position to relative, but the position doesn't update properly in IE11 when resizing the window.
https://jsfiddle.net/cpmckinn/ys4zjLam/2/
<div class="container">
<div class="marker">
A
</div>
<div class="line">
</div>
</div>
.container {
width: 50%;
}
.marker {
position: relative;
display:inline-block;
width: auto;
}
$(".marker").css("left","50%")
Everything checks out in Chrome and Firefox, and I can force the div's position to update in IE11 by disabling and re-enabling the "left" style with the developer tools. Is there a workaround to this particular issue or a better way to handle positioning the div?
I was wondering if this is possible with ONLY css.
I have a logo container that is positioned absolute. Since this logo can be any width and height it's positioned this way. Next to the logo div I have a navigation div. This element is positioned relative. Is there any way to keep the navigation exactly next to the logo div when that can have any width?
<div class="logo">
<img src="logo.png" class="img-responsive">
</div>
<div class="navigation">
<ul>
<li>....</li>
// etc etc....
</ul>
</div>
CSS
.logo {
min-height: 80px;
padding: 10px 0;
position: absolute;
max-width: 330px;
}
.nav-wrap {
position:relative
background: #ffffff;
float:left;
width:100%;
}
So what I tried is to use calc() but that doesn't work since you can't do something like(???)
calc(100% - (.logo))
I guess display:table won't work because there's an absolute element.
I can use jQuery but that would create a jumpy effect on the navigation.
So the question:
When a div can have any width and is p[ositioned absolute, how can you position an other div right next to it?
Any help greatly appreciated.
Joomla-based website with DIV sections dividing the page within the template.
I need to display a graphic that displays on top of all content on the page. Using position: relative or position: absolute, it only adjusts the position within the current DIV section.
Using position: fixed, I am able to set its actual position, which is great. However, regardless of my z-index, some DIVs it appears above, others behind.
At a loss as to how to display this image over top of everything on the screen regardless as to its DIV, z-index, etc.
Use position absolute but adjust changes caused by not displaying img in that flow by for eg margin, padding, height etc. If you are floating img you will need to fix position too.
<div>
<div>before img</div>
<img class="img--absolute" src="http://placekitten.com/50/60"/>
<div class="absolute-fix">after img</div>
</div>
.img--absolute{
position: absolute;
}
.absolute-fix{
margin-top: 70px;
}
<div class="img-container--float-fix">beffor img</div>
<div>before img</div>
<img class="img--float img--absolute" src="http://placekitten.com/50/60"/>
<div class="absolute--float-fix">after img</div>
</div>
.img-container--float-fix{
position: relative;
}
.absolute--float-fix{
padding-right: 60px;
}
.img--float.img--absolute{
right: 0;
}
http://jsfiddle.net/o5sboe1s/
Why does wrapper div not have a height? If I set the height (height:200px) the green background appears but how to set with auto height?
Here is my code (JSFiddle):
HTML:
<div class="wrapper">
<div class="effect"></div>
<div class="content">
...content
</div>
</div>
CSS:
.content {
position: absolute;
background-color:red;
}
.wrapper, .effect {
background: green;
}
.wrapper {
position: relative;
width: 630px;
}
.effect {
width:100%;
position: absolute;
}
It is not working (i.e. parent element not having any height) because all the immediate descendant of the .wrapper element is absolutely positioned — this will have the effect of taking them out of the flow of the document, therefore causing the parent's dimension to collapse to nothing.
You will also notice that the effect is the same when you float all
descendants of the parent wrapper, because float also has the
effect of taking normal elements out of the document flow.
There are only two ways to prevent this from happening, both of which involving declaring a certain height for the parent .wrapper element:
Either you explicitly state a height for the parent (see example fiddle)
Or use a relative height (say, in percentages or viewport units) that is not dependent on its own content.
You should reconsider your design strategy, and what you're trying to achieve. There is probably other ways to achieve what you intend to do, will you mind showing us?
I am trying to do a tableless
layout, and I have the following
HTML snippet:
<div class="slider-inner">
<div class="slider-pane">
<div class="container">
<p>...</p>
<div class="did-you-knoow">
<div class="facts">
</div>
<div class="marquee-container">
</div>
</div>
</div>
</div>
</div>
Which is styled w/ this CSS:
div.slider-pane {
width: 1024px;
}
div.container {
display: block;
}
div.facts {
margin-right: 60%;
}
div.marquee-container {
position: absolute;
top: 0;
right: 0;
margin-left: 0;
margin-right: 0;
padding: 10px;
width: 60%;
}
I want the div.facts to occupy the left-40% , and the div.marquee-container
to occupy the right-60% of the div.did-you-know (their immediate parent). I
expect the div.marquee-container to be positioned relative to its parent, and
its width to be 60% of its parent, but its positioning and width are relative
to div.slider-inner, which is 2 levels above its parent.
How do I set the position and width of div.marquee-container relative to
its parent, and not the div three levels above it?
add position:relative to div.container
#locrizak's answer is correct, I needed to add 'position:relative' to the div.container, but I needed to add it to the div.did-you-know as well. In other words, I needed to set all of the containing div's to position:relative in order for the elements in question to be positioned relative to the immediate parent.
I found this was also answered in the MDN page for css position under the 'absolute' definition:
[The browser will] position [the element] at a specified position relative to its closest positioned ancestor or to the containing block
However the W3C reference was not as helpful.