>
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 패널을 변경하면클래스에

 width: 30%;
  margin: 0 auto;

작동하면 원하는 페이지가 나타납니다.

하나 개의 질문은 그래서, 왜 내중앙 사업부클래스에 영향을주지 않는 내용이지만UI 패널합니까?

CSS가ui-panel을 선택하고 변경해야합니까? 노력했지만 실패했습니다.

도움이 있습니까?

건배!

  • 답변 # 1

    내가 사업부 컨테이너에 패널을 추가, 그래서 내가 훨씬 더 잘 작동 해당 컨테이너의 행동에 영향을 미칠 수 있도록나는의 PrimeNG CSS의 클래스에 영향을주는 것을 시도의 아이디어를 종료합니다.

    따라서center-login클래스를 만들었고 미디어 쿼리를 사용하여 너비와 여백을 처리하여 반응 형으로 만들었습니다. 여기 내가 한 일이 있습니다.

    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;
      }
    }
    
    
    그래서 내 화면이 넓은 이하 난 그냥이 공간을 차지하게 600PX을 때,하지만, 화면이 더 큰 얻을 때 나는 그것을 중앙 집중화 및 600PX의 폭을 고정합니다.

  • 답변 # 2

    CSS에서 다음 선택기를 사용해야합니다

    .center-div.ui-panel{
      width: 30%;
      margin: 0 auto;
    }
    
    

  • 이전 gradle Copy 작업에서 동적으로 파일 권한 설정
  • 다음 email - CQRS의 비정규 화 된보기에서 메일 알림