Position bootstrap popover - html

I'm trying to implement a popover for language selection, but encounter two problems:
1) The popover is hidden above the footer when I apply position: absolute; to the footer.
2) The popover sticks to the right side of my page. I would like a margin there, but margin-right doesn't seem to have effect.
Here's a jsfiddle.
Note: this might not be the case with newer versions of bootstrap, but I'm using this one in the rest of my site and migration to a newer version is out of scope for now...
EDIT: I fixed the first problem by adding {container: 'body'} to the tooltip. Second one still open...
EDIT 2: I managed to add a margin on the right by using:
.popover
{
right: 10px !important;
left: auto !important;
}
The only problem now is that the arrow isn't centered with the text beneath the arrow anymore... any tips?

One way to accomplish this is by adding a fixed position position:fixed; right:40px; to your #wrapper. This will allow you to adjust your position to the left and or right. However, if you attempt to adjust top or bottom it will break out of its parent container and be relative to the document. Therefore, if you need to make adjustments to top or bottom use margins.
#wrapper{
min-height: 50px;
max-height: 100px;
display: flex;
align-items: center;
position:fixed;
right:40px;
}

Related

how is the sidebar sticking to the bottom of the page in this bootstrap template?

I don't really understand how they are making this sidebar stick to the bottom of the page in this bootstrap template.
http://getbootstrap.com/examples/dashboard/#
If you look at the .sidebar class CSS properties, there is this weird
position: fixed; top: 51px; bottom: 0px;
But really no rule about the height of the column, and since it should automatically adjust to the height of the content, I'm a bit lost here.
I made an attempt with this CodePen :
http://codepen.io/anon/pen/ojQvjj
but really, the only way I found to make the sidebar stick to the bottom was to add a height property.
Thanks a lot for the answers, it will really help me make progress with CSS.
If you make a container or element (.sidebar) with position: fixed; + top: 0; bottom: 0; That container will 'stick' to the top and bottom of the parent element (body).
When you use a 'fixed navbar' in bootstrap, you need to add a margin-top > 50px or, in this case,top: 51px; so the sidebar starts after the navbar and it's not hiding behind it.
At some point it will overflow, that's why they add, overflow-y: hidden or scroll;
To be clearer. If you remove those .col-sm-3 .col-md-2 from that element, and give the .sidebar a left: 0; right: 0; it will take the whole viewport area.
Here if you see the code col-md-2 in first div and col-md-10 in second div and making first div as position: fixed; and when we make a div as position fixed it don't acquire any space in view port. and second div with col-md-10 will acquire that place but it will be hidden behind top position of first div so we use .col-md-offset-2 to move second div to 16.66 % right direction and top:0 and bottom:0 for giving position to a fixed div.
and whatever you want is there: please check you this codepen:
http://codepen.io/Gkakar/pen/KdrzBJ

Make div go to the bottom without overlapping previous div's content

I have the following example:
fiddle: http://jsfiddle.net/yisera/yLty3552/2/
Pen: http://codepen.io/yisera/pen/KpzbQp
Where I have a flex grid and I have elements that are also display:flex;. The problem I have is that the div.card has another div, div.od-card-action which has the actions of that card, comment, upvote, downvote. However, whenever the content of one of the cards is bigger than the others, they will stretch, making the card bigger to match the biggest one on that row.
This is a desired behaviour, but the problem is the div.od-card-action will also grow (I don't want this to happen) and make the elements seem out of order like it is shown on the first card in the fiddle.
I tried:
.od-card-action{
position: absolute;
bottom: 0;
width: 100%;
padding: 10px !important;
}
but this only makes the content from the upper div overlap with the content of the actions div.
Is there a way where I can make the div.od-card-action go all the way to the bottom regardless of the size of the card and maintain the same size (eg: 50px to say a value)?
Thanks in advance!
EDIT
Here's a picture demonstration what I want to accomplish:
See how everything is aligned horizontally despite the content of the above div not being of the same size? That's what I need to achieve.
I realised that as you're already using Flexbox in .od-card, then .card-content could be set to take as much space as possible (vertically, as the flex direction is column) using:
.card-content {
flex: 1;
}
Change the od-card-action CSS back to:
.od-card-action{
position: absolute;
bottom: 0;
width: 100%;
padding: 10px !important;
}
Add new css to card-content
.card-content{
margin-bottom:50px;
}

CSS positioning and offset in fluid layout

I have a wrapper div with some content in it. Here is its css:
.wrapper{
width: 85%;
min-width: 970px;
max-width: 1500px;
margin: auto;
padding: 0.3%;
}
Now, within this div, I have another div, which I will call div2. It has no relevant styles to it, aside from cosmetic ones (background, font-color, etc.). Its behaviour is to simply take up the entire width of the wrapper div, no matter what the browser's width, zoom, or screen size is. This is as expected, and nothing is wrong here. I'm trying to make an addition onto this, and that is where I'm having trouble.
I have an image that I want to display, such that the bottom of the image is in line and touching the top of div2, and on the right side end of div2, so that the right end of the image is also in line with the right end of div2.
This would sound simple enough to do, but I don't want this image to mess with the vertical space. Adding the image in will of course introduce a larger gap between div2, and any element above it, which means I have to use position:absolute to take the image out of the regular flow of the page. However, my attempts at keeping the image at this same position, in line as described, have been unsuccessful. How can I keep this image aligned at all times, and under all possible user display circumstances, without having this large gap?
I've tried using the offset CSS top and left to move the image, but it doesn't work for all screens/zooms/resolutions/browser widths, and this isn't something I can practically use media queries for.
I'm not quite sure if I got you right, but I guess you need to:
#div2
{
position: relative;
width: 100%;
overflow: visible;
}
#div2 img
{
position: absolute;
bottom: 100%;
right: 0;
}
EDIT: Place your image inside of #div2.
So, your image, will always be on the right top of #div2. That's what you wanted to do?

How can I get things properly contained in a wrapper div?

At cjshayward.com/index_new.html, there is a wrapper div around the body's content, about 1000 pixels wide, and it works as intended for the top 100 or so pixels in Chrome and Firefox. Next down the page is a jQuery UI set of tabs, containing a fixed-width accordion and something close to jQuery.load()ed plain old, simple HTML.
However, on the "Browse the Library" tab (but not "About the Author"), which is presently open and which contains the fixed-width accordion, below 100 or 150px down, the area under the tabs appears to have the same width as the window; it has the correct left margin, and horizontally scrolls an apparently equal distance to the right. Furthermore, the body background tile does not display; the whole width is white, as was specified for the wrapper div's interior.
How can I get the "Browse the Library" tab to display as intended (like the "About the Author" tab does)?
Thanks,
You're absolutely positioning way too much and that's ruining the flow of things. I'll go through a list of edits you can do to make this work.
/*
#accordion and #details will be floated, so we'll need to
clear #tabs. Add this property.
*/
#tabs {
overflow: hidden;
}
/*
Remove the absolute positioning from #accordion, along
with the top and left properties and do this instead.
*/
#accordion {
float: left;
width: 400px; /* This already exists */
margin: 0 10px 0 0;
}
/*
Remove the absolute positioning from #details, along
with the top and left properties and do this instead.
*/
#details {
float: left;
width: 580px;
}
This will get you a lot closer. You should also try to avoid using height on these elements. Let the content dictate the height.
Here is what i ended up with making those edits: http://i.imgur.com/niizuoR.png
Okay lets make a step by step solution (watch for the edits).
Background
Your background is set in the body. So the body needs to be extended to fill the whole page.
I would recommend this way but there are others.
body,html{
height:100%;
}
Normally the body would fit its contents but with position:absolute this mechanism doesnt work anymore.
Also remove background: #fff css (normalize.css) from the html.
html {
background: #fff;
color: #000;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Also your background scrolls with your content. Set background-atachment: fixed to change this.
Wrapper
Same counts dor your wrapper which holds the white background.
Set its height to 100% too.
div#main {
height: 100%;
}
The reason why your content is bigger than your wrapper is that
<div id="details" style="width: 713px; height: 0px;">
this div holding the content has a fixed size set. Removing that size make it fit the wrapper.
The width seems to be set per javascript in the load event, so I cant help you with that. Provide your .js code and may i can help you with that too.
As stated in the comments, your layout issues are based in your use of absolute positioning rather than flow layout:
I went through your site and quickly switch everything so it was positioned statically (width floats, not absolute values) and this cleared up the issue. There were some other issues as well. You probably need to look over how you are setting up your HTML from the top level on.
I would start out again and concentrate on using floats for your layout, rather than absolute positioning.
For a basic example on doing so, here is a super simply page: http://cdpn.io/kmCFy

CSS buggy in chrome

On the website http://thornhillss.ca/pages.php?id=7 The footer looks fine in every browser. Yet in chrome it doesn't touch the bottom of the frame. Why is that. It should be a simple fix however I just dont know why it wont work.
*It should stick to the bottom of my div. Not my page.
This is because the div with the id "main2" isn't set to expand with the right-hand floated div. By default divs won't expand to fit floated child elements, so you need to tell it to hide overflow (which will tell it to expand to fit all child elements as long as you don't also give it a fixed height):
#main2 {
width: 860px;
margin-top: 15px;
margin-left: 20px;
margin-right: 20px;
position: relative;
overflow:hidden;
}
You're p.clear class has a margin on it as you're not using a reset.
If you add margin:0 to your .clear styles the margin goes away and it displays how you want it to.
This is what you are looking for it works and is awesome sticky footer