I am using PrimeNG - OrderList but the buttons are too small
How to resize the buttons to make the bigger?
Here is my code
<p-orderList [value]="products" [listStyle]="{'height':'auto'}" header="List of Option Codes"
dragdrop="true">
<ng-template let-product pTemplate="item">
<div class="product-item">
<div class="product-list-detail">
<h5 class="p-mb-2">{{product.optionCode}}</h5>
</div>
</div>
</ng-template>
</p-orderList>
The buttons are too small
You can add css to .product-item like -
.product-item {
font-size: 15px; !important
}
Related
Hi,
I want to fit the elements of the first group (the numbers) to look like the second group(noche, mañana...). Change sizes according to the outer element.
I set both the group and individual element width to 100%
The numbers go all the way to 22 but they are cut off.
I used the answer in this question: Angular-material constant width of button group
The elements are there but they overflow, is there any way to distribute the available width between the 24 buttons without it overflowing?
Thanks in advance.
EDIT: Stackblitz
My HTML:
<div class="row">
<div class="col-12">
<label>Horas</label>
<div>
<mat-button-toggle-group [formControl]="hoursCtrl" multiple>
<mat-button-toggle *ngFor="let hour of hours" [value]="hour">{{hour}}</mat-button-toggle>
</mat-button-toggle-group>
</div>
<mat-button-toggle-group [formControl]="dayMomentCtrl" multiple>
<mat-button-toggle *ngFor="let dMoment of dayMoments; let i = index" [value]="i">{{dMoment}}
</mat-button-toggle>
</mat-button-toggle-group>
</div>
</div>
My scss:
.mat-button-toggle-group {
height: 20px;
font-size: 11px;
align-items: center;
width: 100%;
}
.mat-button-toggle {
width: 100%;
}
You can enclosed all under a class wrapper
<div class="wrapper">
<mat-button-toggle-group class="min-width" [formControl]="hoursCtrl" multiple>
<mat-button-toggle *ngFor="let hour of hours" [value]="hour">{{
hour
}}</mat-button-toggle>
</mat-button-toggle-group>
<mat-button-toggle-group [formControl]="dayMomentCtrl" multiple>
<mat-button-toggle
*ngFor="let dMoment of dayMoments; let i = index"
[value]="i"
>{{ dMoment }}
</mat-button-toggle>
</mat-button-toggle-group>
</div>
Then, in styles.css remove the "padding" of the groups-buttons
.wrapper .mat-button-toggle-appearance-standard .mat-button-toggle-label-content,
.wrapper .mat-button-toggle-label-content {
padding:0;
}
You can also add a min-width to the group
.wrapper .mat-button-toggle-group {
...
min-width:400px;
width:100%;
}
stackblitz
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;
}
<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>
<div class="panel panel-line panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Meb Katmanları</h3>
<div class="panel-actions">
<mat-slide-toggle color="warn" [(ngModel)]="allMebLayers" (change)="mebToggle()"></mat-slide-toggle>
</div>
</div>
<div *ngIf="allMebLayers" class="panel-body" style="max-height: 70vh; overflow-y: auto">
<mat-selection-list *ngFor="let l of legends" style="overflow-y: hidden; overflow-x: hidden;">
<mat-checkbox>
<td class="p-5">{{l.layerName}}</td>
<td class="p-5"><img [src]="l.legend.imageData"></td>
</mat-checkbox>
</mat-selection-list>
</div>
</div>
I want to just style the image inside the checkbox. Any simple way without adding new class name ?
To style the image inside the checkbox WITHOUT a new class name, try this selector in your css document:
mat-checkbox img {
/* desired CSS properties */
}
To accomplish the styling, you could also use:
.p-5 img { ... }
If you want to only target that image for that class and not all of the mat-checkbox img elements that could also be on the same page.
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.