I need to set height of data grid automatically depending og children height. I have 2 rows and 2 columns, but when I set height of card, and for example enter looooong text in "p" child, i just get hidden overflow.
Ideally it would be to have row height depending on heigher of 2 children.
Current html:
<mat-grid-list cols="2" rowHeight="200px" gutterSize="30px">
<mat-grid-tile [colspan]="1" [rowspan]="1">
<div fxFlex="100%" fxLayout="row">
<div fxFlex="20%" fxLayoutAlign="center center">
<img [src]="src" [matTooltipPosition]="'above'"/>
</div>
<div fxFlex="80%" fxLayout="column" fxLayoutAlign="center none">
<div>
<div>MY LABEL</div>
<p>loong description</p>
</div>
<div>
<a>link</a>
</div>
</div>
</div>
</mat-grid-tile>
etc..
Any ideas?
Thx...
Related
I want to align my button horizontally with text area,like this image
Currrent code:
<div class="container">
<div class='row'>
<div class="col-sm-1">
<img style="border-radius:50%;width:70px;height:70px;" src="https://images.discordapp.net/avatars/<%=user.id%>/<%=user.avatar%>.png?size=512">
</div>
<div class="col-sm-11">
<textarea style='width:70%;height:100%' placeholder='Leave a review for this shop'></textarea>
</div>
<div style="margin-top:5px;margin-bottom:5px;width:70%;display: flex;justify-content: space-between">
<div>
<span class="review" data-rating="0"></span>
<br>
Please make sure to check our review guidelines before posting.
</div>
<button class="button_div" style="width:auto;display:block;margin-left: auto;margin-right: 0;" >Post Review</button>
</div>
</div>
</div>
The total screen size is 12. you gave the image col-sm-1, and you gave the textfield col-sm-11 that takes up the entire column, you have to reduce col-sm-11 for the textfield to something else so that the preview bottom can fit.
Or
You can add the preview button into the same div as the textfield.
I want to set my code to auto-calculate equal height in inside of .col, because for example inside .col I have <h2> and <p> which could have different number of rows, so height of this element will be different for every .col, I would like to get same height for all rows inside .col.
I tried to use flexbox utilities, but I didn't find a solution, so I am wondering if grid will help me get what I want to get, but I don't know if display: grid inherits height of flexbox elements?
Here is my code:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="header-bottom-box">
<h2>Projektowanie <b>stron</b></h2>
<div class="img-container">
<img src="http://irson.linuxpl.eu/images/projektowanie-stron.jpg" class="img-fluid" alt="Projektowanie stron">
</div>
<p>Projektowanie oraz tworzenie serwisów internetowych.</p>
<div class="text-right">
więcej
</div>
</div>
</div>
<div class="col-md-4">
<div class="header-bottom-box">
<h2>Pozycjonowanie <b>stron</b></h2>
<div class="img-container">
<img src="http://irson.linuxpl.eu/images/pozycjonowanie-stron.jpg" class="img-fluid" alt="Pozycjonowanie stron">
</div>
<p>Zwiększ pozycję swojej strony www w wynikach wyszukiwania.</p>
<div class="text-right">
więcej
</div>
</div>
</div>
<div class="col-md-4">
<div class="header-bottom-box">
<h2>Outsourcing <b>IT</b></h2>
<div class="img-container">
<img src="http://irson.linuxpl.eu/images/outsourcing-it.jpg" class="img-fluid" alt="Outsourcing IT">
</div>
<p>Outsourcing informatyczny Profesjonalna opieka informatyczna dla firm.</p>
<div class="text-right">
więcej
</div>
</div>
</div>
</div>
</div>
https://codepen.io/anon/pen/jRweow
I thought about using display: grid to .header-bottom-box and equal height of inside element.
EDIT
I tried to use GIRD:
And it works like I want to, but I don't know why I get this white space, how to delete it?
this is normal sir,
this all happen because of last col. text is less then first and second.
Here is my HTML code snippet:
<mat-card-content>
<div fxLayout="row" fxFlex="1 0 0">
<div fxLayout="column">First</div>
<div fxLayout="column" style="margin-left:auto">Second</div>
</div>
</mat-card-content>
And CSS:
.mat-card-content {
color: rgba(0, 0, 0, 0.700);
}
I need to implement flex layouts inside the angular material card element so that two columns will responsive and will contain some text like in the magazine:
At this moment I have done mat-card-header and it's working right.
Any advice will be much appreciated.
Try like below :
<div fxLayout="row" fxLayoutGap="10">
<div fxFlex="50%">
<p> first div </p>
</div>
<div fxFlex="50%">
<p> second div </p>
</div>
</div>
2022 update :
Stackblitz demo
you have try this code its working as you want
<mat-card-content>
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-around center">
<div fxLayout="column">First</div>
<div fxLayout="column">Second</div>
</div>
</mat-card-content>
for better understanding
https://stackblitz.com/edit/angular-sozro8?file=src%2Fapp%2Fapp.component.html
If you want responsive for mobile device also, you can use flex-layout Responsive API.
<mat-card-content>
<div fxLayout.gt-sm="row" fxLayout="column" fxLayoutGap="16px">
<div fxFlex.gt-sm="50%" fxFlex>
First div
</div>
<div fxFlex.gt-sm="50%" fxFlex>
Second div
</div>
</div>
</mat-card-content>
I am in trouble with angular material layout..
Got this:
this one is just to show the whole html
<div id="MainLayout" layout="column" flex style="height: 100%; overflow: hidden">
<div id="pageHeader" layout="row">
<div layout="column" flex>
<div layout="row" flex>
<img ng-repeat="icon in main.social" class="social" src="{{icon.path}}"/>
</div>
<div layout="row" flex></div>
</div>
</div>
it is about this block:
<div id="LogoDisplay" layout="row" flex="50" ng-style="main.styles.text" style="background: #F9F9F9">
<div layout="column" layout-align="center center" flex fill>
<div id="LogoImage" layout="row" layout-align="center center"><img src="assets/images/user-foto-logo.png" style="???"></div>
<div id="LogoTitle" layout="row" layout-align="center end">User Name</div>
<div id="LogoText" layout="row" layout-align="center start">Job Title</div>
</div>
</div>
and least I got this
<div id="ImageDisplay" flex="50" layout="row" layout-align="center center">
<div ng-repeat="icon in main.icons">{{icon}}</div>
</div>
<div id="pageInfo" layout="row" style="background: #123; color: #FFFF88;">some info footage</div>
I marked the code with ???
There is my problem, got 4 rows, row #1 gots some icons and #4 is just text...
row 2 contains a logo and two rows of text
row 3 contains a couple of logos
My Problem: I would like to have rows 2 and 3 filling 50% of the height. the logo should take 50% of row 2 and the both texts should fit to width of the logo...
Body is currently set to layout="column" I have a header row and a content row inside it. The header row works just fine, but the content row is getting set to no height, or I set it to flex but either way it is overlapping the header row and I want to be able to set the inner divs to be 100% of the remaining height.
<body layout="column" ng-style="bodyStyle" ng-controller="AppCtrl">
<div class="header" layout="row">
<div class="menuButton">
<ng-md-icon icon="menu"></ng-md-icon>
<md-tooltip>Menu</md-tooltip>
</div>
</div>
<div class="content" layout="row" style="background-color: black">
<p>Random text asdf
<div class="sidenav" layout="column">
<div>
<ng-md-icon icon="people"></ng-md-icon>
<md-tooltip>Contacts</md-tooltip>
</div>
<div class="active">
<ng-md-icon icon="message"></ng-md-icon>
<md-tooltip>Conversations</md-tooltip>
</div>
<div>
<ng-md-icon icon="phone"></ng-md-icon>
<md-tooltip>Phone Calls</md-tooltip>
</div>
<div>
<ng-md-icon icon="more_horiz"></ng-md-icon>
<md-tooltip>More</md-tooltip>
</div>
</div>
<div class="likeThis!">I want to be 100% of the remaining height</div>
</div>
</body>
u can use height:calc
e.g.
.full-height {
height: calc(100%)
}
you can also use it like
.full-height {
height: calc(100% - 20px)
}
assuming 20px is height of your remaining stuff which is at the top.