I've been trying to make a mobile-friendly search bar that conforms to Material design spec, in particular the expandable search (see "Expandable search" here).
I've not had a ton of success using vanilla Angular Material components. This is due to the unremovable underline that comes packaged with
mat-form-field, but also the 'clear' button that appears when there is text in the search bar, which by default is quite small.
I was able to sort of fix the 'clear' button by forcing the
font-size for that button with an
!important CSS rule, but I've had no such luck trying to get rid of the underline. Can somebody tell me whether I'm doing something wrong here, or is this just not possible with the current capabilities of Angular Material?
A Stackblitz demo of the closest I've been able to make can be found here.
Also, this is a bit unrelated, but has anybody else found that
mat-form-fields default to having 1.5px letter spacing? This looks super weird, and I've always had to override the letter spacing to
normal. Not a huge deal, just thought it was strange.
@vpasudo yeah, I had seen that option on some SO posts. When I do that, there's still some empty space beneath the input, so it looks weird. Trying to fix the space by altering margin/padding/border is just a bit much given all the wrappers, etc. that Angular Material puts around
mat-form-fields. I just realized I didn't give the link for the interactive Stackblitz in my original post, so you can see how doing the
::ng-deep trick turns out here
@DaveMBush You're right, there are multiple ways of formatting the form controls, and I've tried all of them. None of them do what I'd like, at least not out of the box. The best version I got was with
floatLabel="never" so that the placeholder doesn't float when the input is focussed (which if it does float, it looks horrible when the input is inside of a nav bar)
I'm sure I could get it done eventually either with some major tweaks or possibly just writing my own component outside of Angular Material, but I don't have enough time right now to futz with it like that. I kind of wish this was just available by default. I get that the Angular Material team's whole ethos is being non-opinionated, but it'd at least be nice to look at the Material Design Patterns spec and be able to replicate it with some level of ease, rather than not even being able to use their products to do it, which is kind of what it's looking like right now