I have two rows of nested panels inside of a primary panel. The 1st row has 3 panels of unequal heights. How do I make the 3 panels to be the same height of the highest panel (panel #3 in the jsfiddle link)?
Here's the jsfiddle - http://jsfiddle.net/niner911/MgcDU/8905/
I would like panel #1 and panel #2 the same height of panel #3, or whichever the tallest panel would be.
Thanks for the help.
Here's my markup:
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">outer</div>
<div class="row">
<div class="col-xs-4">
<div class="panel panel-info">
<div class="panel-heading">1</div>
<div class="panel-body">
<div class="list-group">
<div class="list-group-item">111</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="panel panel-info">
<div class="panel-heading">2</div>
<div class="panel-body">
<div class="list-group">
<div class="list-group-item">222</div>
<div class="list-group-item">222</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="panel panel-info">
<div class="panel-heading">3</div>
<div class="panel-body">
<div class="list-group">
<div class="list-group-item">333</div>
<div class="list-group-item">333</div>
<div class="list-group-item">333</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="panel panel-info">
<div class="panel-heading">
<span>lower</span>
</div>
<div class="panel-body">
xyz
</div>
</div>
</div>
</div>
</div>
Try using map() to process each item and get the size of the tallest panel. Than apply this height to each panel.
JS
var heightTallest = Math.max.apply(null, $(".panel-info").map(function ()
{
return $(this).outerHeight();
}).get());
$('.panel-info').css({ height: heightTallest + 'px' });
Updated jsfiddle:
http://jsfiddle.net/MgcDU/8915/
using jquery apply height to children of .row
$('.row').each(function(){
var RowHeight = $(this).innerHeight();
$(this).children().css({ height: RowHeight + 'px' });
});
and set .panel height to what size you desire, eg. 100%
If you're okay with the browser compatibility limitations, you could try this CSS flexbox-based experimental code: https://github.com/twbs/bootstrap/pull/11851
Related
I am trying to build a page with a button and panel. The code is built in a reusable way as this button will be used in multiple pages. However, in a particular page we have a panel displaying info and now they wanted to show this button inside panel header. Can anyone help me to merge these two divs in a separate page using CSS.
Current:
Desired:
Button code:
<div>
<p class=""><span class="fa fa-star"></span>Mark Read</p>
</div>
Panel code:
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
You can just move it into the heading and remove the div
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<p class=""><span class="fa fa-star"></span>Mark Read</p>Panel Heading</div>
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
I have a ng-repeat that has a variable height.
If I use a fixed height everything looks good. But I need the height of the parent panel to adjust automatically according to the ng-repeat child elements, otherwise I have overflow problems.
Is there any way to do this?
With Fixed height (see overflow at the bottom):
Without Fixed Height:
The code of the panels:
<div class="my-panel" ng-repeat="x in month.days">
<div class="panel-today" ng-show="x.today">
TODAY
</div>
<div class="panel" ng-class="x.panel_class">
<div class="panel-heading {{x.weekend}}">{{x.day}} {{x.date | date : 'dd-MM'}}</div>
<div class="panel-body my-panel-body">
<div ng-show="x.suspension != ''" style="width: 100%; text-align: center">
<b>{{x.suspension}}</b>
</div>
<div ng-show="x.suspension == ''">
<div class="well well-sm day-well">
<div class="day_period">
<div class="pull-right">
{{x.times.day.from}}<br/>
{{x.times.day.to}}
</div>
<div class="day_head">DAY</div>
</div>
<div ng-repeat="grade in x.staff.day.m">
<div class="letterCircleM">
{{grade.code}}
</div> S SIPHO
</div>
<div ng-repeat="grade in x.staff.day.f" class="letterCircleF">
{{grade.code}}
</div>
</div>
<div class="well well-sm day-well">
<div class="day_period">
<div class="pull-right">
{{x.times.night.from}}<br/>
{{x.times.night.to}}
</div>
<div class="day_head">NIGHT</div>
</div>
<div ng-repeat="grade in x.staff.night.m">
<div class="letterCircleM">
{{grade.code}}
</div> S SIPHO
</div>
<div ng-repeat="grade in x.staff.night.f" class="letterCircleF">
{{grade.code}}
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div class="panel-suspend" ng-show="x.suspension != ''">
SUSPENDED
</div>
<div ng-show="x.suspension == ''">
{{x.contract}}
</div>
</div>
</div>
</div>
If fixed height works for you, why don't you add it to the parent based on the length of the data you are repeating in ng-repeat via ng-style?
ng-style="{
'height': 30 * RepeatData.length + 'px'
}
30 is the height of one "repeated" block
I'm trying to correctly align multiple columns and rows of Bootstrap Panels.
Sorry if this is a simple question, I'm very new to Bootstrap and fairly new to CSS+HTML.
Here's the code for one panel;
<div class="row">
<div class="col-sm-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Overall</h3>
</div>
<div class="panel-body">
Panel Body.
</div>
</div>
</div>
Duplicate this, and we get two side by side. However, if we add an extra </div> at the end, the next one appears on a new line, but out of alignment. I want a similar layout to this;
X X X X
X X X X
X X X X
X X X X
Here's a screenshot of how it looks when out of alignment: http://i.imgur.com/t030kVU.png
Thanks for any help you can give, I'm sure it's something simple.
I don't really see the issue. Your markup seems fine to me. Just put your panels in a new row if you want a new row :)
<div class="row">
<div class="col-sm-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Overall</h3>
</div>
<div class="panel-body">Panel Body.</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Overall</h3>
</div>
<div class="panel-body">Panel Body.</div>
</div>
</div>
</div>
See this simple fiddle: http://jsfiddle.net/anup1986/4m0xfzz2/
I've been spinning my wheels on trying to get a div panel element to appear on the top right of the page, on the same line as the h1 element:
<div class="container">
<div class="page-header">
<h1>
<img src="logo.png"> Page title
</h1>
<div class="panel panel-primary">
...content...
</div>
</div>
...
</div>
I'm a bit of an amateur with CSS/HTML, but I've tried the pull-left/right classes along with every permutation of display/position, etc. The outcome is always garbled. Any suggestions?
you have to add pull-left to the h1 too.. to have both of them floated..
also add a .cleafix class to the page-header div
<div class="container">
<div class="page-header clearfix">
<h1 class="pull-left">
<img src="logo.png"> Page title
</h1>
<div class="panel panel-primary pull-right">
...content...
</div>
</div>
...
</div>
I wouldn't use the .page-header for this, it doesn't clear and it's meant for text. Use the grid system so that you can set a size for your panel as they are not a set width and requires a wrapper to have a width. It will layout very cleanly this way.
Just a note: when you use the .pull-right and .pull-left classes on anything in Bootstrap these cover all viewport sizes and the results can look pretty yucky as the viewport gets smaller.
DEMO: http://jsbin.com/sadup/1
<div class="container">
<div class="row">
<div class="col-sm-8">
<img src="http://placehold.it/200x75/444444/FFFFFF&text=logo" class="img-responsive" alt="Logo">
</div>
<!--/.col-sm-8 -->
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<!--/.col-sm-4 -->
</div>
<!--/.row -->
</div>
<!--/.container -->
I am using bootstrap's panel to display text and image, but as the text grows, the body of the panel also increases. I want to know how to create the body with fixed height, e.g. 10 rows or at most 10 rows. Here is my code:
<div class="span4">
<div class="panel panel-primary">
<div class="panel-heading">jhdsahfjhdfhs</div>
<div class="panel-body">fdoinfds sdofjohisdfj</div>
</div>
</div>
You can use max-height in an inline style attribute, as below:
<div class="panel panel-primary">
<div class="panel-heading">jhdsahfjhdfhs</div>
<div class="panel-body" style="max-height: 10;">fdoinfds sdofjohisdfj</div>
</div>
To use scrolling with content that overflows a given max-height, you can alternatively try the following:
<div class="panel panel-primary">
<div class="panel-heading">jhdsahfjhdfhs</div>
<div class="panel-body" style="max-height: 10;overflow-y: scroll;">fdoinfds sdofjohisdfj</div>
</div>
To restrict the height to a fixed value you can use something like this.
<div class="panel panel-primary">
<div class="panel-heading">jhdsahfjhdfhs</div>
<div class="panel-body" style="min-height: 10; max-height: 10;">fdoinfds sdofjohisdfj</div>
</div>
Specify the same value for both max-height and min-height (either in pixels or in points – as long as it’s consistent).
You can also put the same styles in css class in a stylesheet (or a style tag as shown below) and then include the same in your tag. See below:
Style Code:
.fixed-panel {
min-height: 10;
max-height: 10;
overflow-y: scroll;
}
Apply Style :
<div class="panel panel-primary">
<div class="panel-heading">jhdsahfjhdfhs</div>
<div class="panel-body fixed-panel">fdoinfds sdofjohisdfj</div>
</div>
HTML :
<div class="span4">
<div class="panel panel-primary">
<div class="panel-heading">jhdsahfjhdfhs</div>
<div class="panel-body panel-height">fdoinfds sdofjohisdfj</div>
</div>
</div>
CSS :
.panel-height {
height: 100px; / change according to your requirement/
}