My css code for navigation drawer
:host{
display: flex;
background-color: #f0fff0;
flex-grow:1;
}
.body-style{
padding: 20px;
min-height: 100px;
flex-grow: 1;
}
HTML:
<mat-drawer-container >
<mat-drawer #drawer [mode]="over">I'm a drawer</mat-drawer>
<mat-drawer-content>
<button mat-raised-button (click)="drawer.toggle()">Toggle drawer</button>
<div class="body-style">
<router-outlet>
</router-outlet>
</div>
</mat-drawer-content>
</mat-drawer-container>
I am obviously missing something in Flexbox concepts. The <mat-drawer-content>'s width is small.
Don't reinvent the wheel.
Angular team has already covered your need with Flex-Layout.
Once installed, it gives this :
<mat-drawer-container >
<mat-drawer #drawer [mode]="over">I'm a drawer</mat-drawer>
<mat-drawer-content fxLayout="row" fxLayoutAlign="start center">
<button mat-raised-button (click)="drawer.toggle()">Toggle drawer</button>
<div class="body-style">
<router-outlet></router-outlet>
</div>
</mat-drawer-content>
</mat-drawer-container>
No CSS required.
Related
I've a button inside the notification and I'm trying to place the button on the right side like the design below but not sure how to place it without doing style="left: 290px" because it will look weird when the page is open in different screen size.
Any help or suggestion will be really appreciated.
<div>
<div class="notification"
[ngClass]="{'noty-error' : (noty.notificationType==1),'noty-warn': (noty.notificationType==2), 'noty-info' : (noty.notificationType==3)}"
*ngFor="let noty of notifications;">
<mat-icon *ngIf="noty.notificationType==1" class="noty-error-icon">highlight_off</mat-icon>
<mat-icon *ngIf="noty.notificationType==2" class="noty-warn-icon">error</mat-icon>
<mat-icon *ngIf="noty.notificationType==3" class="noty-info-icon">warning</mat-icon>
<span style="color: black;">
{{noty.message}}
</span>
<ng-container *ngIf="noty.notificationType==2">
<button mat-raised-button color="accent" [style.marginRight.px]="20" style = "display: flex; justify-content:flex-end" matTooltip="Save Text Edit" (click)=openDialog()>
View
</button>
</ng-container>
</div>
</div>
This is what I've so far
and this is the design I'm trying to do
This might work
.notification {
display:flex;
position:relative;
width:100%;
}
button{
position:absolute;
right:20px;
}
I am new in Angular. this is my main table(its wireframe)
when i click on pencil icon it should look like this:
but i am not getting the output like this. i have tried this
stackblitz url: https://stackblitz.com/edit/mat-table-custom-dtb5bv?file=index.html
problem facing:
dropdown going in right side of update button
Seems like the menu is having width: 100%;. Which makes the button move to the next line. So to have both in the same row try adding the following.
.mat-cell .mat-select {
width: auto;
min-width: 100px; /*adjust accordingly*/
}
Some adjustments to CSS and HTML were necessary. Further adjustments will be necessary, but it is an initial idea.
HTML
<span *ngIf="!element.isSelected; else editPlace">
{{element.value}}
</span>
<button mat-icon-button aria-label="Toggle star" *ngIf="i!==2 && !element.isSelected"
(click)="editSetting(element)"
style="color: blue">
<mat-icon class="material-icons">edit</mat-icon>
</button>
<ng-template #editPlace>
<div class="editPlace">
<mat-select>
<mat-option *ngFor="let value of dropDownValues">
{{value.name}}
</mat-option>
</mat-select>
<button mat-raised-button color="accent" class="submit-button" *ngIf="element.isSelected" (click)="update(element)">Update</button>
</div>
</ng-template>
<ng-container *ngIf="i===2">
<mat-slide-toggle></mat-slide-toggle>
</ng-container>
CSS
.editPlace {
display: flex;
}
.editPlace > * {
margin-right: 10px;
}
.mat-select {
border: 1px solid #666666;
border-radius: 5px;
width: 10em;
}
<mat-drawer-container style="text-align: center;" class="example-container">
<mat-drawer mode="side" #drawer opened>
<div fxFill class="side-card">
<mat-card-title ngsReveal>
<mat-icon>landscape</mat-icon> Property Cloud
<mat-icon>landscape</mat-icon>
</mat-card-title>
<mat-card class="side-menu">
<mat-card-header>
<div class="example-header-image"></div>
<mat-card-subtitle></mat-card-subtitle>
</mat-card-header>
<hr>
<mat-card-content>
</mat-card-content>
<div style="text-align: center;" class="mt-5">
<div class="t-5">
<button ngsReveal mat-raised-button><a routerLinkActive="active" routerLink="property_feed"> </a>Property feed</button>
</div>
<div ngsReveal class="t-5">
<button mat-raised-button>My Account</button>
</div>
<div class="t-5">
<button ngsReveal mat-raised-button>My Properties</button>
</div>
<div class="t-5">
<button ngsReveal mat-raised-button> My Wishlist</button>
</div>
<div class="t-5">
<button ngsReveal mat-raised-button> Settings and privacy</button>
</div>
</div>
</mat-card>
</div>
</mat-drawer>
<mat-drawer-content>
<div fxFill class="main-card">
<app-header (toggleEmitter)="drawer.toggle()"></app-header>
<div fxLayout="row wrap" >
<div *ngFor="let ppty of property">
<div ngsReveal fxFlex>
<mat-card class="property-feed">
<mat-card-header>
<div mat-card-avatar class="avatarImage"></div>
<mat-card-title >Card Title</mat-card-title>
<mat-card-subtitle >Card Subtitle</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<app-gallery ></app-gallery>
<h3>some informaion to the end user</h3>
</mat-card-content>
<mat-card-footer>
</mat-card-footer>
<mat-card-actions>
<button matTooltip="If intrested contact seller" mat-fab large color="primary">
<mat-icon>thumb_up_alt</mat-icon>
</button>
<button matTooltip="If intrested add to wishlist" mat-fab large color="warn">
<mat-icon>add_shopping_cart</mat-icon>
</button>
<button matTooltip="View details" mat-fab large color="warn">
<mat-icon>unfold_more</mat-icon>
</button>
</mat-card-actions>
</mat-card>
</div>
</div>
</div>
</div>
</mat-drawer-content>
</mat-drawer-container>
In ngx-scrollreveal , ngsReveal is Hiding components which should animate on scroll.Only components which is within viewport of website is showing and animating. other than cards which should reveal on scroll is hidden.I could see the cards are present there, since i have a click event, its working but components are hidden. And I couldn't see any console errors.
"./node_modules/scrollreveal/dist/scrollreveal.min.js", is imported in angular.json
Its working for element except in viewport,On later experiemnting by placing content in different places.
div is getting hide because its placed under mat-drawer-content. Any idea why its hiding elements that is not coming at the first time loading.
I could see the difference for this displayed card's html and hidden card's html is different in case of opasity but dont know what is causing it. Its working fine except inside mat-drawer-container.
import { Component, OnInit } from '#angular/core';
import { NgsRevealConfig } from 'ngx-scrollreveal';
#Component({
selector: 'app-property-feed',
templateUrl: './property-feed.component.html',
styleUrls: ['./property-feed.component.scss'],
providers: [NgsRevealConfig]
})
export class PropertyFeedComponent {
property =[1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10];
}
button {
margin: 5px 5px 5px 5px;
}
.feed-title {
font-size: 30px;
font-family: "Girassol", cursive;
}
.property-feed {
width: 300px;
height: 410px;
margin-top: 15px;
margin-right: 10px;
}
#media only screen and (max-width: 600px) {
.property-feed {
width: 300px;
height: 410px;
margin-top: 10px;
margin-right: 5px;
}
}
<!-- begin snippet: js hide: false console: true babel: false -->
[ngsReveal]="{delay: some_delay, reset: false}"
Try using binding it's properties with html element!
PS: I am not sure that this will work in your scenario or not.
Try add className (button) and add your class name to container
<button class="button" [ngsReveal]="{reset: true, container: '.button'}" mat-raised-button> My Wishlist</button>
While looking for a way to implement navbar drop down menu (similar to accordion) I came upon this youtube video which uses custom component and manipulating max-height of card-content element to achieve the desired effect.
HTML:
<ion-card>
<ion-card-title text-center color="primary" (click)="toggle()"></ion-card-title>
<ion-card-content #cc>
<p>Hello World!</p>
</ion-card-content>
</ion-card>
CSS:
.card-content{
max-height: 0px;
}
TS:
toggled = false;
#ViewChild("cc") cc: any;
toggle() {
if (this.toggled) {
this.renderer.setStyle(this.cc.nativeElement, "max-height", "0px");
} else {
this.renderer.setStyle(this.cc.nativeElement, "max-height", "500px");
}
this.toggled = !this.toggled;
}
All was working fine while following the video from start to finish.
However what I wanted was a drop down menu from navbar so I decided to edit part of his code to...
#cc{
max-height: 0px;
}
<ion-navbar text-center color="primary" (click)="toggle()"></ion-navbar>
<div #cc id="cc">
<p>Hello World!</p>
</div>
But it is not working as expected. When div is (0px) i can still see the elements that it contains, in this case it's "Hello World!"
Am I doing something wrong here, or does it only work specifically with ion-cards?
Just add overflow: hidden; to the parent:
#cc{
max-height: 0px;
overflow: hidden;
}
<ion-navbar text-center color="primary" (click)="toggle()"></ion-navbar>
<div #cc id="cc">
<p>Hello World!</p>
</div>
use overflow: hidden;
#cc{
max-height: 0px;
overflow: hidden;
}
<ion-navbar text-center color="primary" (click)="toggle()"></ion-navbar>
<div #cc id="cc">
<p>Hello World!</p>
</div>
I want to make a grid in which i want to two images in each row. I am using flex-wrap: wrap; it is working fine on android 4.4+ but not working with less than android 4.4. I want to achieve this with out using flex-wrap
Here is my view:
<ion-view class="feeds-categories-view">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"> </button>
</ion-nav-buttons>
<ion-nav-title>
<span>Feeds Categories</span>
</ion-nav-title>
<ion-content scroll="true" class="has-header has-subheader">
<div class="row-cat row">
<div class="col col-50" ng-repeat="items in ProductList">
<img ng-src="{{items.image}}" width="100%" />
</div>
</div>
</ion-content>
</ion-view>
Controller:
.controller('Home-FeedsCtrl', function($scope) {
$scope.ProductList = [
{"id":"1","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b- iPhone-b-font-5-5G.jpg"},
{"id":"2","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b- iPhone-b-font-5-5G.jpg"},
{"id":"3","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b- iPhone-b-font-5-5G.jpg"},
{"id":"4","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b- iPhone-b-font-5-5G.jpg"},
{"id":"5","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b- iPhone-b-font-5-5G.jpg"},
{"id":"6","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b- iPhone-b-font-5-5G.jpg"},
{"id":"7","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b- iPhone-b-font-5-5G.jpg"},
{"id":"8","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b- iPhone-b-font-5-5G.jpg"},
{"id":"9","text":"product","image":"http://g03.a.alicdn.com/kf/HTB1KjhsLXXXXXXgXpXXq6xXFXXXp/HOT-Hybrid-Silicone-Smooth-Hard-Rubber-Phone-Case-For-font-b- iPhone-b-font-5-5G.jpg"},
]
})
Stylesheet:
.cat-img-box{
width: 50%
}
.row-cat{
margin-top: 15px !important;
flex-wrap: wrap !important;
}
.col-cat{
padding: 20px !important;
}
<div ng-repeat="(key, image) in images">
<div class="row" ng-show="$even">
<div class="col"><img src="images[$index]"></div>
<div class="col"><img src="images[$index+1]"></div>
</div>
</div>
Shis could work.
reference:
Create Row every after 2 item in Angular ng-repeat - Ionic Grid
Put this css into your css file.
.row .col:nth-child(2n+1){float:none;}
This will make the float none after 2nd element of the loop.