I have a element which is in ng-repeat
<div class="panel panel-default" 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" class="panel-height" ></div>
</div>
I need to increase the height of 1st panel div ;i gave a class="panel-height"
the sass code which i gave is
div .panel-height {
&:first-child {
height: 500px;
}
}
but its not working,no idea where im going wrong
Any help will be appreciated
Related
My website has a menubar which is in the main component html and inside this html is also the app-selector of another component:
MainComponent.html
<div style="height:200px">This is my Menubar</div>
<app-test></app-test>
I would like to display 3 boxes in my testComponent.html.
I am using flexLayout: https://github.com/angular/flex-layout
<div fxLayout="column" fxLayoutAlign="space-between none" style="height: 100%">
<div style="background-color: red">
T1
</div>
<div style="background-color: blue">
T2
</div>
<div style="background-color: yellow; height: 200px">
T3
</div>
</div>
The problem is that because there is a menubar, i get a scrolling behaviour but I just want the last box to end at my screen bottom. See here: http://prntscr.com/nhwcbp
How can I achieve this?
https://stackblitz.com/edit/flex-layout-angular-material-xssepa
put below style in style.css:
html, body { height: 100%; width: 100%; margin: 0; }
Remove height: 100vh and make use of flexbox
<div fxLayout="column" style="height:100%">
<div fxLayout="row" fxLayoutAlign="center">
<mat-card fxFlex="50">
<div fxLayout="row">
<div fxFlex="30" class="action-blurb">This is a blurb.</div>
<div fxFlex="30" class="action-blurb" fxFlexOffset="5">This is a blurb.</div>
<div fxFlex="30" class="action-blurb" fxFlexOffset="5">This is a blurb.</div>
</div>
</mat-card>
</div>
<div fxFlex="">
<app-test></app-test>
</div>
</div>
I hope this should do the trick as per this demo
I would like to align three div in one line with a little space between first div and second div and last div using bootstrap as you see in the picture :
I try with this code :
<div class="row">
<div class="col-md-2">
<img src="img/emo_positif.png')}}">
</div>
<div class="col-md-7">
<div class="square1"></div>
</div>
<div class="col-md-3">
<img src="img/emo_negative.png')}}">
</div>
</div>
but it shows me a big space between the div
Using Bootstrap 3:
.row {
height: 24px;
}
.row > div {
height: 100%;
}
.square {
background: pink;
}
.square1 {
background: #01a8ff;
height: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" >
<div class="row">
<div class="col-xs-2 square">
</div>
<div class="col-xs-8">
<div class="square1"></div>
</div>
<div class="col-xs-2 square">
</div>
</div>
Check this Pen.
Read the docs.
For making the three division in same line . There are many ways. For better UX use display:flex in css for the parent division
Thanks
I am trying to fix a page which wasn't bootstrapped like the illustration. But my col-2, col-3, col-4 don't align with the col 1 and 2. I cannot really understand how pull and push work. I have worked on my mobile layout and it seem fine, but as it goes to desktop, it messing the layout.
My layout becomes this, when I make it go desktop. Misaligned headings and columns under it.
You need to include yellow div-s into row so they won't jump over next line.
.left-box {
height: 290px;
width: 100%;
background: #e66;
margin: 3px;
}
.right-box {
height: 70px;
background: #ee6;
margin: 3px;
}
#media screen and (min-width: 992px) {
.left-box, .right-box {
height: 200px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-2 col-xs-5">
<div class="left-box"></div>
</div>
<div class="col-md-10 col-xs-7">
<div class="row">
<div class="col-md-3"><div class="right-box"></div></div>
<div class="col-md-3"><div class="right-box"></div></div>
<div class="col-md-3"><div class="right-box"></div></div>
<div class="col-md-3"><div class="right-box"></div></div>
</div>
</div>
</div>
</div>
Note: according to bootstrap rules, the statement class="col-md-2 col-sm-5" is the same that class="col-lg-2 col-md-2 col-sm-5 col-xs-12".
Actually you don't need push-pull classes I think. You could use a markup like this:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="left-box"></div>
</div>
<div class="col-md-6">
<div class="right-box"></div>
<div class="right-box"></div>
<div class="right-box">etc...</div>
</div>
</div>
</div>
Pen: http://codepen.io/anon/pen/yVKgwG
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 8 years ago.
CSS3 selectors can get pretty in-depth and I'm having a problem that chaining a couple together using SASS.
CODE
SASS:
$greymd: #a7aaac;
$blue: #405daa;
$orange: #cabc18;
#C05 {
.tab:nth-child(2) {
.num:nth-child(1) {
position: absolute;
top:200px;
left:800px;
color:$greymd;
}
.num:nth-child(2) {
position: absolute;
top:300px;
left:800px;
color:$blue;
}
.num:nth-child(3) {
position: absolute;
top:400px;
left:800px;
color:$orange;
}
}
}
HTML:
<body id="C05">
<div class="tab-wrapper">
<div class="tab active" data-slide="1">
<div class="chart-wrapper">
<div class="chart">
<div class="overflow">
<div class="arrow"></div>
<div class="lines"></div>
<div class="num">1</div>
<div class="num">2</div>
<div class="num">3</div>
</div>
</div>
</div>
</div>
<div class="tab" data-slide="2">
<div class="chart-wrapper">
<div class="chart">
<div class="overflow">
<div class="arrow"></div>
<div class="lines"></div>
<div class="num">10</div>
<div class="num">20</div>
<div class="num">30</div>
</div>
</div>
</div>
</div>
<div class="tab" data-slide="3">
<div class="chart-wrapper">
<div class="chart">
<div class="overflow">
<div class="arrow"></div>
<div class="lines"></div>
<div class="num">100</div>
<div class="num">200</div>
<div class="num">300</div>
</div>
</div>
</div>
</div>
</div><!--/.tab-wrapper-->
</body>
The thing is, if I removed <div class='arrow'></div> and <div class='lines'></div> it works as expected. Clearly there's something about nth selectors that I don't know.
The error is indeed with your expected use of nth-child. Take the following CSS code:
.num:nth-child(1)
This code looks for a class .num that is the first child of its parent element. However, the first .num in your code is the third child of its parent element.
Would it be possible to achieve the attached grid in bootstrap? Each of the squares would probably be an image... or perhaps text!
I've had a go, but hit a wall when it comes to the top-left box for example that spans over two rows.
Grid:
Use nested blocks whenever you need your grid to span several rows.
Something like this:
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
</div>
<div class="col-sm-8">
<div class="row">
<div class="col-sm-8"></div>
<div class="col-sm-4"></div>
</div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-8"></div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
Then you can set the height for your blocks and your grid is good to go.
A newbie here.
So I was learning to make nested grids when I stumble on this question.
My Rules for making nested grids:
1.The entire grid will be in parent container .row (parent wrapper)
2.Columns are always nested in columns, however all nested columns must have a .row(column wrapper) wrapper to align items horizontally e.g.:
<div class='col-md-12'>
<div class='row'>This is the column wrapper.
<div class='col-md-9'></div>
<div class='col-md-3'></div>
</div>
</div>
3.Breakpoints are very key
4.You may have to use custom css to fine tune your grid.
This is my solution to the problem:
<div class='row parent-wrap'>
<div class='col-sm-6 big-left'>Top Left big</div>
<div class='col-sm-6 quarter-grid'>
<div class='row top-wrap'>
<div class='col-sm-6 top-left'>top-left</div>
<div class='col-sm-6 top-right'>top-right</div>
<div class='col-sm-6 bottom-left'>bottom-left</div>
<div class='col-sm-6 bottom-right'>bottom-right</div>
</div>
</div>
<div class='col-sm-12'>
<div class='row mid-wrap'>
<div class='col-sm-3 mid-start'>mid-start</div>
<div class='col-sm-6 mid-center'>mid-center</div>
<div class='col-sm-3 mid-end'>mid-end</div>
</div>
<div class='col-sm-9'>
<div class='row bottom-wrap'>
<div class='col-sm-8 bottom-start'>bottom-start</div>
<div class='col-sm-4 bottom-center'>bottom-center</div>
</div>
</div>
</div>
Rudimentary custom css:
.parent-wrap{
margin:100px;
}
.big-left{
background-color: aqua;
height:300px;
}
.top-left{
background-color:black;
height:150px;
}
.top-right{
background-color: blue;
height:150px;
}
.bottom-left{
background-color:brown;
height:150px;
}
.bottom-right{
background-color:crimson;
height:150;
}
.mid-start{
background-color:grey;
height:200px;
}
.mid-center{
background-color: red;
height:200px;
}
.mid-end{
background-color: pink;
height:400px;
}
.bottom-start{
background-color:blueviolet;
margin-left:-15px;
height:200px;
margin-top:-200px;
}
.bottom-center{
background-color:burlywood;
height:200px;
margin-top:-200px;
}