form-field: remove extra bottom space

[Wykks]

Bug, feature request, or proposal:

Add a way to remove the extra bottom space when there's no hint or error possible.

What is the current behavior?

https://stackblitz.com/edit/angular-material2-issue-pq4ikd

Which version of Material is affected?

2.0.0-beta.12

[amcdnl]

This is working by design.

We want to create a consistent space whether padding or not for alignment reasons.

[Wykks]

Okay, now with this example : https://stackblitz.com/edit/angular-material2-issue-hyhhxo
Basically: an search input with result in a list. There's way too much space between the list and the input.

It's easy to remove the padding-top of the md-list, but it's not enough, and removing the extra bottom space of form-field is not a simple padding-bottom: 0px;. It should be easier to remove this extra space when it doesn't make sense.

Or this use case should be handled with a new custom search component (https://material.io/guidelines/patterns/search.html) ?
(But I can find more use case when the extra space doesn't make sense)

[merlosy]

Try removing mat-form-field wrapper.. It's seems to do the job

[Wykks]

Yeah... https://stackblitz.com/edit/angular-material2-issue-xrdzn6
It just kill matInput and render a regular input which doesn't have the extra bottom space of course..

[benb7760]

I think that there is a decent case for implementing a component or directive to render an input in line with the search pattern guidelines as mentioned by @Wykks

[jelbourn]

Closing this since this is intentional and we have no plans to change it

[petersalomonsen]

Workaround when e.g. adding a search field to a toolbar and you don't want the space below is to set a negative margin:

<mat-form-field style=" margin-bottom: -10px">

[sambaptista]

10px is not enough considering size of padding.

<mat-form-field style=" margin-bottom: -1.25em">

I agree that spacings should be consistent in a form context, but on other contexts (like a search on a toolbar or in the header of a page) this spacing breaks layout gap consistency.

The user should be allowed to configure the mat-form-field component to never need this bottom spacing and remove it.

This could interfere with #3984

[simeyla]

So I want consistent spacing. That is precisely why I am here.

That is probably why everybody is here too. This is all I want to achieve, but for a mat-select to get an underline it needs to be inside a form field which adds extra spacing:

• Checkbox 1
• Checkbox 2 __mat-select__
• Checkbox 3

If anyone can suggest a way to achieve the above layout 'legally' I'd love to hear it. In the meantime this is how I managed it. Same idea as @sambaptista but had to tweak the top margin too to get the select to align with the checkbox text.

(I'm using angular-flex layout too):

<div fxLayout="column" fxLayoutGap=".5em">

    <mat-checkbox >First option</mat-checkbox>

    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="1em">

        <mat-checkbox (checked)="false">Second option</mat-checkbox>    

        <mat-form-field [style.marginBottom]="'-1.25em'" 
                                   [style.marginTop]="'-1em'">
            <mat-select [(value)]="subOption">
                <mat-option *ngFor="let option of subOptions" [value]="option.value">{{ option.desc }}</mat-option>
            </mat-select>
        </mat-form-field>   

    </div>

    <mat-checkbox>Third option</mat-checkbox>

</div>

But the reason this won't be supported natively is 'because we want consistent spacing'. My head is spinning.

[BlindDespair]

Ran into same issue, we are using mat-select inside mat-table inside modal window. When table is as big as modal it should become scrollable, but because of the spacing in mat-form-field it makes table always scrollable. Although workaround suggest by @simeyla works in our case too.

[jfcere]

This would be great to have a built-in solution for more flexibility over the automatically generated <div class="mat-form-field-wrapper">, like an @Input() noPadding: boolean on <mat-form-field> for example, to specify whether or not we want that extra space.

Yes there are workarounds but we'll always have to handle it on our side ...

My current workaround consists of a CSS utility class that I created to apply on <mat-form-field> that negates the bottom padding on .mat-form-field-wrapper :

css

.mat-form-field.no-padding > .mat-form-field-wrapper {
  margin-bottom: -1.25em;
}

html

<mat-form-field class="no-padding">

The problem with that workaround is that @angular/material2 team could change the padding-bottom value and breaks the layout without you noticing.