I want to use Angular Material's md-list for showing elements, using responsive design. And my task is to show these items in 1 column if media device is small and in 3 columns if it's larger than small.
I was thinkink of something like this:
<md-list layout="row" layout-wrap>
<md-list-item flex="33" flex-sm="100" class="md-2-line" ng-repeat="item in items">
<div class="md-list-item-text">
<h3>{{occasionType.occasionType}}</h3>
<p>{{occasionType.name}}</p>
</div>
</md-list-item>
</md-list>
But it doesn't work. Can someone help?
Try using layout-sm="column"
<div layout="row" layout-wrap layout-sm="column">
<div flex="33" class="md-2-line" ng-repeat="item in items">
<div class="md-list-item-text">
<h3>{{occasionType.occasionType}}</h3>
<p>{{occasionType.name}}</p>
</div>
</div>
</div>
It works for me.
Related
I have a Bootstrap-card but there is a problem with its width. I'd like to that card will take a full with of the column which I set. Here is a piece of code that I use and screenshot which presents actual width and wanted (with blue background).
Do you know any nice solution to make my goal fixed? Please take into consideration the responsive view.
<div class="row">
<ng-container *ngFor="let event of events">
<div class="col-12 col-lg-6 d-flex mt-5">
<!-- Card -->
<div class="card shadow-light-lg lift lift-lg">
<a class="card-body my-auto">
<div class="d-flex justify-content-between align-content-center align-items-center py-3">
<!-- some content -->
<h3 class="mt-auto">
{{event.title}}
</h3>
<div class="mb-0 text-muted" id="card-description">
{{event.description}}
</div>
</div>
</a>
</div>
</div>
...
</ng-container>
</div>
The width is not being applied properly. Either give width of 100%. Secondly you are using display-flex. So like parent has flex then items be given respective width.
Kindly share your code on stackblitz so we can better assist you. It will be much easier to debug.
We are currently using Angular as a front-end with fx-layout api for responsiveness.
When we are using the fxLayout="column" all elements are collapsed and doesn't seem to have any height.
What are the best practice when using fx-layout/flex to handle these scenarios ?
Using angular 9.0.0rc with flex-layout": "^8.0.0-beta.27
Browserslist setting
0.5%
last 2 versions
Firefox ESR
not dead
# IE 9-11
Here an image from IOS Safari (12)
Here an image from chrome
Here the repeated container which display the list seen in the image above
<div *ngIf="!(dataSource.loading$ | async)">
<mat-card class="pointer mb-2" *ngFor="let quotation of dataSource.quotations$ | async"
(click)="onClickRow(quotation)">
<mat-card-content fxLayout="row" fxLayoutGap.gt-xs="15px" fxLayout.xs="column" fxLayoutAlign="start center"
fxLayoutAlign.xs="center center">
<div fxLayout="column" fxLayoutAlign="center center">
<img class="profile-picture" *ngIf="authSvc.currentUser.hasSalesRights && quotation.customer.photoUrl"
[src]="quotation.customer.photoUrl" alt="">
<img class="profile-picture" *ngIf="authSvc.currentUser.hasCustomerRights && quotation.salesRep.photoUrl"
[src]="quotation.salesRep.photoUrl" alt="">
<img class="profile-picture" *ngIf="authSvc.currentUser.hasSalesRights && !quotation.customer.photoUrl"
src="https://storage.googleapis.com/edcommerce/businesslogic/images/placeholder/avatar.jpg" alt="">
</div>
<div fxLayout="column" fxFlex fxLayoutAlign.xs="center center">
<div fxLayout="row" *ngIf="authSvc.currentUser.hasSalesRights">
<span class="mat-body">{{quotation.createdDate | edDate}}</span>
</div>
<div fxLayout="row" fxLayoutAlign.xs="center center">
<span class="mat-h2 m-0">{{quotUtils.getVehicleDescription(quotation)}}</span>
</div>
<div fxLayout="row" fxLayoutGap="10px" *ngIf="authSvc.currentUser.hasSalesRights"
fxLayoutAlign="start center">
<span class="mat-body">{{ts('common.user.text.roles.customer')}}</span>
<span class="mat-body">{{quotation.customer.fullName}}</span>
</div>
<div fxLayout="row" fxLayoutGap="10px" *ngIf="authSvc.currentUser.hasBuyerRights"
fxLayoutAlign="start center">
<span class="mat-body">{{ts('common.user.text.roles.sales_rep')}}</span>
<span class="mat-body">{{quotation.salesRep.fullName}}</span>
</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="10px" fxLayoutAlign="start center">
<span class="mat-body">{{ts('page.quotations.text.step_required')}}</span>
<span
class="mat-body-2 color-primary">{{enumUtils.Quotation.getStatusDescByRole(quotation.status,statusTypes)}}</span>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
The problem with safari occur on this element (second container in the mat-card-content):
<div fxLayout="column" fxFlex fxLayoutAlign.xs="center center">
The flex on safari resulted with a weird exponential number in the CSS something like this : flex: 1 1 1.12e-16
Changing fxFlex for fxFlex="grow" generated on safari this css flex : 1 1 100% which fix the height !
Is it possible using Semantic UI Card have the image on the left? The documentation shows example where the image is always on the top. What i want to obtain is something like the Semantic UI Item (but of course i want use cards), like this:
What i want to obtain is something like this:
As you can see the image is on the left and it is something similar to a Semantic UI card.
The best you can do with semantic components would be this:
<div class="ui card" style="max-width: 100%; min-width: 100%;">
<div class="content" style="padding: 0;">
<div class="ui items">
<div class="item">
<div class="ui medium image">
<img src="https://semantic-ui.com/images/wireframe/image.png">
</div>
<div class="content" style="padding: 1rem;">
<a class="header">12 Years a Slave</a>
<div class="meta">
<span class="cinema">Union Square 14</span>
</div>
<div class="description">
<p></p>
</div>
<div class="extra">
<div class="ui label">IMAX</div>
<div class="ui label"><i class="globe icon"></i> Additional Languages</div>
</div>
</div>
</div>
</div>
</div>
<div class="extra content">
<a>
More Info
</a>
</div>
</div>
I have changed the padding on the content but that's the only custom CSS used.
To get it to look exactly like your image you will need to make your own component/style it your self.
I would like to know how to set the width of an element in a column layout in angular material.
Here is a simple code :
<div class="inactive-background" flex layout="column" layout-align="start center">
<md-whiteframe class="md-whiteframe-z2 white-frame" layout-margin>
<md-content layout-align="center center" layout="row">
<span class="chrono">00:00:00</span>
</md-content>
</md-whiteframe>
</div>
With this code, the span is centered but very small :
in order to resize the whiteframe, I can simply change the width property.
<div class="inactive-background" flex layout="column" layout-align="start center">
<md-whiteframe class="md-whiteframe-z2 white-frame" layout-margin style="width: 600px">
<md-content layout-align="center center" layout="row">
<span class="chrono">00:00:00</span>
</md-content>
</md-whiteframe>
</div>
The result is good, but the problem is that the whiteframe becomes no responsive. If I reduce the size of the browser, the whiteframe still takes 600px width.
The question is : How to do that in the responsive way ?
Thanks you
Codepen
I finally found (but not sure it is the best solution). Tell me if not
The trick is to wrap the whiteframe into an other div (layout=row) and use flex to set the size :
http://codepen.io/anon/pen/NGgQjX?editors=110
<div class="inactive-background" flex layout="column">
<div flex layout="row" layout-align="center start">
<md-whiteframe class="md-whiteframe-z2 white-frame" layout-margin flex="70">
<md-content layout-align="center center" layout="row">
<span class="chrono">00:00:00</span>
</md-content>
</md-whiteframe>
</div>
</div>
I want to build a nav menu. I want it to be tall, and I want to split it horizontally in two. Then I want the left part to have something aligned to the bottom of the menu. The right part should have the nav links and be middle-aligned. I want to use as less css as possible. (I am also working with Angular Material and Bootstrap if that helps). Here is the plunkr. I have already checked out this checkit but I am looking for another option.
<div class="menu container-fluid">
<md-toolbar class="md-tall">
<div class="container">
<div layout="row">
<!--Left-->
<div layout="row">
<md-button aria-label="Settings" class="shownSm">
<ng-md-icon icon="menu" ng-click="main.small =!main.small" style="fill: #fefefe;"></ng-md-icon>
</md-button>
<div layout="column">
<span flex></span>
<span>
<small>Some name</small>
</span>
<span>
<small>Something else</small>
</span>
</div>
</div>
<span flex=""></span>
<!--Right-->
<div class="right" layout="column">
<span flex=""></span>
<div layout="row" class="hiddenSm">
<ul class="text-center">
<span>Item1</span>
<span>Item2</span>
<span>Item3</span>
</ul>
</div>
</div>
</div>
</div>
</md-toolbar>
</div>