मैं एक सप्ताह के व्यय रिपोर्ट घटक का निर्माण कर रहा हूं। रिपोर्ट उत्तरदायी होनी चाहिए, इसलिए मेरे पास पाद लेख में कॉलम योग के साथ शरीर में विवरण है।

मैं एक कोणीय 10 आवेदन में प्राइमएनजी पुस्तकालय का उपयोग कर रहा हूँ। यह एक प्राइमएनजी सीएसएस प्रश्न है। व्यय रिपोर्ट सामान्य रूप से शीर्ष लेख, मुख्य भाग और पाद लेख प्रदर्शित करती है। जब व्यय रिपोर्ट उत्तरदायी होती है तो यह केवल मुख्य भाग प्रदर्शित करती है। यह निम्न table.css फ़ाइल के अनुसार प्राइमफ़ेस डिज़ाइन द्वारा प्रतीत होता है:

@media screen and (max-width: 40em) {
  .p-datatable.p-datatable-responsive .p-datatable-thead > tr > th,
  .p-datatable.p-datatable-responsive .p-datatable-tfoot > tr > td {
    display: none !important;
  }
  ...

मैं पाद लेख प्रदर्शित करने की कोशिश कर रहा हूं, लेकिन मैं असफल रहा हूं। जब मैं क्रोम डेवलपर टूल में देखता हूं तो मुझे उपरोक्त table.css ने निम्न एप्लिकेशन style.css फ़ाइल में मेरे सीएसएस को ओवरराइड कर दिया है:

@media screen and (max-width: 40em) {
  .p-datatable.p-datatable-responsive .p-datatable-tfoot > tr > td {
    text-align: left;
    display: block;
    width: 100%;
    float: left;
    clear: left;
    border: 0 none;
  }
  .p-datatable.p-datatable-responsive .p-datatable-tfoot > tr > td .p-column-title {
    padding: .4rem;
    min-width: 30%;
    display: inline-block;
    margin: -.4em 1em -.4em -.4rem;
    font-weight: bold;
  }
}

मैंने मूल रूप से उपरोक्त CSS को table.css से लिया और इसे tbody के बजाय tfoot में बदल दिया। मुझे क्रोम डेवलपर टूल में उपरोक्त सीएसएस table.css में सीएसएस के नीचे दिखाई देता है, लेकिन डिस्प्ले: ब्लॉक; लाइन में स्ट्राइक-थ्रू है।

मेरा CSS angular.json फ़ाइल में निम्नानुसार सेटअप है:

angular.json
  "build": {
    ...,
      "styles": [
        "node_modules/bootstrap/dist/css/bootstrap-grid.min.css",
        "node_modules/primeng/resources/themes/nova/theme.css",
        "node_modules/primeng/resources/primeng.min.css",
        "node_modules/primeicons/primeicons.css",
        "src/styles.css"
      ],

समस्या को प्रदर्शित करने के लिए नमूना घटक निम्नलिखित है।

<p-table id='weekTotals-grid' [value]='items'  dataKey='ExpenseTypeId' [responsive]='true'>
  <ng-template pTemplate='header'>
    <tr>
      <th style='width: 170px;'></th>
      <th><div style='width: 100px;'>Total</div></th>
    </tr>
  </ng-template>
  <ng-template pTemplate='body' let-rowData>
    <tr>
      <td>
        <span class='p-column-title'>Expense Type</span>
        {{ rowData['ExpenseType'] }}
      </td>
      <td>
        <span class='p-column-title'>Total</span>
        <div style='width: 80px;' class='nsg-wet-numeric'>
          {{ rowData['ExpenseTotal'] }}
        </div>
      </td>
    </tr>
  </ng-template>
  <ng-template pTemplate='footer' style='border-top: 1px solid black;'>
    <tr>
      <td>Totals</td>
      <td>
        <span class='p-column-title'>Grand Total</span>
          {{ grandTotal }}
      </td>
    </tr>
  </ng-template>
</p-table>

टाइपप्रति कोड:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

  items: any[];
  grandTotal: number;
  ngOnInit() {
    this.items = [
      {ExpenseTypeId: 1, ExpenseType: 'Gas', ExpenseTotal: 20.0},
      {ExpenseTypeId: 2, ExpenseType: 'Food', ExpenseTotal: 12.88},
      {ExpenseTypeId: 3, ExpenseType: 'Mileage', ExpenseTotal: 5.50}
      ];
    this.grandTotal = 38.38;
  }
}

धन्यवाद

0
Phil Huhn 9 सितंबर 2020, 20:25

1 उत्तर

सबसे बढ़िया उत्तर

मैंने रूट की कोशिश की: एनजी-डीप ::, लेकिन मैं इसे काम नहीं कर सका। तो, मैं स्टैकब्लिट्ज उदाहरण कैसे काम करता है और [उत्तरदायी] = 'सत्य' का उपयोग नहीं करता है, लेकिन इस प्रकार एक वर्ग का उपयोग करें:

/* Responsive styleClass='p-datatable-responsive-footer' */
.p-datatable-responsive-footer .p-datatable-tbody > tr > td .p-column-title,
.p-datatable-responsive-footer .p-datatable-tfoot > tr > td .p-column-title {
    display: none;
}

@media screen and (max-width: 40em) {
    .p-datatable-responsive-footer .p-datatable-thead > tr > th {
        display: none !important;
    }
    .p-datatable-responsive-footer .p-datatable-tbody > tr > td,
    .p-datatable-responsive-footer .p-datatable-tfoot > tr > td {
        text-align: left;
        display: block;
        width: 100%;
        float: left;
        clear: left;
        border: 0 none;
    }
    .p-datatable-responsive-footer .p-datatable-tbody > tr > td .p-column-title,
    .p-datatable-responsive-footer .p-datatable-tfoot > tr > td .p-column-title {
        padding: .4rem;
        min-width: 30%;
        display: inline-block;
        margin: -.4em 1em -.4em -.4rem;
        font-weight: bold;
    }
}

मैंने उपरोक्त को एप्लिकेशन style.css फ़ाइल में रखा है। मुझे लगता है कि कुछ बदलावों के साथ इस समाधान का उपयोग किसी भी HTML तालिका के लिए किया जा सकता है। सुनिश्चित करें कि आप अपरकेस सी (स्टाइल क्लास) का उपयोग करते हैं।

<p-table id='weekTotals-grid' [value]='items' dataKey='ExpenseTypeId' styleClass='p-datatable-responsive-footer'>
  ...
</p-table>
0
P. Huhn 6 अक्टूबर 2020, 21:26