[英]PrimeNG - styling size and alignment of p-panel
我正在使用PrimeNG p-panel组件创建登录页面: https ://www.primefaces.org/primeng/#/panel
该面板占据了屏幕的整行,但我希望整个面板的宽度大约为30%并集中在一起,因此我的面板中没有大量的空白区域,因为我只有这两个字段和一个按钮。
我有以下页面:
login.componennt.html
<p-panel header="Login">
<div class="ui-g">
<div class="ui-lg-2 ui-md-2 ui-sm-2">
<input type="text" pInputText placeholder="user" [(ngModel)]="user"/>
</div>
</div>
<div class="ui-g">
<div class="ui-lg-2 ui-md-2 ui-sm-2">
<input type="password" pPassword placeholder="password" [(ngModel)]="password"/>
</div>
</div>
<div class="ui-g">
<div class="ui-lg-2 ui-md-2 ui-sm-2">
<button pButton type="button" label="Login" (click)="doLogin()"></button>
</div>
</div>
</p-panel>
所以我尝试了这个:
<p-panel header="Login" styleClass="center-div">
...
login.component.css
.center-div {
width: 30%;
margin: 0 auto;
}
哪个不起作用。
所以我检查了代码,Chrome Dev Tools,我得到了:
<p-panel _ngcontent-c1="" header="Login" styleclass="center-div" ng-reflect-header="Login" ng-reflect-style-class="center-div">
<div class="center-div ui-panel ui-widget ui-widget-content ui-corner-all" ng-reflect-klass="center-div" ng-reflect-ng-class="ui-panel ui-widget ui-widget-c">
<div class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
<span class="ui-panel-title">Login</span>
</div>
<div class="ui-panel-content-wrapper" ng-reflect-klass="ui-panel-content-wrapper" ng-reflect-ng-class="[object Object]">
<div class="ui-panel-content ui-widget-content">
<div _ngcontent-c1="" class="ui-g">
<div _ngcontent-c1="" class="ui-lg-2 ui-md-2 ui-sm-2">
<input _ngcontent-c1="" pinputtext="" placeholder="user" type="text" class="ng-untouched ng-pristine ng-valid ui-inputtext ui-corner-all ui-state-default ui-widget">
</div>
</div> ...
所以我可以在实际的面板内容之前看到我的css类'center-div'在正确的位置,但为什么它不会影响内容样式? 这里:
<div class="center-div ui-panel ui-widget ui-widget-content ui-corner-all" ng-reflect-klass="center-div" ng-reflect-ng-class="ui-panel ui-widget ui-widget-c">
因此,如果我将ui-panel类更改为,则在Chrome开发工具中
width: 30%;
margin: 0 auto;
所以有一个问题是,为什么我的center-div类不会影响内容,但是ui-panel呢?
我应该选择ui-panel并在那里进行更改吗? 我一直在努力,但我失败了。
有帮助吗?
干杯!
我放弃了尝试影响PrimeNG css类的想法,所以我将面板添加到div容器中,因此我可以影响该容器的行为,这样可以更好地工作。
所以我创建了一个中心登录类,我还使用媒体查询来处理宽度和边距,使其响应......这就是我所做的:
login.component.html
<div class="ui-g">
<div class="ui-lg-12 ui-md-12 ui-sm-12 center-login">
<p-panel header="Login">
<div class="ui-g">
<div class="ui-lg-12 ui-md-12 ui-sm-12">
<h4 class="first in-label">User</h4>
<input type="text" pInputText [(ngModel)]="user"/>
</div>
</div>
...
login.component.css
@media screen and (min-width: 600px) {
.center-login {
width: 600px;
margin: 0 auto;
}
}
您应该在CSS中使用下一个选择器
.center-div.ui-panel{
width: 30%;
margin: 0 auto;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.