CODEWITHSUNDEEP
javascriptcssangularjsmaterial-designangular-material
germainelol
germainelol

Reputation: 3331

Angular Material - Why is my md-button full-width?

Simple issue, I've made a really basic page to play around with Angular Material. I have a button which is visible on medium-sized devices which toggles the side navigation, and for some reason it is full width. There is no CSS which is making it full width, and there are no Material directives which are making it full width. It seems to have inherited the width of the container it's in, but I can't see why.

Can anyone with a bit of Angular Material knowledge see why? (Just resize the window pane to see the button)

Here's my CodePen:

http://codepen.io/anon/pen/jPYNzy

And the code:

<!-- Container -->
<div layout="column" layout-fill>
    <div layout="row" flex>

        <!-- Content -->
        <md-content flex>

            <md-toolbar>
                <div class="md-toolbar-tools">
                    <h1>Title</h1>
                </div>
            </md-toolbar>

            <div layout="column" class="md-padding">
                <p>
                The left sidenav will 'lock open' on a medium (>=960px wide) device.
                </p>
                <md-button ng-click="toggleLeft()" hide-gt-md>
                    Toggle left
                </md-button>
            </div>

        </md-content><!-- ./Content -->

    </div>
</div><!-- ./Container -->

Upvotes: 6

Views: 23674

Answers (3)

miyamoto
miyamoto

Reputation: 1540

Just wrap it in another div if this is undesired. The flex-direction of <div layout="column"> seems to be responsible for the behavior.

Upvotes: 22

vijay kani
vijay kani

Reputation: 140

I just add the DIV tag to md-button with style property of width 100px

Its Work fine 

 <div style="text-align:center;">
                <md-button ng-click="toggleLeft()" hide-gt-md style="width:100px;">
                    Toggle left
        </md-button></div>

Upvotes: -1

StudioTime
StudioTime

Reputation: 23999

An elements width defaults to 100% of it's container, unless specified otherwise.

Upvotes: 1

Related Questions