StackBlitz: https://stackblitz.com/edit/angular-bn3lcp
Steps to reproduce:
Similar to https://github.com/angular/components/issues/15027
but its for dynamic changing text prefix
I want to make a search input with a starting (prefix) dynamic tag.
I would like either to stay the legend at starting position (top-left)
either the border to render at new position of legend
when the text of tag change i see blank space and wrong positioning to label
https://stackblitz.com/edit/angular-bn3lcp-ksnvaw?file=app/form-field-appearance-example.html
thanks! i will handle it with updateOutlineGap its an acceptable solution! 馃帀
@nicholasp, to be clear, the solution updateOutlineGap is to a different problem. The prefix position on an outlined form field is still broken.
This issue is actually worse because matSuffix doesn't align correctly with text on an outlined form field either.
The solution is to remove this class EXCEPT when .mat-form-field-prefix or .mat-form-field-suffix have mat-icon children. In other words, removing the css below solves the problem but creates the same issue when icons are used.
.mat-form-field-appearance-outline .mat-form-field-prefix, .mat-form-field-appearance-outline
.mat-form-field-suffix {
top: .25em;
}
will post an update on #12803
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
_This action has been performed automatically by a bot._
Most helpful comment
https://stackblitz.com/edit/angular-bn3lcp-ksnvaw?file=app/form-field-appearance-example.html