Angulaire du Matériel - Pourquoi mon md-bouton de pleine largeur?

Simple question, j'ai vraiment fait un basique de la page pour jouer avec Angulaire du Matériel. J'ai un bouton qui est visible sur les moyennes des appareils qui permet de basculer du côté de la navigation, et pour une raison quelconque, il est en pleine largeur. Il n'y a pas de CSS qui fait qu'il est en pleine largeur, et il n'y a pas de Matériel directives qui rend toute la largeur. Il semble avoir hérité de la largeur du conteneur, il en, mais je ne vois pas pourquoi.

Peut n'importe qui avec un peu de Angulaire du Matériel de connaissances voir pourquoi? (Il suffit de les redimensionner le volet de la fenêtre pour voir le bouton)

Voici mon CodePen:

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

Et le 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 -->
Je ne vois aucun bouton
Le bouton est visible sur md appareils comme je l'ai mentionné dans mon post.
C'est la raison pour laquelle elle est pleine largeur. hide-gt-md jeux un min-width et max-width.
Oui, j'ai vu que le min-width est 88px, mais il n'y a pas de max-width n'importe où, juste un width réglage.
Je me suis mal exprimée. Il semble être de la <div layout="column"> flex. Retrait -webkit-flex-direction: column (je suis sur Chrome) l'affiche en ligne avec le texte et d'un "régulier" de la taille.

OriginalL'auteur germainelol | 2015-06-26

  1. 19

    Juste envelopper dans un autre div si cela est souhaitable. Le flex-direction de <div layout="column"> semble être responsable pour le comportement.

    Génial, merci! Alors, quand il vient à l'intérieur du div column il traite le bouton presque comme une colonne entière, mais quand il est enveloppé dans une autre div, il traite de la div comme une colonne et le bouton comme un bouton habituel...droit? J'espère que j'ai été clair!
    Ouais, en gros je pense. Je suis un peu floue sur moi-même, mais le layout attribut tourne div dans un conteneur flex et ses enfants immédiats en flex éléments. Le flex-direction de layout="column" signifie qu'ils sont empilés (et puis "flexion" dans le sens horizontal??). Emballage le bouton dans l'autre div signifie que div, qui est à l'enfant et à la flexion de l'élément.
    Grande explication de mec. J'ai compris ce que vous avez dit, mais Angulaire Matériau certainement besoin d'un dictionnaire de tous les de ces conditions avec 1 phrase descriptions. Beaucoup d'exemples sur les docs sont juste des images ou des CodePens qui ne pas expliquer la théorie de très bien.
    Il n'est pas unique à angulaires-le matériel, c'est juste du css. J'ai eu à lire ces si, et toujours pas un 100% ce qui se passe derrière les coulisses. scotch.io/tutoriels/un-visual-guide-de-css3 flexbox-propriétés css-tricks.com/snippets/css/a-guide-to-flexbox
    J'ai lu ça avant, et essayé d'en avoir un pour jouer avec flexbox (pas dans angulaires-le matériel), mais d'une façon très différente de la logique standard bootstrap/fondation style de systèmes de réseau et la façon dont ils travaillent. Je vais prendre une autre lecture de cet article je pense.

    OriginalL'auteur miyamoto

  2. 1

    Un des éléments de la largeur par défaut est de 100% de son conteneur, sauf indication contraire.

    OriginalL'auteur Darren Sweeney

  3. -1

    Je viens d'ajouter la balise DIV de md-bouton avec le style de la propriété de la largeur de 100px

    Ses beaux Travaux 

     <div style="text-align:center;">
                <md-button ng-click="toggleLeft()" hide-gt-md style="width:100px;">
                    Toggle left
        </md-button></div>
    Je ne pense pas que ce soit une bonne solution, c'est très dépendante sur le texte à l'intérieur du bouton et non réutilisables.
    Ok pour la dépendance de texte à l'intérieur. ajouter un attribut "min-width:100px" et de la Largeur en Pourcentage. il fait le tour... espérons que c'est utile
    Il fonctionne, mais ce n'est pas une bonne solution. Par défaut, le bouton doit être dépend de son contenu. Vous pouvez voir la réponse ci-dessus que j'ai choisi pour une plus réutilisable solution.

    OriginalL'auteur vijay kani