Simple problema, he hecho realmente una página básica para jugar con Angulares Material. Tengo un botón que es visible en las medianas de los dispositivos que alterna el panel de navegación lateral, y por alguna razón es el ancho completo. No hay CSS que es lo que es la anchura total, y no hay ningún Material de las directivas que están haciendo todo el ancho. Parece haber heredado el ancho del contenedor es, pero no puedo ver por qué.

Puede cualquier persona con un poco de Angular conocimiento de Materiales ver por qué? (Sólo cambiar el tamaño de la ventana del panel para ver el botón)

Aquí está mi CodePen:

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

Y el código:

<!-- 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 -->
Yo no veo ningún botón
El botón es visible en md dispositivos como mencioné en mi post.
Esa es la razón por la que es de ancho completo. hide-gt-md establece un min-width y max-width.
Sí, he visto que el min-width es 88px, pero no hay max-width en cualquier lugar, sólo un width configuración.
Yo misspoke. Parece ser que a partir de la <div layout="column"> flex. La eliminación de -webkit-flex-direction: column (yo estoy en Chrome) se muestra en línea con el texto y de un «regular» de tamaño.

OriginalEl autor germainelol | 2015-06-26

3 Comentarios

  1. 19

    Basta con ponerla en otro div si esto es indeseable. El flex-dirección de <div layout="column"> parece ser responsable de la conducta.

    Impresionante, gracias! Así que cuando se trata dentro de la div column trata el botón de casi toda una columna, pero cuando se envuelve dentro de otro div, trata el div como una columna y el botón como botón…¿verdad? Espero me he hecho a mí mismo claro!
    Sí, básicamente creo. Estoy un poco difusa en mí mismo, pero el layout atributo se convierte div en un contenedor flex y su inmediata a los niños en flex elementos. El flex-direction de layout="column" significa que están siendo apilados (y, a continuación, «doblada» en la dirección horizontal??). Envolver el botón en otro div significa que div es la inmediata niño y la flexión del elemento.
    Excelente explicación amigo. He entendido lo que dijo, pero Angulares Material definitivamente necesita un diccionario de todos estos términos con 1 frase descripciones. Muchos de los ejemplos en los documentos son sólo imágenes o CodePens que no explican la teoría muy bien.
    No es exclusivo de angular-material, es solo css. Tuve que leer estos, sin embargo, y aún no es 100% lo que está pasando detrás de las escenas. scotch.io/tutoriales/-visual-guía-para-css3-flexbox-propiedades css-tricks.com/snippets/css/a-guide-to-flexbox
    He leído a través de este antes y trató de tener un juego con flexbox (no en angular-material), pero es muy diferente de la lógica estándar bootstrap/fundación estilo de los sistemas de la red y la forma en la que trabajan. Voy a tomar otra lectura de ese artículo, creo.

    OriginalEl autor miyamoto

  2. 1

    Un de los elementos de la anchura por defecto 100% de su contenedor, a menos que se especifique lo contrario.

    OriginalEl autor Darren Sweeney

  3. -1

    Acabo de añadir la etiqueta DIV para md-botón con el estilo de la propiedad de ancho de 100px

    Su Trabajo fino

     <div style="text-align:center;">
                    <md-button ng-click="toggleLeft()" hide-gt-md style="width:100px;">
                        Toggle left
            </md-button></div>
    Yo no creo que esta sea una buena solución, esto es muy dependiente en el texto dentro del botón y no reutilizables.
    Ok para la dependencia de texto en el interior. agregar el atributo «min-width:100px» y el Ancho en Porcentaje. se hace el truco… espero su gran ayuda
    Funciona, pero no es una buena solución. Por defecto, el botón debe ser dependiente de su contenido. Usted puede ver la respuesta anterior que he elegido para una más reutilizable solución.

    OriginalEl autor vijay kani

Dejar respuesta

Please enter your comment!
Please enter your name here