4

Estoy utilizando de framework Materialized, y me encuentro con este problema cuando a la hora de visualizar las tarjetas que quiero mostrar, sabeis que me esta faltanda para mostrar el orden correcto y no me de el salto por culpa del largo del formato del titutlo.

  <div id="ultimostrabajos">
    <div class="row">
        @foreach($ultimostrabajo as $listado)
        <div class="col xl4 m6 s12">
            <div class="card sticky-action">
                <div class="card-image waves-effect waves-block waves-light">
                    <img class="activator responsive-img" src="storage/{{ $listado->url }}" alt="{{ $listado->name }}">
                </div>
                <div class="card-content deep-purple lighten-2 z-depth-3">
                    <span class="card-title activator grey-text text-lighten-4">{{ $listado->titulo }}</span>
                </div>
                <div class="card-reveal yellow accent-1">
                    <span class="card-title grey-text text-darken-4">{{ $listado->titulo }}<i class="material-icons right">close</i></span>
                    <p>{{ $listado->descripcion }}</p>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>

introducir la descripción de la imagen aquí

2 respuestas 2

2

Si le pones un alto mínimo, solo aplicará para los que miden menos de la mayoría, pero, ¿qué pasa si uno mide más que la mayoría?, además no será responsivo, lo que puedes hacer es una función en javascript que obtenga la mayor altura de todas y asignarle esa altura máxima, en este ejemplo uso jQuery:

$(window).load(function(){
   calcularAlto();
});

function calcularAlto(){
   $(".card-content").css("height","auto");
   mayor = 0;
   $.each( $(".card-content"), function( key, value ) {
      x = $(value).outerHeight();
      if(x>mayor){ mayor = x; }
   });
   $(".card-content").css("height", mayor);
}

Ahora, cuando la ventana se haga más chica, la altura va a cambiar debido al texto que necesitará más espacio, para solucionar esto y sea responsivo solo necesitas llamar a la misma función cuando la ventana haga resize:

$(window).resize(function(){
   calcularAlto();
});

Como mejora a esto, para que visualmente no sea incómodo y se vea como se aplica la nueva altura en lo que carga la página, puedes ponerle una opacidad a tus elementos en lo que cargan o realizar un spinner y esconderlo cuando termine de cargar y a continuación mostrar tus elementos.

1

Puedes hacer un min-height al contenedor del texto de descripción de manera que todos midan lo mismo

<div style="min-height=100px;" class="card-content deep-purple lighten-2 z-depth-3">

Los 100px es un ejemplo, maneja la cantidad que necesites

Tu Respuesta

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

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