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

Question

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 -->

Solution 1

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

Solution 2

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

Comments

[Sajeetharan]

I dont see any button

[germainelol]

@Sajeetharan The button is viewable on md devices as I mentioned in my post.

[miyamoto]

That's the reason why it's full-width. hide-gt-md sets a min-width and max-width.

[germainelol]

@miyamoto Yes, I saw that that the min-width is 88px, but there is no max-width anywhere, just a width setting.

[miyamoto]

I misspoke. It seems to be from the <div layout="column"> flex. Removing -webkit-flex-direction: column (I'm on Chrome) displays it inline with the text and of a "regular" size.

[germainelol]

I don't think this is a good solution, this is very dependent on the text inside the button and not reusable.

[germainelol]

Awesome, thanks! So when it comes inside the div column it treats the button almost as an entire column, but when it's wrapped inside another div, it treats the div as a column and the button as a regular button...right? I hope I've made myself clear!

[miyamoto]

Yeah, basically I think. I'm a little fuzzy on it myself but the layout attribute turns div into a flex container and its immediate children into flex items. The flex-direction from layout="column" means that they are being stacked (and then "flexed" in the horizontal direction??). Wrapping the button in another div means that that div is the immediate child and the flex item.

[germainelol]

Great explanation dude. I understood what you said, but Angular Material definitely needs a dictionary of all of these terms with 1 sentence descriptions. A lot of the examples on the docs are just images or CodePens which don't explain the theory very well.

[miyamoto]

It's not unique to angular-material, it's just css. I had to read these though, and still not a 100% what's going on behind the scenes. scotch.io/tutorials/a-visual-guide-to-css3-flexbox-propertie‌​s css-tricks.com/snippets/css/a-guide-to-flexbox

[germainelol]

I've read through this before and tried having a play with flexbox (not in angular-material), but it's a very different logic to standard bootstrap/foundation style grid systems and the way they work. I'll take another read of that article I think.

[vijay kani]

Ok for dependency of text inside. add attribute as "min-width:100px" and Width in Percentage. it does the trick... hope its helpful

[germainelol]

It works, but it isn't a good solution. By default the button should be dependent on it's content. You can see the above answer that I chose for a more reusable solution.