I'm having a problem overlaying an element inside a bootstrap progress bar.
The icons are overplayed on the partly filled progress bar, but on the full progress bar the icons aren't displayed.
You can achieve the desired result by applying the following code to the progress element and the div containing your icons.
Apply position: relative; to the .progress element styles:
<div class="progress" style="position: relative;">
Apply position: absolute; top: 0; right: 7px; to the div element wrapping the icons:
<div style="position: absolute; top: 0; right: 7px">
<!-- icon elements -->
</div>
Full example solution (taken from your code and modified):
<div class="progress progress-striped active" style="background: #ddd; position: relative;">
<div class="progress-bar progress-bar-danger" style="width: 100%; float: left;"></div>
<div style="position: absolute; top: 0; right: 7px;">
<span class="glyphicon glyphicon-info-sign"></span>
<span class="glyphicon glyphicon-new-window"></span>
</div>
</div>
Hope this helps you :)
The icons is display even in full progress bar, but the icons is overwritten by progress bar. You can fixed it by create your own CSS and add z-index: 0; in your icons style
.modal-footer span{
z-index: 0;
}
They are using float left... So the bar pushes them.
Try using absolute position on the div that holds the icons.
Related
I am trying to absolutely position a child in a child in a flexbox.
The problem is that element jumps its parent and aligns instead to the grandparent. I know that this is a flexbox issue as it works fine outside of the flexbox.
Maybe this pseudo will help clear things up:
<div style="display: flex; width: 100%;">
<div style="position: relative; width: 100px; height: 100px;">
<button style="position: absolute; top: 0px; right: 0px;">X</button>
</div>
<div>This is irrelevant.</div>
</div>
The button should be in the upper-right corner of its parent div, but instead it gets positioned to the middle of the screen.
Is there a right way (or hack) to fix this?
EDIT: I have tried and tried again to duplicate the problem here in the code snippet to no avail (in the original post I didn't test the pseudo code -- just assumed it would reproduce). This leads me to believe that the the problem lies somewhere else in my code. I apologize for not testing further before posting. Because of this I cannot accept an answer.
This should do it. Absolutely positioned divs / elements will always search for the nearest parent position relatives to line up with. In this case you just need to move it to the grandparent, not the parent.
<div style="display: flex; width: 100%; position: relative;">
<div style="width: 100px; height: 100px;">
<button style="position: absolute; top: 0px; right: 0px;">X</button>
</div>
<div>This is irrelevant.</div>
</div>
Cut the position: relative; from the second div and move it to the parent div the one has flex. Then the absolute element will work based on the parent div and will be on the top-right-side, please see the snippet below-
<div style="display: flex; width: 100%; background: #ccc;position: relative;">
<div style="width: 100px; height: 100px;">
<button style="position: absolute; top: 0px; right: 0px;" >X</button>
</div>
<div>This is irrelevant.</div>
</div>
I am trying to position a <div> absolutely using bottom=50% in an AngularJS/Ionic page as follows:
HTML:
<ion-view title="BoardLine">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
<div id="imagecontainer">
<img id="boardimage" ng-src="{{mainResultImagePath}}" />
<div id="photocredits" class="rotateimagecredits">
Image courtesy: {{computed.prophotocredits}}</div>
</div>
....
CSS:
#imagecontainer {
position:absolute;
top:3%;
left:0;
right:62%;
bottom:50%;
}
#boardimage {
position:absolute;
left:10%;
max-width:85%;
bottom:0;
height:100%;
}
But just before div id="imagecontainer", Ionic generates a div class="scroll",like below, which has a height of 20px. And the top and bottom css for my imagecontainer refers to this height, but the div class="scroll" has a position:static. Therefore my imagecontainer absolute positioning should refer to the first parent that has a non-static position
which should be the <ion-content>
<ion-content class="scroll-content ionic-scroll has-header">
<div class="scroll" style="-webkit-transform: translate3d(0px, 0px, 0px) scale(1);">
<div id="imagecontainer">
<img id="boardimage" ng-src="./img/boards/SD360.jpg" src="./img/boards/SD360.jpg">
<div id="photocredits" class="rotateimagecredits ng-binding">Image courtesy: john carper</div>
</div>
I'm not really sure this answers a question, but a valuable information for people struggling with Ionic and absolute position would be that
position: absolute
Has to be used with elements outside of ion-content
So:
<ion-content>
</ion-content>
<div class="bottom">
</div>
.bottom {
position: absolute;
bottom: 0px;
width: 100%;
}
The footer component of ionic is fixed regarding the screen, I think you can try to implement an equivalent one. More info about the footer: http://ionicframework.com/docs/v1/components/#footer
The main css-properties of the element are:
.bar-footer {
bottom: 0;
height: 44px;
}
.bar {
display: flex;
user-select: none;
position: absolute;
right: 0;
left: 0;
z-index: 9;
width: 100%;
height: 44px;
}
Modify the above properties with your specific ones (eg. bottom: 50%;) and ensure display is set as absolute.
Considering your parent's positionning issues, you should try to put your piece of code outside <ion-content></ion-content>, inside <ion-view></ion-view>.
It's the only way I succesfully set a button positioned as absolute within ionic mobile framework.
EDIT: /!\ Be careful not to write anything out of <ion-view></ion-view>. My previous answer was creating trouble in the way ionic manages the different pages.
I have a small example, with two adjacent divs with a background image. This divs are tiles in a tile based editor. I want to place an image into the first div and change the position of the image, so that the image overlaps both divs (see http://jsfiddle.net/WRZJe/16/). I've set the z-index of all divs and I've set the z-index of the image. The position attribute for both, divs and image is set to absolute:
<body id="exploration-body">
<div class="dungeon-container" style="left: 1040px; top: 720px;">
<div class="dungeon-canvas-full-screen" id="dungeon_canvas">
<div style="top: -720px; left: -1040px;
background-position: -82px -162px;" class="show-tile">
<img id="token-1" class="token-img"
src="1.png" alt="token1" style="top: 0px; left: 40px">
</div>
<div style="top: -720px; left: -960px; background-position: -82px -162px;" class="show-tile">
</div>
</div>
</div>
</body>
Here is the relevant css-code:
.dungeon-container {
position: absolute;
}
.show-tile {
background-image: url("stone_dungeon.png");
height: 80px;
width: 80px;
position: absolute;
z-index: 5;
}
.token-img {
position: absolute;
z-index: 50;
}
As the z-index of the images is higher then both divs, I expect the image to be drawn in front of both divs. But page behaves like no z-indexes where given. The image hides behind the second div and would be in front of every div before the image containing div.
What might cause the browser (I've tested Safari and FF) to ignore the given z-index?
Update: I've added a screenshot from the actual application (http://robitzki.de/zindex.png) that shows, that the image moves behind those divs, that are placed after the containing div.
Each div.show-tile (which are all siblings) creates an own stacking context! Child elements remain in the stacking context of the parent, thus your img will be hidden if it is adjacent to a div which has a higher z-index as the images parent div. The z-index of the image itself (=child) does not matter in this case.
In order to have the image overlap all the divs, the cleanest solution would be to not put it into one of the divs, but put it separately as a sibling to your .show-tile divs and give it the highest z-index.
Alternatively, you could omit your absolute positioning on the divs - this would make the img having it's position depend on #dungeon_canvas.
If you cannot do so, you have to assure that the div which holds your image always has the highest z-index.
You have to put the second div before the first one so that it comes before the img tag
<body id="exploration-body">
<div class="dungeon-container" style="left: 1040px; top: 720px;">
<div class="dungeon-canvas-full-screen" id="dungeon_canvas">
<div style="top: -720px; left: -960px; background-position: -82px -162px;" class="show-tile">
</div>
<div style="top: -720px; left: -1040px; background-position: -82px -162px;" class="show-tile">
<img id="token-1" class="token-img" src="http://dungeonpilot.com/assets/tokens/1.png" alt="token1" style="top: 0px; left: 40px">
</div>
</div>
</div>
</body>
http://jsfiddle.net/WRZJe/17
If you can move the img tags out of the divs and position them using similar coordinates to the divs then the following will produce the desired display
<body id="exploration-body">
<div class="dungeon-container" style="left: 1040px; top: 720px;">
<div class="dungeon-canvas-full-screen" id="dungeon_canvas">
<img id="token-1" class="token-img" src="http://dungeonpilot.com/assets/tokens/1.png" alt="token1" style="top: -720px; left: -1000px" />
<img id="token-2" class="token-img" src="http://dungeonpilot.com/assets/tokens/1.png" alt="token1" style="top: -720px; left: -930px" />
<div style="top: -720px; left: -960px; background-position: -82px -162px;" class="show-tile">
</div>
<div style="top: -720px; left: -1040px; background-position: -82px -162px;" class="show-tile">
</div>
</div>
</div>
</body>
http://jsfiddle.net/WRZJe/20
Because the second .show-tile has a higher z-index than the image, the image will be cut off
try this:
.dungeon-container {
position: absolute;
}
.show-tile {
background-image: url("stone_dungeon.png");
height: 80px;
width: 80px;
position: absolute;
/*z-index: 5;*/
}
.token-img {
position: absolute;
z-index: 1;
}
Check fiddle to see it work
Now do easily this as like this Live Demo
Html code
<div class="main-container">
<div class="pic-1 pic-5"></div>
<div class="pic-1 pic-3"></div>
<div class="pic-1 pic-2"></div>
<div class="pic-1 pic-4"></div>
<img src="http://dungeonpilot.com/assets/tokens/1.png" alt="" class="pic-change">
</div>
Css
.pic-1 {
background-image: url("http://dungeonpilot.com/assets/stone_dungeon.png");
height: 80px;
width: 80px;
float:left;
position:relative;
background-position: -3px -3px;
}
.pic-2{
clear:left;
}
.pic-change{
position:absolute;
left:40px;
top:40px;
z-index:3;
}
.main-container{
position:relative;
}
.pic-4{
z-index:4;
}
Demo
I know how to center a div layer with respect to it's wrapper or parent container, but what about When I have a div inside of a div inside of the page body. How do I center the smallest div with respect to the body?
<div id="1" style="width: 100%">
<div id="2" style="width: 22.5%; height: 1000000000px; margin-left: 12%;">
<div id="3" style="position: absolute;">
</div>
</div>
</div>
In the above example, How can I center div with id="3" in respect to div with id="1"?
#1 must be position: absolute, #3 set left: 50% and offset half the width to the left
#d1 {
position: absolute;
}
#d3 {
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px;
}
JSFiddle for playing.
I have moved the inline styles to the CSS panel and changed the ids to d1, d2 and d3 respectively.
set marging:0 auto for div id=3
div#2 {
position: relative;
}
div#3{
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
This will center the div#3 not only horisontaly but vertically to div#2, if you are asking that. And keep in mind you can't have digits for id.
If you want to center div#3 to div#1 ... you just have to move the position:relative style from div#2 to div#1 .
If you want it positioned exactly in the screen's center, you need to enclose ID#3 inside 2 divs, one that takes care of vertical alignment, and the other takes care of horizontal alignment:
<div id="vertical">
<div id="horizontal">
<div id="3" style="position: absolute;">
</div>
</div>
More details are here: dead-center
When i have a div with position: absolute, and in it is another div with position: absolute the inner div will position in the frame given through the outer (wrapper) div.
Now i want to create a class (css) called error_message that positions itself exactly in the center middle of the site, indifferent from where the it is called, so i need it to break out of every div wrapped around the error_message div.. how do i do this?
i had a similar problem with positioning a hoover-text centered below a floated image button list.
for me the solution was using the "fixed" value for the "position" property
position: fixed
then you can position your error message from top left of the body again.
i use another wrapper div to position all hoover texts center center.
found the solution here:
CSS nested Div with position absolute?
the code is not the code from the picture you see, the picture is just for illustration.
stylesheet in less format (see http://lesscss.org/)
<style>
.button
{
float: left;
position: relative;
a
{
&:hover, &:focus
{
.titlePos
{
.title
{
display: block;
}
}
}
.titlePos
{
position: fixed;
top:50%;
left:50%;
width: 400px;
margin-left: -200px;
.title
{
position:relative;
display: none;
top: 130px;
text-align: center;
}
}
}
</style>
html:
<div id="wrapper">
<div id="content">
<ul>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text1</div>
</div>
</a>
</div>
</li>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text2</div>
</div>
</a>
</div>
</li>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text3</div>
</div>
</a>
</div>
</li>
<li>
<div class="button">
<a href="#" >
<div class="buttonImage">
<img />
</div>
<div class="titlePos">
<div class="title">Button Hoover Text4</div>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
You should try using css's position:fixed property, instead of position:absolute, for the error div. position:fixed will position an element based on the browser window, with no regard for where it falls in the DOM. If you want it to be centered in the window, regardless of window size, you could make the fixed-position div cover the entire screen (left: 0, right: 0, etc). and then text-align the error message inside of it.
I'm not sure why would you want that div to break out of parent div. Maybe try working on a fresh html structure for those?
http://haslayout.net/css-tuts/Horizontal-Centering and http://haslayout.net/css-tuts/Vertical-Centering
These should help you out!
I think the only way to have a div break out of all parent divs is to have an absolute positioning on all of them, which will obviously create its own set of problems.
Why not simply have a pre-defined, hidden div as a direct child of the body, instead of wrapping it in the markup. You can then easily position it as you want, and insert the error messages in it with the help of jQuery. An obvious advantage to this method is that you would only have to write this div once, and dynamically insert the error message into it. I would even suggest having a look at jQuery UI which allows you to easily create dialogs, both normal and modal, besides tons of other features.
UPDATE
Since JS is not allowed, an easy way to do this would indeed be displaying the div only if there was an error. So the PHP code would be ...
if (isset($error)) {
echo '<div class="show_error">' . $error . '</div>';
}
... and the CSS class for it would be ...
.show_error {
width: 400px; // error element's width
height: 200px; // error element's height
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; // minus half the height
margin-left: -200px; // minus half the width
}
Of course, you can further style the error div as you wish, but these are needed to position it dead-center.
Hope this helps !
I have found a solid CSS solution here:
https://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent/
Let’s add another parent and move the position:relative one level up
(or, in your context, you could maybe simply use an existing upper
parent).
HTML
<div class="grand-parent">
<div class="parent">
<div class="child"></div>
</div>
</div>
CSS
.grand-parent {
position: relative;
}
.parent {
/*position: relative;*/
overflow: hidden;
}
.child {
position: absolute;
top: -10px;
left: -5px;
}
Result: