Saya mencoba menyesuaikan celah antara label mengambang dan batas di sebelahnya.

Seperti yang Anda lihat di bawah, pada gambar kedua:

enter image description here

enter image description here

Ada celah yang lebih lebar di sebelah kanan, antara label mengambang dan perbatasan. Saya ingin menyesuaikan ini sehingga celahnya rata di kedua sisi.

Gaya yang saya miliki sejauh ini untuk label mengambang:

mat-form-field span.mat-form-field-label-wrapper label {
    color: white;
    opacity: 0.5;
}

.mat-form-field-label-wrapper {
    transform: translate(1.3em, -0.3rem);
}

.mat-form-field.mat-focused .mat-form-field-label {
    font-size: 0.75rem;
    color: white;
    opacity: 1;
}

Saya mencoba bermain-main dengan margin-kanan dan menerjemahkan ke kanan tetapi sepertinya tidak ada yang berhasil ... kesenjangan itu tetap ada.

Apakah ada cara saya bisa melakukan ini?

Terima kasih sebelumnya.

1
Manuel Brás 12 Mei 2021, 12:44

1 menjawab

Jawaban Terbaik

Elemen yang ingin Anda sesuaikan adalah div dengan kelas mat-form-field-outline-gap. Masalahnya adalah ia memiliki lebar statis yang dihasilkan secara dinamis berdasarkan teks label.

Cara mengatasinya adalah dengan menetapkan margin negatif untuk kelas mat-form-field-outline-gap:

.mat-form-field-outline-gap {
  margin-right: -6px;
}

https://stackblitz.com/angular/lmgyydoebpro?file=src%2Fstyles.scss

1
robbieAreBest 12 Mei 2021, 13:52