2

PrimeNG を使用して Angular プロジェクトに取り組んでおり、ページのp-calendarコンポーネントに正しい CSS スタイルを適用しようとすると、次の問題が発生します。

基本的に、HTML コードには次のようなものがあります。

<tr class="search-box">
  <th></th>
  <th>
    <p-calendar inputStyleClass="dateTimeField"  (onSelect)="onDateSelect($event)" (onClearClick)="dt.filter('', 'date', 'equals')" [showButtonBar]="true" placeholder="Search by Data inserimento" [readonlyInput]="true" dateFormat="yy-mm-dd"></p-calendar>
  </th>
  <th>
    <input pInputText type="text" (input)="dt.filter($event.target.value, 'name', 'startsWith')" placeholder="Search by Name" class="p-column-filter">
  </th>
  <th>
    <input pInputText type="text" (input)="dt.filter($event.target.value, 'company.name', 'startsWith')" placeholder="Search by Company" class="p-column-filter">
  </th>
  <th>
    <input pInputText type="text" (input)="dt.filter($event.target.value, 'company.BU.name', 'startsWith')" placeholder="Search by BU" class="p-column-filter">
  </th>
  <th>
    <input pInputText type="text" (input)="dt.filter($event.target.value, 'dettaglio_ordine.commessa.code', 'startsWith')" placeholder="Search by Commessa" class="p-column-filter">
  </th>
  <th>
    <input pInputText type="text" (input)="dt.filter($event.target.value, 'dettaglio_ordine.cliente', 'startsWith')" placeholder="Search by Cliente" class="p-column-filter">
  </th>
  <th>
    <input pInputText type="text" (input)="dt.filter($event.target.value, 'dettaglio_ordine.cliente_finale', 'startsWith')" placeholder="Search by Cliente Finale" class="p-column-filter">
  </th>
  <th>
    <input pInputText type="text" (input)="dt.filter($event.target.value, 'dettaglio_ordine.importo_contratto', 'startsWith')" placeholder="Search by Importo Contratto" class="p-column-filter">
  </th>
  <th></th>
</tr>

ご覧のとおり、2 番目のタグには次のp-calendarコンポーネントが含まれています。

<p-calendar inputStyleClass="dateTimeField"  (onSelect)="onDateSelect($event)" (onClearClick)="dt.filter('', 'date', 'equals')" [showButtonBar]="true" placeholder="Search by Data inserimento" [readonlyInput]="true" dateFormat="yy-mm-dd"></p-calendar>

このコンポーネントのスタイルを設定しようとしています。次の他の入力タグとは異なり、スタイル (基本的には幅とフォント サイズ) を正確に設定できません。

ここに示すようにしようとしていました: https://forum.primefaces.org/viewtopic.php?t=2610

だから私のCSSコードに入れました：

.dateTimeField {
  width: 80% !important;
}

また、p-calendarコンポーネント タグにstyleClass="dateTimeField"を設定してから、次のように設定しようとしました。

.dateTimeField input {
  width: 80% !important;
}

しかし、それでも機能せず、この間違った視覚化が得られます:

ここに画像の説明を入力

ご覧のとおり、大きすぎて、私の CSS 設定を使用していません。奇妙なことに、Chrome ツールを使用すると、次の方法で正しい幅を設定できます。

input.ng-tns-c59-5.dateTimeField.ui-inputtext.ui-widget.ui-state-default.ui-corner-all.ng-star-inserted {
    width: 80% !important;
}

しかし、この CSS 設定をコピーして Angular コンポーネントの CSS ファイルに貼り付けようとすると、まだ機能しません。

この問題を解決するにはどうすればよいですか?

4

2 に答える 2