Geek Answers Handbook

Angular Material. Why is my md button full width?

A simple problem, I made a really basic page to play with Angular stuff. I have a button that is visible on midsize devices that switch side navigation and for some reason have full width. There is no CSS that makes it full width, and no material directives that make it full width. It seems to have inherited the width of the container it is in, but I don't understand why.

Can anyone with a little Angular Knowledge of the material, why? (Just resize the window to see the button)

Here is 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 -->
+4
source share
3

div, . <div layout="column">, -, .

+16

100% , .

+2

I just add a div tag to the md button with the style property 100px wide

His work is excellent

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

More articles:


All Articles