I need to increase the height of the 1st panel which is in ng-repeat
Code
<div class="panel panel-default panel-height" ng-repeat="candidateInfo in aCandidateDetails">
<div class="panel-heading">
<div class="row">
<div class="col-xs-1">
<a style="cursor:pointer">
{{candidateInfo.name}}
</a>
</div>
</div>
<div stop-watch time="xyz" name="candidateInfo.name" time-of-interview="candidateInfo.doi" ></div>
</div>
Here i have applied css to the class .panel-height as below
.panel-height:first-child {
height: 500px;
}
Here the css is not getting applied ,
I cannot figure out where im going wrong .
Any help would be appreciated.
Add a class to 'panel-heading' only when the div satisfies $first and then add height to the class name 'firstChild'.
<div class="panel panel-default panel-height" ng-repeat="candidateInfo in aCandidateDetails">
<div class="panel-heading" ng-class="{'firstChild':$first}"> <!-- Try this line -->
<div class="row">
<div class="col-xs-1">
<a style="cursor:pointer">
{{candidateInfo.name}}
</a>
</div>
</div>
<div stop-watch time="xyz" name="candidateInfo.name" time-of-interview="candidateInfo.doi" ></div>
</div>
It should work, well try this,
.panel-height:nth-child(1) {
height: 500px;
background:#ccc;
}
Related
I'm trying to center a col-span-6 div to the center of the page using Twitter Bootstrap 3. Unfortunately, nothing I do is working. I used Firefox developer tools to discern the issue was most likely stemming from the fact that the col-span-6 class was floated left. Therefore, I added a style="float: none !important;" to the col-span-6 element, but that did nothing.
Help!!
<div class="panel-group col-sm-6" style="float: none;">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="card-title">test</h5>
</div>
<div class="panel-body">
<p class="card-text">test</p>
</div>
</div>
</div>
I'm not sure but it seems to me that you wanted to achieve this effect:
.super-center {
margin: 0 auto !important;
float: none !important;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="super-center panel-group col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="card-title">test</h5>
</div>
<div class="panel-body">
<p class="card-text">test</p>
</div>
</div>
</div>
It was enough to add to your div's: margin: 0 auto;
You can align a div to center of the page using the CSS. Following CSS works for me. You can try using this CSS.
.col-sm-6 {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 3px;
text-align: center;
}
<div class="panel-group col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="card-title">test</h5>
</div>
<div class="panel-body">
<p class="card-text">test</p>
</div>
</div>
</div>
You can use display: flex for this to handle alignment in a easier way. I have done a sample code below. Hope it helps you
HTML
<div class="panel-group col-sm-6">
<div class="panel panel-default d-flex h-100">
<div class="panel-heading">
<h5 class="card-title">test</h5>
</div>
<div class="panel-body">
<p class="card-text">test</p>
</div>
</div>
</div>
CSS
.d-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center
}
.h-100 {
height: 100vh !important;
}
JS Fiddle Link: https://jsfiddle.net/SJ_KIllshot/bhgx3yzv/
Use column offset with "col-sm-6" to make it in center. Here is an example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel-group col-sm-6 col-sm-offset-3">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="card-title">test</h5>
</div>
<div class="panel-body">
<p class="card-text">test</p>
</div>
</div>
</div>
It automatically push the column in center.
I have the following code:
<div class="col-xs-12 fixedContainer">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Smith Service</h1>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" ng-controller="ServiceStatus as serviceStatus">
<!--Iterates over the services-->
<div class="col-lg-3 col-md-6" ng-repeat="service in serviceStatus.services">
<server-status name="service.name" status="service.status" nodes="service.nodes"></server-status>
</div>
</div>
</div>
</div>
<ng-view></ng-view>
I want to fix the div that has the fixedContainer class always on top. Inside ng-view there is a table, with scrollable data.
I define fixedContainer class as:
.fixedContainer {
position: fixed;
z-index: 1030;
top: 0;
}
but ng-view stay below the container, something is missing.
Can you help me?
Thanks.
I have this html
<div class="row">
<div class="col-md-6" id="temp-box" >
<img id="weather-icon" src='Icons/sunny.png'></img>
<span id="temperature">50F</span>
</div>
<div class="col-md-6" > <div class="text-center" id="coodrs-title" ><span>Current Location</span></div>
<div class="position">
You Current Latitude Is: <span id="lati"></span><br/>
You Current Longitude Is: <span id="lngi"></span>
</div>
</div>
</div>
and i want the img with id #weather-icon be placed above the element with id #temperature, but both of them be inside the same row. How can i do this?
Ankit Agarwal gave me the best solution. Boootstrap's clear class!!!
Better solution is to use .clear bootstrap class. It willl work perfectly
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-6" id="temp-box" >
<img id="weather-icon" src='Icons/sunny.png'></img>
<div class="clear"></div>
<span id="temperature">50F</span>
</div>
<div class="col-md-6" > <div class="text-center" id="coodrs-title" ><span>Current Location</span></div>
<div class="position">
You Current Latitude Is: <span id="lati"></span><br/>
You Current Longitude Is: <span id="lngi"></span>
</div>
</div>
</div>
You could nest rows, like so:
<div class="row">
<div class="col-md-6" id="temp-box">
<div class="row">
<img id="weather-icon" src=''>IMAGE</img>
</div>
<div class="row"><span id="temperature">50F</span>
</div>
</div>
</div>
I'm not sure if this is the best way to to this, but it works.
Try setting:
#weather-icon {
display: block;
}
Currently you have an img & a span next to each other, which are both creating inline boxes. One way to force your image to have a line of its own is to set it to a block box element. At least that's my understanding of how it works.
Codepen:
http://codepen.io/anon/pen/pjzBRv
View code:
<div class="row">
<div class="col-md-6" id="temp-box" >
<img id="weather-icon" src='Icons/sunny.png'></img><br>
<span id="temperature">50F</span>
</div>
<div class="col-md-6" >
<div class="text-center" id="coodrs-title" ><span>Current Location</span></div> <div class="position"> You Current Latitude Is: <span id="lati"></span><br/> You Current Longitude Is: <span id="lngi">
</span>
</div>
</div>
</div>
In the code next "img" there is "br".
I want my date picker to be in the middle of the page, eg. the line where I have: <div class="center-block text-center datepicker"></div>
Obviously center-block and text-center I tried already - but neither change anything. And with the offset it just makes it close to the centre without being perfectly centre aligned.
What do I need to do?
Thanks
<div class='row'>
<div class='col-sm-12'>
<div class='page-header page-header-with-icon mg-t'> <i class='fa-icon-calendar'></i>
<h2>Calendar</h2>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="center-block text-center datepicker"></div>
</div>
</div>
</div>
</div>
Try something like this:
<div class="col-sm-12">
<div class="datepicker"></div>
</div>
Then give the date picker something like:
.datepicker {
display:inline-block;
margin:0 auto;
}
I haven't tested this, but it would be where I would start.
style="text-align:center;" shall do the trick no? I tested and for me, the "CALENDAR" text is centered
<div class="col-sm-12">
<div class="page-header page-header-with-icon mg-t" style="text-align:center;">
<i class="fa-icon-calendar"></i>
<h2>Calendar</h2>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="center-block text-center datepicker"></div>
</div>
</div>
</div>
</div>
This is what should solve your problem. Add it somewhere in your custom stylesheet and change the width % to what suits your design.
.datepicker-inline {
width: 20%;
}
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