We like to integrate a dialog box into our webapplication.
We have dynamic height content and want the box to be as high as the content, but if the content is relatively high, we don't want to have the dialog box being higher than the window height.
In other words: wrap the content in the dialog box, if it makes the dialogbox taller than the window
Here is what does not work:
http://codepen.io/anon/pen/aClnr
Possible without JS? The problem is the dynamic height...
Requirements:
I want the box to be centered horizontally and vertically
I want a margin from the top and the bottom always (let's say 20px each)ยด
I want the #contentContainer to be scrollable when it overflows, not the box (thus keeping the 20px padding)
It doesnt look nice when the #contentBox is scrolling over the padding of #box
Don't want to have something like that:
http://codepen.io/anon/pen/Ajltx
Change your CSS to this:
#box {
width: 500px;
margin: 0 auto;
background: green;
position: relative;
overflow: auto;
max-height: 100%;
}
#contentContainer {
padding: 20px;
}
Like this, the box will become as heigh as the body max. When the content overflows the window a scrollbar will appear. Here is the demo: http://codepen.io/Nico_O/pen/jIJcb
Related
So I am trying to make banners which scroll with the page, but always will be like 40px left from my wrapper.
This is my site: http://joostmeijer.eu/ so you can see how my html works.
I seriously don't get how I can make the banner div fixed but relative to my wrapper.
You can create a <div> inside your wrapper div, for example <div id="fixedwrapper"></div>, and then style it like this:
div#fixedwrapper {
display: block;
width: 140px;
height: 500px;
position: fixed;
left: 0px;
background: black;
}
Here's a live example: jsFiddle Demo. Although you will need to use the CSS3 #media-queries to remove the banner when the window size is reduced since your website isn't responsive and the banner will overlap your content once the window size is reduced.
You are contradicting yourself in the question. If a div has a fixed position it will position relative to the browser screen, so it will never ever move.
Solution:
If you do not want to change your html and keep the banner inside the div, you can apply a negative margin. Make sure the overflow on your wrapper is set on visible (default value) for this to work. Also make the image wider to fill up the gap you will create on the right by adding the pixels from the negative margin to your #banner div's width.
#banner{
background-color: blue;
height: 100px;
width: 540px; /*40px added to compensate for margin*/
margin-left: -40px; /*move the dic 40 px to the left from the div*/
}
Here it is in JSFiddle.
Is this what you are trying to do???
I am trying to display a page which has two sections which are scrollable. What I am seeing is that the lower section gets a scroll bar but it is truncated. When I change the height property of the section, from 90% to 50% then the complete scroll bar is shown. However, if I resize the browser to smaller size, the vertical scroll bar again appears truncated.
The CSS for the top most div is supposed to have a height in pixels.
.rootsection {
background-color: yellow;
padding: 5px;
margin: 5px;
overflow:hidden;
width: 100%;
height: 200px;
}
The CSS for the scrollable div is:
.bottomSectionScrollable{
background-color: green;
overflow:auto !important;
padding: 5px;
margin: 5px;
height: 90%;
}
When the height is changed to 50% and the root section height is unchanged to 200px, I see that the scroll bar is not truncated. I want that the scrollable section should always have a vertical scroll bar which is never truncated and it should not leave a blank space. This should be the case even when the browser is re-sized or the zoom / un-zoom action is done on the user. I am emulating the re-size action by changing the height of the root section.
FIDDLE
Any thoughts on how to ensure that the scrollable section's scroll bars are always visible and always occupy the full space of the parent box even when the browser is re-sized?
How can I make box (border-radius) size bigger in CSS3? If I set height property, such as height:10%, it doesn't change, but width:10% makes the width of box wider. I don't know why such inconsistency occurs. Also, when I resize the height by height: 100px, the box size changes, but the text size remains the same, despite writing vertical-align: middle. So how can I correctly make the box size larger but the text position is located in the middle of the box?
Also, why does the position of box move when the mouse hovers over the box and not?
I wrote JSFiddle here
you can not hide that div you can only make it transparent
div{
background:transparent;
}
you can read this Easily center text vertically, with SVG if you want to use svg.
the position of the box changes because of padding: 0px;
.dropdown:hover .dropdown-menu {
display: block;
padding: 0px;/* remove this*/
margin: 0px;
}
and bootstrap is added on you left side not in the css
and the correct link for that looks like this
under External Resources
//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap-theme.css
Demo: http://jsfiddle.net/rXNmA/2/
and for the position of the text you can use the
class=text-center
and
line-height: 2em;
or
line-height: 2%;
depending on what you want to achive
Demo:http://jsfiddle.net/rXNmA/5/
It doesn't take the percentage height, because this div size depends of the "whole page" tall. Change the body to 100% height and it will work.
html, body {
height: 100%;
}
div {
height: 10%;
}
Vertical text alignment
My page layout:
div for header : position: fixed
div for sidebar: float: left div for content: float:left
div for footer : position: fixed
the positions are set to be like so so that the footer and header are always visible no matter what point in the scroll bar the user is at. The sidebar however scrolls with the page.
the div for content contains a ui:insert so all the pages load in there.
now in one of the pages i want the content to be centered within the space allocated.
all the content of that page is placed in a div for this purpose.
What style do i have to use for the contents to always be centred horizontally no matter what size the window is stretched to. I can specify a fixed value for width of the div.
I cannot set the position to be absolute or fixed as it would ruin the design overall.
For a fixed width:
div.center {
width: 300px;
margin: 0 auto;
}
For dynamic width:
div.center {
width: 50%;
margin: 0 25%;
}
JSFiddle isn't working, but I'll get one up ASAP.
If I'm understanding correctly, the following should do the trick if the width of the div is specified
div {margin: 0 auto;}
I need to create a page that has two divs. There is a bottom one of fixed height that must always be visible, no matter the size of the page. All the space above it (if there is any) should then be allocated to the other div which will contain a canvas. The canvas can be of varying height, large or small, depending on data and other conditions. If it's larger than the space allocated, I'd like to have a scrollbar appear
I'm getting close. I can get the bottom div to always be visible via position:absolute and bottom:0. But I can't get the behavior I'm looking for for the top div, which is to expand to fill the rest of the space above the fixed bottom but not beyond if the canvas is big.
Edit: here is the code:
.top {
height: 500px;
overflow-y: auto;
}
.bottom {
position: absolute;
bottom: 0;
height: 20px;
}
There is javascript later that generates the canvas in the top div; based on server side code, it can be of arbitrary height.
What I have above looks right, but I want to remove the height: 500px from the top div to have it expand to use all the remaining available space on the screen.
From what I understood you want a footer to be always visible and the content could be of varying height. What I would basically do is
// Create a padding to allow all content to be visible
body { padding-bottom: 5em; }
footer
{
// Move it to the bottom and fix it to the view
position: fixed; bottom: 0px;
// Give it its dimensions. Height should be the same or less than the body bottom-padding.
height: 5em; width: 100%;
}
Here is an example: http://tinkerbin.com/gF303DsM