I have a page layout that involves a fixed sidebar to the left and a main container on the rest of the page to the right. Inside that right side container which is a div I have 2 elements
<div class="col-sm-12 col-md-5 col-lg-3">
<custom directive>
</div>
<div class="col-sm-12 col-md-7 col-lg-9">
<another custom directive>
</div>
The content of the second div is long so scrolling is implied.
What I want to do is make the first div sticky. So I applied a position:fixed to it in css but that takes it out of the context of the right side container which means the css classes responsive width don't work anymore. Also the 2 divs overlap.
I am looking for a clean way to handle this. The best I thought of is using a dummy div like so :
<div class="col-sm-12 col-md-5 col-lg-3 dummy-div">
</div>
<div class="col-sm-12 col-md-5 col-lg-3 sticky-div">
<custom directive>
</div>
<div class="col-sm-12 col-md-7 col-lg-9">
<another custom directive>
</div>
With this I thought of creating an element directive that uses jquery to set the witdh of sticky-div to the width of the dummy-div.
I still think this isn't a very nice solution though, and was wondering if there is a cleaner way?
First off do not duplicate Class you should just have one class="" with all of your class' inside it.
Instead of creating a dummy div to compensate from flow removal you should just give the non fixed <div> a margin or padding to compensate for the loss of the fixed <div>.
You could just use j query to gram the width of the container and inject like you mentioned.
another idea would be to use dynamic widths and match them up to the container.
e.g. 50% couple that with calc and I don't see any reason why you cant achieve the exact width of the so called parent of the fixed <div>.
The solution I went for in the end was keeping the dummy div and then calculating the width of the fixed div with media queries.
#media only screen and (max-width : 1200px) {
position: fixed;
width: 30%;
margin-left: 1.3em;
}
#media only screen and (max-width : 992px) {
position: relative;
width: 95% ;
margin-right: 1.3em;
}
I also needed the div to not be fixed for small screens where the layout goes vertical.
Related
I can't figure out how to make the grids to extend to the container's full width no matter how many columns there are
<div class="container">
<div class="row">
<div class="col-md-2 first"></div>
<div class="col-md-9 second"></div>
</div>
</div>
In the example above are displayed 2 columns inline and the .row having full width.Yet if i remove the first div(keeping the exact same code), the second div will change its position to left and will keep the original width.I need it to stretch to the full width of the container.The reason i need this is because i'll have some php conditional expression that will prevent it from showing,in which case i want the template to change and the second div to be full width and position on the middle.
I found an answer with the following CSS which indeed worked but it also messed the responsive structure and i'll have to patch it up till no end probably:
CSS:
.row{
display: table;
width: 100%;
}
.first, .second{
display: table-cell;
float: none;
}
.second{
width: 100%;
}
Since i'm a newbie with Bootstrap, i was wondering if there is any built in class which solves this problem? Thank you
In this case, just have the first div as col-2 and the second one as col.
col will be 100% width if col-2 is missing, but if it is there, col will fill the remaining columns.
Check out the Grid system documentation.
I'm not sure why you're using display:table. Just use Bootstrap 4 auto-layout grid, and the second will fill the width if the first is missing/hidden.
"Auto-layout for flexbox grid columns also means you can set the width
of one column and have the sibling columns automatically resize around
it."
https://www.codeply.com/go/igkSq57Vwn
<div class="row">
<div class="col-md-2 first"></div>
<div class="col-md second"></div>
</div>
i have same problem . and you can fix it by set (margin : 0px) for row (by style attribute or id in css file) and set (padding : 0px) for col (by style attribute or id in css file)
I have added content div in which having two column div as col-md-3 and as col-md-9
In <div class="col-md-3"> in between having tabular panel menu and in tabular menu have one accordion with scroll effect.
With having min-height: 329px !important
When i check on browser with 1366*768 it looks good with same height
for <div class="col-md-3"> and for 2nd div` with same height
but when i change resolution of pc it conflicts
I want same height as per 2nd div having class .col-md-9
please give me solution on that.
display:flex is the correct solution for you apply this property in parent div like this
HTML
<div class="parent">
<div class="col-md-3">
// you content here
</div>
<div class="col-md-9">
// you content here
</div>
</div>
CSS
.parent{
display:flex;
}
This will make equal height of elements in .parent.
You can add another class on the divs like this class="col-md-3 sameheight" and class="col-md-9 sameheight" and than style it giving a static height if this is what you want.
.sameheight
{
height: 300px //for example
}
For the responsivnes than you can work with media queries. But also the display: flex for the parent of 2 divs is a good solution if it is applicable to you.
I've setup a bootstrap grid like so:
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<!-- content -->
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<!-- content -->
</div>
<!-- More cols -->
</div>
The number of cols to display on each grid row should depend on screen size so I find it difficult to specify more div class="row" or do div clearfix to insert breaks. That's why all cols are inside the same div class="row".
It all works fine in mobile view (width < 500) and desktop/tablet landscape (width > 1024), but in between those widths the row + cell content goes beyond the screen with horizontal scrolling and thus the images doesn't center align.
You can see it live here if you resize your width to around 700-750. I've been trying to debug why this is happening, but I can't figure out what I'm doing wrong. Anyone care to help?
You Define min width in
"#header-wrap, #banner-wrap, #nav-wrap, #main-wrap, #footer-wrap, #total-wrapper"
{background: #fff none repeat scroll 0 0;
min-width: 960px;
width: 100%;}
Remove this min-width.
Second Thing you add width your Custom CSS for add.css Line No.6
this width remove or add max-width & try.
.container {
margin: 0 auto;
width: 960px;}
If you are talking about 700-750px then simply remove the max-width from .container class and also from remove max-width from this #header-wrap, #banner-wrap, #nav-wrap, #main-wrap, #footer-wrap, #total-wrapper.
I have edited my answer but please go with lalji's answer..
I'm a beginner in css and I have a little problem. I tested different methods to handle a responsive 4 div grid with css, and I failed.
I want to responsively arrange the 4 divs as an grid with 2 columns and, if the display is to narrow it should be floating to a one column layout.
Here is a sketch of the responsive grid:
Here is a simple responsive grid with 4 div boxes in plain CSS and HTML it aranges from two to one columns when the browser width becomes smaller :
DEMO (resize the result window to see the effect)
Note that the max-width value on the #container is set to 450px so that 2 blocks + their margin can fit by width in two colmuns.
When the widow is smaller than 450px the width of the #container adapts to the window width and as the block can't fit anymore, they rearage to one column.
#container {
text-align: center;
max-width: 450px;
margin: 0 auto;
}
.block {
width: 200px;
height: 200px;
margin: 10px;
display: inline-block;
background: #00CC99;
}
<div id="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
</div>
You may want to check out Bootstrap, and specifically their Grid System. You can easily accomplish what you want with that. Otherwise, you'd want to look into writing your own CSS Media Queries to handle the different screen sizes.
Here's a JSFiddle showing how this can be achieved using Bootstrap. Just drag the side of the Result container to make it smaller and you can see the blocks shift. This may need some tweaking but it should get you going.
<div class="row">
<div class="col-sm-2 col-sm-offset-3 col-xs-12">
<div class="block">1</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="block">2</div>
</div>
<div class="col-sm-2 col-sm-offset-3 col-xs-12">
<div class="block">3</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="block">4</div>
</div>
</div>
In the above code, I'm creating a Bootstrap Grid which uses 12 columns. You can specify the column width at different screen sizes, for example the class col-sm-2 is saying use 2/12ths of the width for small screen sizes, then offset it 3 to center it. col-xs-12 says to use the full width for extra small screen sizes (essentially moving each block to its own row for extra small screens). Note the row class as well which is also Bootstrap specific.
Hopefully this helps!
Bootstrap is a great tool to do this as the above answerer said. Bootstrap allows you to position items in a grid layout (as you want).
Another way to do this is create media queries in css that will take effect when the browser has a smaller or larger min-width.
I recommend using Bootstrap as all of the heavy lifting is done for you and you would just have to make small tweaks to ensure it looks like you want it to.
As a beginner user of Bootstrap's grid system, I need to keep two divs side-by-side using a float:left regardless of device. This is so that a jQuery animation moves a parent div right and left to bring either div into view. How to structure the HTML of the green boxes to achieve this effect? Or it purely a css media query matter?
Disregard the blue box.
This is what I have so far:
<div class="container">
<div class="col-xs-12 col-md-7 view">
<div id="panelviewer">
<div class="row">
<div class="col-xs-12 col-md-6 panel1">one</div>
<div class="col-xs-12 col-md-6 panel2">two</div>
</div>
</div>
</div>
</div>
Jsfiddle
There are other ways to keep the divs side by side and achieve what you need:
#panelviewer .row {white-space:nowrap;}
.panel1 {display:inline-block;float:none;background:#aaa;}
.panel2 {display:inline-block;float:none;background:#eee;}
Demo http://jsfiddle.net/7HcQ8/3/
No matter what unless you implicitly specify in a media query and your cells are too wide to fit in mobile it will force onto two lines. In this case when it hits the mobile breakpoint decrease the size of the content so it will fit. Place a unique class on those DIVs such as class="sizeSmaller" and this might help out:
#media (max-width: 768px) {
.sizeSmaller {
height:50%;
width:50%;
}
}
Adjust the width of the media query to suit your neds.