Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jitendra Vyas
2,349 PointsHow to have same height for all column as biggest column which all comes in same line?
See example here. http://jsbin.com/remeci/2/edit
I know if I use two .rows then I can solve this but in my current requirement I can't do that. because if first row will have only 2 wishies then 3rd block will be blank. and 1st block from 2nd row will not jump to fill that place
Jitendra Vyas
2,349 PointsIt should not matter as I want to make it responsive. Column is same row can be 1 to anything. On Mobile it will be 1 only
Whenever more than 1 block comes in same row should have same height.
Jason Anello
Courses Plus Student 94,610 PointsI don't like to suggest flexbox because it does not have 100% support yet and not yet a final standard. That will probably solve your problem here but I recommend you consider that as an enhancement. You should still come up with another solution that will work for most/all people.
What I was getting at with my question is that you can possibly solve this problem by using :nth-child and float clearing to get everything into rows.
This is how the gallery is handled in the "How to Make a Website" course.
In your fiddle, you have the widths set to 25% so this would produce 4 per row. What will you be doing in your code to change this to something else so that there will be a different number per row.
1 Answer
Kevin Korte
28,148 PointsOne of the biggest problems you're running into is that Bootstrap's grid was not meant to work this way. In your example, you have 24 columns in a row designed for 12. This is creating this weird layout problem.
I think you have a couple ways you can solve this.
1) Probably the easiest:
Create a best guess fixed height with CSS, and than set overflow: auto so if content flows outside of the fixed height div, a scroll bar appears and the content can still be viewed. Not terribly great UX though.
2) Probably a better solution than above: Loop through every column class with Javascript, getting the height of each element, and storing it in an array. Than take that highest number, and just use Javascript to apply a CSS height of the highest box.
Still have a UX problem of having the possibility of a ton of white space in boxes with not much content. If the content will all be similar in length, this isn't as bad. However, you wouldn't want this solution if some columns have a paragraph, and some columns have 10 paragraphs.
That would get your desired results. Problem is I still don't know how or if bootstrap will react consistently to having more than 12 columns in a row.
Here is what Bootstrap says about it in their docs. If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line
Whats the reason that you can't put in additional rows? You might be able to do that with Javascript, or if this content is generated from a CMS, like wordpress, I'm sure that a custom content filter function could be used to add the div rows in while still getting your desired effect.
Another option might be to look at a JS grid layout like Masonry. http://masonry.desandro.com/
Another option might be to look at a Flexbox solution. I'm not super hardcore on flexbox yet, but this seems like Flexbox might have a better way of handling this situation, without using JS.
Anyway, there are some options, which are always good.
Jitendra Vyas
2,349 PointsBootstrap classes I can remove. I just used them for quick prototyping. I don't want masonry type of style. and I can't give fixed height
Kevin Korte
28,148 PointsOkay, so Masonry is out, when you say you can't give fixed height, do you also mean that dynamically with JS, based on what's actually there?
Jitendra Vyas
2,349 PointsCan you tell me the code to achieve this with jQuery. I'm fine with "UX problem of having the possibility of a ton of white space in boxes with not much content."
By the way I forgot to say thanks to you for the analysis of the problem and possible solutions
Jason Anello
Courses Plus Student 94,610 PointsDo you mean that you're not using bootstrap for this project then?
Kevin Korte
28,148 PointsCheck out this: http://jsfiddle.net/sheriffderek/76Rsh/
The jQuery code to set the boxes height dynamically is pretty simple, and should be easy to translate to whatever class names you use.
Jason Anello
Courses Plus Student 94,610 PointsI would have reservations against a jQuery solution because you will have to make sure you rerun that code anytime the heights might change. If the browser is resized then the text can wrap to more lines or the user can change the font size in their browser which can change the heights.
Jitendra Vyas
2,349 Points@jason - I'm using bootstrap in project but I can use non-bootstap solution on specific case if I can get what I want
Jitendra Vyas
2,349 PointsJason Anello But this not possible with CSS only with browser compatibility. so Javascript is the only solution.
Is it possible that if we can solve this problem using flexobox than use flexbox solution for supported browser and using Modrnizr to detect non-flexbox browser and give jQuery solution only to them?
Kevin Korte
28,148 PointsJason Anello I'm not a huge fan either of use a JS solution to solve this, but besides JS and Flexbox I'm not sure what else to suggest. They both have their downfalls that you've pointed out.
To remedy the issues you brought up, jQuery could be used to detect if the user has the browser zoomed in, or if the window size changes, you could run the code that sets the height dynamically, on each resize event. Sucks, but it would work.
Jitendra Vyas I'd still set a hardcoded fallback CSS height and set overflow to auto. If you go with the JS solution, and the user has JS disabled, the whole thing falls apart again. At least with CSS height fallback, it's better than the layout breaking. Plus a jQuery solution would override a height value in a CSS file. So nothing should conflict there.
Kevin Korte
28,148 PointsJitendra Vyas Yes, the Flexbox -> Modernizr -> jQuery solution would work as well. Probably the most robust way to go at the moment.
Jason Anello
Courses Plus Student 94,610 PointsKevin,
Ultimately I think flexbox will be the way to go on this when it reaches 100%. I think the best solution is one where the browser is handling it natively for you. I think if Jitendra goes with a jQuery solution then you have to guard against all the pitfalls that come with that. Like you mentioned the resize event and you also need a way to respond to user font size changes.
I was trying to suggest a float clearing solution which will get everything into rows with a flexbox enhancement to get equal heights.
Jitendra,
One thing that you can try is to add the following css to your jsbin:
.row div:nth-child(4n + 1) {
clear: left;
}
See if that at least gets you the grid layout you're looking for on that particular example. It won't give you equal heights but everything will be in rows.
The problem with this solution is that it depends on knowing how many you want per row.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Jitendra,
Are you trying to have 4 per row in your grid? I'm a little confused on what the expected layout should be.