I am trying to get all my popovers to be vertically centered to the viewport. My project requirements prevent me from using a Bootstrap Modal which would be an easier choice.
So, the popover triggers on link click. Have set the link to
position: relative;
As for the Bootstrap popover div, it has been set to
position: absolute;
I have tried setting the body display to table-cell and the bootstrap popover div to table-cell and vertical-align: middle; but nothing works.
Unable to give you guys an example code. Any help is much appreciated.
position: absolute;
Is positioning based on the parents element with position relative, absolute or fixed.
Remove the link it's position: relative; or try position: fixed instead of absolute.
Related
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.
I would like to place div's (input form) on a responsive background.
I'm using Bootstrap 3 for the page template. But if I resize the window or use another screen size the elements are on another place. How could I fix this common issue?
Example: http://goo.gl/D7TwIP
Thanks!
Instead of using margin-top and margin-left use top and left properties on a positioned absolute element.
top: 540px;
left: 117px;
position: absolute;
Also make sure the parent element is set to position relative.
position: relative;
I actually solved this issue for myself but was wondering if anyone could explain why my fix works. I was styling a popup modal on a mobile site using the MoovWeb SDK and sass. The modal consists of a mask div, which is located immediately inside a container div, and the modal div itself, which was buried more deeply in the DOM.
mask styling:
#modalMask{
opacity: .8;
position: absolute;
display:none;
height:100%;
width: 100%;
z-index:9990;
}
modal styling:
.mw-popup-modal {
top: 80px !important;
left: 0 !important;
position:fixed;
z-index:9999;
display:none;
}
This resulted in the mask sitting on top of the modal and the buttons inside the modal being un-tappable - their tap area was actually located around 3cm below where the button was appearing onscreen on the phone. However, on the desktop version of the site, this styling looked fine.
When I changed the positioning of the modal from "fixed" to "absolute" this fixed the problem, but I'd like to understand why. Do fixed- and absolute-positioned elements each work on their own z-index stack?
Official W3 documentation states
Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport. For continuous media, fixed boxes do not move when the document is scrolled. In this respect, they are similar to fixed background images.
Absolute and Fixed positioning do not work on their own z-index stack context.
How do you position social media buttons on the side of your content div?
Like here: http://adidasgolf.eu/home.aspx
Absolute positioning? But then the content div has to be positioned absolutely as well right?
This is what I have so far... without the social media buttons.
http://www.swiftgeckotech.com/golf01.html
Thanks.
The content div does not to be positioned absolutely to do so with the social icons. You are free to keep normal layout in the content div and put the social icons outside the content div, and position them absolutely. You may have to do some z-indexing to get that layered effect as well.
You most likely want to use position: relative; for the content DIV. Setting the content DIV to either position: absolute; or position: relative; will establish a new origin for the positioning of child elements… See this fiddle for a quick demonstration of how an absolutely positioned element behaves inside another positioned element.
However, elements with position: absolute; are removed from the document flow… They do not have "substance" in terms of pushing other content around on the page. You most likely don't want to set your content DIV as position: absolute; for this reason. If you were to add more content after that DIV, it wouldn't end up at the bottom of the page as expected, but would instead end up behind the absolutely positioned content DIV. position: relative; will work as expected however, and will give you a new coordinate system to absolutely position your social media buttons to it's side.
Can you please go to: http://www.binarymark.com/Products/ColorPickerPro/default.aspx and note the page's layout.
What I want to do is to stick or "glue" some small div to the right side of the page, that is so that it's just outside of the right frame of the page.
However, vertically I want the div to be fixed to a Window, that is no matter how much the page is scrolled, it should remain a fixed 300px from the top edge of the window.
Here's what it should look like http://www.binarymark.com/layexp.png
Can you help me please?
Seems easy, but I have no idea how to combine vertical fixed positioning and horizontal relative/absolute positioning and making sure it supports all major browsers.
Thanks.
position: fixed;
right: 0;
top: 50%;
Edit: try inserting this div as the first child of your <div id="content">...
<div class="right-tab">TEXT</div>
CSS:
.right-tab {
position: fixed;
top: 50%;
width: 1100px;
background-color: red;
text-align: right;
}
That should get you started. The width will specify how much past the content you want your tab to show (so in this case it's about 100 px). The red background is just so you can more easily see the div.