0

Buen dia. Me encuentro aqui ya que estoy haciendo una pagina con angular/material
El contexto del problema:
En el archivo app.component.html tengo lo siguiente

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

En el archivo header.component.html del componente header tengo el ejemplo de toolbar de angular
En el archivo header.component.css tengo

mat-toolbar {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
.example-spacer {
    flex: 1 1 auto;
}
La verdad ni se de donde saque el código para definir el estilo de mat-toolbar y en el archivo .html de cualquier otro componente que se muestra en tengo un mat-card o cualquier otra cosa que sea de material y al desplazar el contenido de , este se superpone al componente Header

1 respuesta 1

0

Que no se enoje StackOverflow pero al terminar de preguntar se me ocurrió la respuesta pero aun así la publique para mi yo del futuro venga a ver la solución y cualquier otro usuario que le pase lo mismo.

El caso es que de dejar en blanco el css del componente header, el header sube con todo el contenido al desplazar el scroll pero el codigo que hace lo que requiero es

mat-toolbar {
    z-index: 999;
    position: fixed;
  }
.example-spacer {
    flex: 1 1 auto;
}

Pero ahora el problema es que al ser fixed El contenido del resto de componentes quedan por debajo del mat-toolbar ya que todos los elementos comienzan a posicionarse en {x:0,y:0} y para evitar que el contenido quede escondido se me ocurrió crear otro mat-toolbar y cambiar el selector del headercomponent de mat-toolbar a una clase llamada toolbarreal (No soy bueno poniendo nombres) entonces el codigo del header.component.html queda de la siguiente manera

<!--Ejemplo de angular-->
<mat-toolbar class="toolbarreal" color="primary">
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
    <mat-icon>menu</mat-icon>
  </button>
  <span>My App</span>
  <span class="example-spacer"></span>
  <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
    <mat-icon>favorite</mat-icon>
  </button>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
    <mat-icon>share</mat-icon>
  </button>
</mat-toolbar>
<!--Codigo parasito para que el contenido de abajo siga su flujo normal-->
<mat-toolbar color="primary">

</mat-toolbar>

Como no se mucho de maquetado con html y css puede no ser la mejor respuesta así que si alguien que lea esto quiere mejorar la respuesta se lo agradecería mucho...

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.