[英]how to set width for p-listbox in angular primeng?
我正在嘗試將 p-listbox 組件寬度設置為 10 REM,但是我的更改無法做到。 請在這里提出建議。 我正在嘗試在 css 類上應用寬度。 但是,它不適用。 但是,當我在 chrome 開發工具中使用類 .ui-listbox-list-wrapper 在 div 上應用時,它應用得很好。
儀表板.component.ts
import { Component, OnInit } from '@angular/core';
import { SocialLoginModule, AuthServiceConfig, AuthService } from 'angular-6-social-login';
import { Router } from '@angular/router';
import { SocialUsers } from '../../model/social-users';
class City {
name:string;
code:string;
}
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
socialusers = new SocialUsers();
cities1: City[];
selectedCity1:string;
constructor(public OAuth: AuthService, private router: Router) {
this.cities1 = [
{name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'},
{name: 'London', code: 'LDN'},
{name: 'Istanbul', code: 'IST'},
{name: 'Paris', code: 'PRS'}
];
}
ngOnInit() {
this.socialusers = JSON.parse(localStorage.getItem('socialusers'));
console.log(this.socialusers);
}
logout() {
this.OAuth.signOut().then(data => {
debugger;
this.router.navigate(['login']);
});
}
}
儀表板.component.html
<p-listbox id="listId" [options] ="cities1" [(ngModel)] ="selectedCity1" optionLabel = "name">
</p-listbox>
selected city={{selectedCity1?.name}}
儀表板.組件.css
.ui-listbox-list-wrapper {
width: 20REM;
}
您不能直接從另一個組件更改組件的樣式。 你需要使用 ::ng-deep
儀表板.組件.css
:host ::ng-deep p-listbox .ui-listbox-list{
width: 20rem;
}
另一種選擇:primeng 提供了一種通過提供自定義類來更改任何組件樣式的方法 🎉
<p-listbox styleClass="listbox-20rem" [options]="cities1" [(ngModel)] ="selectedCity1" optionLabel="name">
</p-listbox>
在全局樣式文件中
樣式文件
.listbox-20rem .ui-listbox-list {
width: 20rem;
}
檢查這個👉演示🚀🚀
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.