Since this question is outdated my question is how do I create a fluid row within non-fluid container.
I want to have a non-fluid container as my default layout, however the map I am placing, i need it to be full-width non-fluid.
here is my html:
<div class="container">
<div class="row-fluid">
<div id="map-canvas" class="container-fluid"></div>
</div>
</div>
row-fluid is not working with bootstrap 3, setting width: 100%; only takes width of its parent (non-fluid container).
JS Fiddle, Please increase output window width so you can see the difference.
Thanks in advance
Try following code. You can make a 100% width container inside fixed layout.
http://jsfiddle.net/m1L6pfwm/2/
HTML
<div class="row row-full"> content... </>
CSS
.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
height: 100px;
margin-top: 100px;
left: 50%;
}
I'm not sure that a completely understand your question, but can't you just use Bootstrap's container-fluid to contain the map row?
http://bootply.com/KP9j6dKCES
<div class="container-fluid">
<div class="row" style="height:100px; background: #f00;">
this should take 100% width
</div>
</div>
Either use apropriate layout
or get same effect using following
<div class="row-fluid" style="position:absolute;z-index:5">
<div id="map-canvas" class="container-fluid"></div>
</div>
<div class="container" style="z-index:0">
<--fluid with respect to first static/relative parent-->
<div class="row-fluid">
<div id="map-canvas" class="container-fluid"></div>
</div>
</div>
You can play same effect using Z-index but not with it's grand parent
Related
I want the page to be 100vh in height, so that there are no scrollbars on the whole page. For some reason the main grid is bigger than the screen size and some of the elements are getting clipped.
<html>
<body>
<div id="root">
<div class="app_container">
<div class="navigation">
<div class="navigation_logo_container"><img src="/icon.9c86b69e.png"
class="navigation_logo"><span>Sample</span></div>
<div class="navigation_buttons_container">
<div><span>Sample</span></div>
<div><span>Sample</span></div>
<div><span>Sample</span></div>
<div><span>Sample</span></div>
</div>
</div>
<div class="game">
<div class="quiz"><span class="question_text">Sample</span>
<div class="answer_choices">
<div class="answer_choice"><span>Sample</span></div>
<div class="answer_choice"><span>Sample</span></div>
<div class="answer_choice"><span>Sample</span></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Codepen: https://codepen.io/GuacomoleCyclone/pen/RwKjmzO
Base on your setup the 100vh is working but your children are adding to the cause...
Meaning you have nav with height on fit-content...so lets just say 65px;
but then you have game div at height: 100%
If you remove that nav it works as you want, ..so for easily to solve this, you would have to also equate that extra height besides 100% game(nav height).
So meaning you would have to give:
.game {
height: calc(100% - 65px);
}
There are other ways to solve your setup without doing this but this is one of them.
I am creating a bootstrap template which will be contain two divs, from which one div the left-one should be fixed and the right one should be scrollable, similar to the http://www.trulia.com. I have tried the following code:
<div class="row">
<div class="col-md-6">
<img src="">
</div><!--Fixed one-->
<div class="col-md-6">
</div><!--Scrollable-->
</div>
It will solve your problem
.col-md-6:nth-child(1){
position:fixed;
}
.col-md-6:nth-child(2) {
height: 200px; // Set this height to the appropriate size
overflow: scroll;
}
I want to create grid view, where header contains 10% height of the page and body 90%.
I have tried to adjust this, but body part does not grow when element section on right hand scales.
I want to add elements in right panel in responsive manner.
Is there any good way to organize this?
fiddle: http://jsfiddle.net/karimkhan/q18yzkoz/5/
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" style="background-color:lavender;">
<div class="header">Header Height should be 10% of the page</div>
</div>
</div>
<div class="row" >
<div class="col-xs-8" style="background-color:lavenderblush; height:100%">Body, Height should be 90% of th page
</div>
<div class="col-xs-4" style="background-color:lavender;">
<!-- 12 repeated rows as below, height should fit in 90% region in responsive manner -->
<div class="row" >
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">Item1</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">item2</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">Item3</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">item4</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">Item5</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">item6</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">Item7</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">item8</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">Item9</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">item10</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">Item11</div>
</div>
<div class="col-xs-6" style="background-color:lavender;">
<div class="element-box">item12</div>
</div>
</div>
</div>
</div>
</body>
You have a ton of divs that you're not actually using. ALL of those need to explicitly be set to 100% height and also have a wrapper.
Take a look at this pen: http://codepen.io/anon/pen/bdOyJp
You have a ton of nested divs. I cut the HTML down to this:
<div class="header">Header Height should be 10% of the page</div>
<div class="content row">
<div class="col-xs-8" style="background-color:lavenderblush; height:100%">
Body, Height should be 90% of th page
</div>
<div class="col-xs-4" style="background-color:lavender;">
<!-- all the items... -->
</div>
</div>
And here's what I cut the CSS down to:
html, body {
height: 100%;
}
.header {
height : 10%;
background: teal;
}
.content {
width: 100%;
height: 90%;
background: deeppink;
}
I set a background on .content so that it would fill the right column. It is a 'faux column' technique but there are many more.
Neither the BODY (.col-xs-8) or the HEADER (.header) heights in your code are being recognized. Hence, not only is the body not 90%, but the header is not 10%. The height of the header is simply the height of the content. You can plug in other percentage values and you'll see nothing changes.
This is caused by the multitude of nested containers and various assigned heights in your code, which is a bit confusing and convoluted. However, your mark-up doesn't have to change to accomplish your goal.
Below are my adjustments to your code. I've used inline styles. Eventually, you may want to move these styles to your external stylesheet which may be better for clarity, convenience and maintenance, but I've used inline styles here for demonstration purposes.
First, add a 100% height to your primary div container:
<div class="container-fluid" style="height: 100%;">
Second, add a 10% height to your header row and include the inline styles from the child div.
<div class="row" style="height: 10%; background-color:lavender;">
<div class="col-xs-12" //DELETE THIS: style="background-color:lavender;"//>
Third, add a 90% height to your body row and and include the inline styles from the child div.
<div class="row" style="height: 90%; background-color: lavenderblush;">
<div class="col-xs-8" //DELETE THIS: style="background-color:lavenderblush; height:100%"//>
This does the trick. I gives you 10% for the height and 90% for the body.
http://jsfiddle.net/q18yzkoz/6/
Just keep in mind that the 90% is relative to the parent container (.container-fluid) with height 100%, which is relative to the HTML/BODY height 100%. So it extends all the way down to the bottom of the page (which is what your questions asks).
However, if you want the body div to match the right column, adjust the height value of the body row from 90% to ~55%.
http://jsfiddle.net/q18yzkoz/8/
OR, you can reduce the height value of the parent container (.container-fluid) to, let's say, 70%, and work from there.
Lastly, you stated in your question:
Is there any good way to organize this?
There are other ways to create a responsive grid layout that may be more efficient and robust. Here are four methods you may want to consider:
Easy Responsive CSS Grid Layouts
Hope this helps. If you have any questions leave a comment below.
Using the HTML below, I want the first div to have a static width of 265px. The second div should be next to the first one, but should be responsive (by shrinking the window this div should also shrink). How can I achieve this?
<div class="styles container">
<h1>Styles</h1>
</div>
<div class="preview container">
<h1>Preview</h1>
</div>
width: calc() will not work in all browsers.
Look at browser-support
<div style="width: 265px; float: left; background: #00f;">
test
</div>
<div style="width: calc(100%-265px); background: #000;">
test
</div>
I'm trying to create a floating panel. It needs be detached from the grid and fill the entire height of the document, on the left side like SO:
My experiment so far:
<div class="row left">
<div class="small-3">
<div class="panel">
Panel HTML
</div>
</div>
</div>
<div class="row">
<div class="small-6 columns"><div class="panel">Main - Content</div></div>
<div class="small-6 columns"><div class="panel">Main - Content</div></div>
</div>
Produce the following:
I'm not sure what is the best practice when using Foundation, and could not find a reference in their docs. Appreciate the help :)
here if found the issue https://github.com/zurb/foundation/issues/226
try this jquery plugin to sync height https://github.com/ginader/syncHeight ( i didnt tried it yet)
this guy found something of a solution for the full height problem :
https://gist.github.com/joanhard/6375966
It is also javascript based, but it's only a line of javascript compare to the use of an extra plugin...
You can set position: fixed; on the div you want to have max-height, then set its height to a 100%. I have created a quick fiddle where you can see it in action.
The HTML:
<div class="row">
<div class="small-4 columns" id="sidebar">
Fixed full height
</div>
<div class="small-8 columns">
Other Content
</div>
</div>
The CSS:
#sidebar{
position: fixed;
height: 100%;
background: #222;
color: #FFF;
padding: 5px;
}
If you're using jQuery in your project, I wrote a quick wrapper for jQuery.syncHeight, which makes it easier to use, with multiple instantiation:
https://gist.github.com/replete/5728123