I am using BS3 and need to have 2 columns with column 1 sticky whilst the second scrolls as normal - this works fine using class affix on the 1st column but that column never fills the full width hence it doesn't have the correct borders, background etc as the rest of the content.
I have read a few answers which explain this is because fixed takes the content out of the normal flow of the page - some suggestions have been to use width: inherit and I have tried a few JS options I found in various answers but none work for me. Likewise making column 1, 100% makes it full the whole area and clash with the 2nd column
Is there a simple way in BS3 of having a fixed left column with a normal right column where both columns fill to their full width?
<div class="row">
<div class="col-lg-3">
<div class="panel panel-flat affix">
<div class="panel-body" style="background-color:red">
1 of 2
</div>
</div>
</div>
<div class="col-lg-6">
<div class="panel panel-flat">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare ipsum vitae
</div>
</div>
</div>
.col-lg-3 {
width: 25%;
float:left;
}
.col-lg-6 {
width: 50%;
float:left;
}
https://jsfiddle.net/6bwkzd5y/1/
Bootstrap Affix uses position: fixed to display a block statically, and fixed positioned elements don't listen to the parents positional styles to display. To make this work, I added a custom class inherit-width and the style width: inherit. Optionally, if you want to make all .affix elements have this, you can just do that with some simple CSS: .affix { width: inherit; }.
Here is the updated jsfiddle:
https://jsfiddle.net/dx70wv95/2/
Related
This question already has answers here:
Align child elements of different blocks
(3 answers)
Closed 2 years ago.
I have this situation, with two seperated card components, and it is nesseserly to add both headings same height.
Is it possible using only CSS?
<div class="card">
<div class="card__head">
<h4 class="heading4 c-white">
Heading
</h4>
</div>
<div class="card__body">
<p class="paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis commodo mauris.
</p>
</div>
</div>
simple no by pure css you can not do this. you have to put fixed height which is not feasible. best way to go is matchHeight js and using display:inline-block; and vertical-align:middle.
1) you apply div structure and css according to codepen using inline-block. keep in mind that both title are in different columns
<div class="fa-title"><h4>heading 1</h4></div>
<div class="fa-title"><h4>heading 2</h4></div>
<style>
.fa-title{text-align:center;}
.fa-title h4{display:inline-block; vertical-align:middle;}
.fa-title h4::before,
.fa-title h4::after{content:""; display:inline-block; vertical-align:middle; height:100%; white-space:nowrap;}
</style>
2) apply js to that div for common height of both div.
`$('.fa-title').mathcHeight();`
http://brm.io/jquery-match-height-demo/
https://codepen.io/edge0703/pen/iHJuA
You want same height heading and if title is bigger then you need to hide overflow title text part using css.
You can use this css properties for heading section:
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
I'm trying to use <img> within mdl-card__supporting-text but if the image is bigger than the card, the image would not scaled to fit within the card's supporting text area. See the codepen for example. See how the right side of the image is covered up.
I'm not expert in css and mdl. I have also tried to search for a solution and didn't quite find one that would work. If anyone has an idea, I would really appreciate if you could give a helping hand. Thanks.
For me this simple snippet worked:
img {
height: auto;
width: 100%;
}
But if you will have more than just this image, you should consider using a class for this.
.card-img {
height: auto;
width: 100%;
}
And for better overview you should use the .mdl-card__media class on a div as the container, if you are trying to make a layout like this.
<div class="mdl-card mdl-shadow--2dp demo-card-square">
<div class="mdl-card__media">
<img src="http://placehold.it/400x300">
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenan convallis.
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
View Updates
</a>
</div>
</div>
I want to preface my request by apologizing for asking a question that has already been asked; I've tried a lot of the suggestions I've seen and been unsuccessful in getting my code to work.
Onto my question: I'm trying to get four divs to position themselves side by side whenever possible on my Wordpress site starting from when the screen width is 1030px or smaller. My layout is responsive, and my divs are 300px wide, so I don't want them to sit adjacent to each other if they will break their container (i.e. if the container's width is 340px, I don't want the divs to be next to each other; I want to see the divs stacked on top of each other. If the container's width is 800px, I want a 2x2 grid of divs).
My site (the divs are the green blocks): http://coolnewssite.com/
Html for the divs (the "sidebar" is the container):
<aside id="sidebar" class="span4">
<div class="widget-area" role="complementary">
<aside id="text-18" class="widget widget-1 odd default widget_text clearfix">
<div class="textwidget">
<img src="http://coolnewssite.com/wp-content/uploads/2014/02/SampleAd.jpg">
</div>
</aside>
<aside id="text-3" class="widget widget-2 even default widget_text clearfix">
<div class="textwidget">
<img src="http://coolnewssite.com/wp-content/uploads/2014/02/SampleAd.jpg">
</div>
</aside>
<aside id="text-17" class="widget widget-3 odd default widget_text clearfix">
<div class="textwidget">
<img src="http://coolnewssite.com/wp-content/uploads/2014/02/SampleAd.jpg">
</div>
</aside>
<aside id="text-19" class="widget widget-4 even default widget_text clearfix">
<div class="textwidget">
<img src="http://coolnewssite.com/wp-content/uploads/2014/02/SampleAd.jpg">
</div>
</aside>
</div>
</aside>
Any clues as to how to set this up? I've tried fiddling with display: inline-block and float:left, but so far, no luck. Thanks in advance for your help!
At the breakpoint you want them to sit side by side, try the following:
// This will tell the sidebar to be full-width rather than the set 300px
aside#sidebar {
width:100%;
}
.widget {
// This sets the max-width of the ad area to 50%
max-width: 50%;
// This tells the browser to put the border and any padding inside the max-width
box-sizing: border-box;
// This will sit the elements next to each other
float: left;
}
.textwidget {
// This overrides the 300px width on the inner div
width: auto;
}
I have a div that text can be dynamically added to. Using CSS regions, I make the text flow from one div to another. However, it seems I have to know how many divs I need in advance for fit the text. I want to only create a div to flow into when the one before it overflows. I haven't been able to find an onOverflow event. Below is my working static example that I modified from the HTMLRocks example. I would like this but without having to create 3 "regions" up front. I'd prefer to only create one at first and then generate others as needed. Thanks.
<!DOCTYPE html>
<html>
<head>
<style>
#content {
-webkit-flow-into: article-flow;
display: -webkit-flex;
display: flex;
}
.region {
-webkit-flow-from: article-flow;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: solid 2px black;
}
</style>
</head>
<body>
<div class="region"></div>
<div class="region"></div>
<div class="region"></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</body>
</html>
If you are using jQuery you can compare the scroll width with the divs width and then create more divs.
if ($('.region')[0].scrollWidth > $('.region').width()) {
//Text has over-flowed, create another div
}
There is the regionoversetchange to listen to and add more regions. For the moment, you will have to use the webkit prefix in Chrome and iOS.
The NamedFlow has a property called overset. If true, more regions are needed. If it is false, you have more - or exactly - the amount of regions required.
The NamedFlow also has a firstEmptyRegionIndex property which indicates at which index of the region chain do regions start to be empty because no content has reached them.
var flow = document.webkitGetNamedFlows()['myFlow']
flow.addEventListener('webkitregionoversetchange', function(){
flow.overset // true or false
flow.firstEmptyRegionIndex // -1 if no empty regions, other index otherwise
}
I am planning to use a Grid system for a site, but I'd like to be able to break the grid selectively. This would mean, for example, turning an OOCSS size1of2 into a size1of1). Ideally, the html would look something like this:
<div class="line">
<div class="unit size1of2 respond-480">
<h3>1/2</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="unit size1of2 respond-480 lastUnit">
<h3>1/2</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
Then I'd have something like the following css:
#media screen and (max-device-width: 480px) {
.respond-480 {
/* something to linearize the box */
}
}
Does anyone know of a way to do this with OOCSS, or another grid system? I'm looking for this level of control, as opposed to a simpler responsive grid.
Turns out it makes more sense to add the respond480 class to the line rather than the unit. Not surprising. The following code works rather well for modern browsers. I used the child selector to simplify things -- though it may be possible to do a workaround, older browsers (IE<6) don't support these media queries anyway.
#media screen and (max-width: 480px) {
.respond480 > .unit {
width: auto;
float: none;
}
}
I was digging through the OOCSS source, and came across grids/grids_iphone.css. This lends some credibility to my strategy. Anyone know if !important is mandatory? Selectivity seems work for me without it -- probably due to the two class selectors.
#media screen and (max-width: 319px) {
.unit {
float: none !important;
width: auto !important;
}
}
And here's a page showing it in action. I used Nicole Sullivan's grid test from Arnaud Gueras, but with more filler text. Note that I left one 2of2 segment purposefully un-linearized, to demonstrate that it's not necessary to linearize everything.
Because she said to avoid !important unless it's a leaf node at Velocity conference, it's odd how she would put that in her code.
Check out Cascade Framework. It has an OOCSS architecture and supports responsive design out of the box (although it is optional and can be left out if you want).
With Cascade Framework, you'd implement your example like this :
<div class="col">
<div class="col size1of2">
<div class="cell">
<h3>1/2</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
<div class="col sizefill">
<div class="cell">
<h3>1/2</h3>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>