CODEWITHSUNDEEP
cssangular-material
LarsMonty
LarsMonty

Reputation: 762

Adjusting height of md-button strange behavior

I'm trying to adjust the height of an md-button, and it's been quite frustrating. I have hard-coded the < button-container > element to be 25 px high, which is the height I would like the buttons to be. However, the hover animation still overflows over this height, like so: enter image description here

However, when I go in and add 25px height to the buttons themselves, it seems to offset the content, like so: enter image description here

Anyone know of a way to write a style that will fix this behavior? I'm not quite sure why hard-coding a height into the button causes the text to drop to the bottom.

Here is my html:

<div id="buttons-container">

    <button 
        md-button
        id="add-track-button" 
        (click)="addTrack()"
    >
        <md-icon>add</md-icon> 
        <span>Add Track</span>  
    </button>

    <button 
        md-button
        id="delete-track-button"
        [disableRipple]="true"
        [disabled]="this.tracksArray.length === 0"
        (click)="toggleDeleteTrackMode()"
    >
        <md-icon>delete</md-icon> 
        <span>Delete Tracks</span>
    </button>

    <button 
        md-button
        id="add-marker-button"
        [disableRipple]="true"
        (click)="toggleAddMarkerMode()"
    >
        <md-icon>add</md-icon> 
        <span>Add Marker</span>
    </button>

    <button 
        md-button
        id="add-frame-span-button"
        [disableRipple]="true"
        (click)="toggleAddFrameSpanMode()"
   >
        <md-icon>add</md-icon> 
        <span>Add Span</span>
    </button>

</div>

Here is my CSS:

#buttons-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    height: 25px;
    color: black;
    background-color: grey;

    button {
        font-size: 10px;
        // If this line is commented out, the text is aligned fine but the hover animation overflows
        // If it isn't, the content offsets to the bottom like in the picture above
        height: 25px;
        padding: 0px 2px;

        md-icon {
            font-size: 18px;
            height: 18px;
            width: 18px;
        }
    }

    #add-marker-button {
        md-icon {
            color: $marker-color;
        }
    }

    #add-frame-span-button {
        md-icon {
            color: $frame-span-color;
        }
    }
}

Upvotes: 0

Views: 784

Answers (1)

nextt1
nextt1

Reputation: 3988

Use min-height, 'max-heightwithline-height` to get the desired result.

Here is the Inline styling example.

<md-button  style="min-height:25px;background-color:yellow"> Button 1</md-button>
<md-button class="custome-button" style="min-height:25px;max-height:25px;background-color:red; text-align:center;line-height:25px"> Button 2</md-button>

Here is the working codepen.

Upvotes: 1

Related Questions