मैंने एक आइकन के साथ और टेक्स्ट के बिना एक मैट-आइकन-बटन बनाया है और मुझे उम्मीद है कि इसमें केवल आइकन का आकार होगा। हालांकि, ऐसा लगता है कि बटन में आइकन का आकार है, साथ ही दाईं ओर एक अदृश्य सफेद स्थान है जो मुझे लगता है कि टेक्स्ट के लिए है।

मैंने व्हाइटस्पेस को गायब करने के लिए समाधान खोजने की कोशिश की लेकिन कोई भी काम नहीं कर रहा है। एचटीएमएल में मेरा बटन कोड:

<table id="tablePrevisions" class="table table-bordered table-striped">
<thead class="thead-dark">
  <tr>
    <th scope="col">Date</th>
    <th scope="col">Modèle</th>
    <th scope="col">Domaine</th>
    <th scope="col">Emprise</th>
    <th scope="col">Echéances</th>
    <th scope="col" class="validation-col">Validation</th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let previsionMeteo of previsionsMeteo; let i = index">
    <td (click)="onRowClicked(previsionMeteo)">{{ previsionMeteo.reseau }}</td>
    <td (click)="onRowClicked(previsionMeteo)">{{ previsionMeteo.cod_modele }}</td>
    <td (click)="onRowClicked(previsionMeteo)">{{ previsionMeteo.cod_domaine }}</td>
    <td (click)="onRowClicked(previsionMeteo)">{{ previsionMeteo.emprise }}</td>
    <td (click)="onRowClicked(previsionMeteo)">{{ previsionMeteo.echeances_plage }}</td>
    <td>
        <button mat-icon-button (click)="showValidation(previsionMeteo)" [class]="classButtons[i]" [disabled]="classButtons[i]=='validation-not-exists'">
            <mat-icon>list_all</mat-icon>
        </button>
    </td>
  </tr>
</tbody>
</table>

और सीएसएस में मेरी कक्षाएं:

.validation-exists {
    color: blue;
    width: 50px !important;
    padding: 0 !important;
}
.validation-not-exists {
    color: gray;
    width: 50px !important;
    padding: 0 !important;
}

समस्या का एक उदाहरण:

enter image description here

0
Mickaël L'Haridon 29 जुलाई 2021, 15:47

2 जवाब

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

इसलिए मैं बाद में इस समस्या पर वापस आया, और कोणीय में मौजूदा उदाहरणों के साथ प्रयास किया, और मुझे पता चला कि समस्या वास्तव में बहुत सरल है। मैंने गलती से मैट-आइकन का नाम list_all लिख दिया था (जो मुझे किसी वेबसाइट पर मिला था जो मुझे याद नहीं है) list के बजाय, और जब मैंने कोड> सूची यह काम किया।

मुझे नहीं पता कि यह उद्देश्य पर बनाया गया है या नहीं, लेकिन ऐसा लगता है कि एंगुलर आइकन को खोजने के लिए केवल स्ट्रिंग की शुरुआत का उपयोग करता है और यदि इसके बाद कुछ लिखा जाता है, तो यह प्रभाव होता है।

मैंने इसे "होम" के लिए आइकन के साथ आज़माया और home_test के बाद कुछ जोड़ा और वही प्रभाव मिला। मुझे नहीं लगता कि यह बग एंगुलर के लिए सुरक्षा के मामले में समस्याग्रस्त है, लेकिन यह जानकारी अन्य लोगों के लिए उपयोगी हो सकती है जो एक ही गलती करते हैं।

1
Toni 3 सितंबर 2021, 16:29

मैं इसे यहां कोशिश करूंगा:

<td class="validation-button-table-data">
    <button mat-icon-button (click)="showValidation(previsionMeteo)" [class]="classButtons[i]" [disabled]="classButtons[i]=='validation-not-exists'">
        <mat-icon>list_all</mat-icon>
    </button>
</td>

और फिर अपने सीएसएस को बटन के बजाय माप के साथ <td> में जोड़ें:

.validation-button-table-data {
    width: 50px !important;
    padding: 0 !important;
}

मुझे बताएं कि क्या यह बेहतर दिखता है।

अपडेट करें:

कृपया उसी सीएसएस वर्ग validation-button-table-data को अपने पिछले <th> के उपायों के साथ जोड़ने का प्रयास करें। इस कदर:

<th scope="col" class="validation-button-table-data">Validation</th>
0
Kurt Lagerbier 29 जुलाई 2021, 15:34