Labels are missing in Firefox

[WeslleyDeSouza]

Issue on firefox:

File: https://github.com/oblique-bit/oblique/blob/42d05cb6722009da45b66d41dadd73973ff8ab2d/projects/oblique/src/styles/scss/material/_mat-form-field.scss

Current:

.mat-form-field-label {
            margin-top: 1px; // empiric value
            line-height: 1;
            overflow-x: clip;
            overflow-y: visible;
        }

Possible solution: (Not Tested on IOS/Safari)

.mat-form-field-label {
            margin-top: 1px; // empiric value
            line-height: 1;
            overflow-y: visible;
            overflow-x: hidden;
            min-height: -webkit-fill-available;
                        min-height: -moz-available;
        }

Notes to: @milan-ka-sk

 @-moz-document url-prefix() {
.mat-form-field-label {
            margin-top: 1px; // empiric value
            line-height: 1;
            overflow-y: visible;
             overflow-x: unset
            min-height: -webkit-fill-available;
                        min-height: -moz-available;
        }
} 

[milan-ka-sk]

We have the same and have made a hotfix inspired by Weslleys suggestion for now. Please make also sure that the inputs are behaving correctly also when tabbing through them if there are more of them in a group --> TAB pressed, the next one shall get the focus. With Weslley suggestion, one must press TAB 2x to get to the next input because when pressing it once the label element inside gets the focus.

Our solution:

`@-moz-document url-prefix() { // target only FF: see: https://www.geeksforgeeks.org/targeting-only-firefox-with-css/

.mat-form-field.mat-form-field-appearance-outline .mat-form-field-label {
    overflow-x: hidden;
    min-height: -webkit-fill-available;
    min-height: -moz-available;

    // when TABing through fix (still there is a bug, difficult to solve, one must TAB 2x to move)
    &:focus-visible {
        outline: none;
    }
}

}`

[Wikonire]

This has been fixed with the version 10.1.2