Ad

How To Fix Height Of Laravel Page And Carousel At Loading?

- 1 answer

As a beginner with Php i am stuck with following issue: During loading of my page, when graphs are not yet populated,

  • Page bottom appears close to Nav bar before page resizing with graphs getting populated
  • Slick-carousel briefly appears vertical before getting horizontal

This page resizing creates a poor user experience.

How can I fix page size at loading? Or should I use a spinner waiting for the full page to be ready? Thks for advices

Update with test files to reproduce the error :

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */
// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
@import "variables";

// Bootstrap
@import '~bootstrap/scss/bootstrap';

.navbar-laravel {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

// Custom
@import "custom";

// Map
@import "map";

//use also JSON wizard for formatting
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>

    <!-- For the coins carousel -->
    <link rel="stylesheet" type="text/css" target="_blank" rel="nofollow noreferrer" href="http://kenwheeler.github.io/slick/slick/slick.css"/>
    <link rel="stylesheet" type="text/css" target="_blank" rel="nofollow noreferrer" href="http://kenwheeler.github.io/slick/slick/slick-theme.css"/>

</head>

<body>
<div id="header" class="container">
    <div>
        <div class="slider slider-nav">

    <!--see https://medium.com/wdstack/bootstrap-4-hidden-visible-dd969a4c5854,seems not worling as nt in Grid maybe?-->
    <!-- https://www.sshakil.com/blog/article/1/Make-bootstrap-carousel-dynamic-in-Laravel-->

                   <p>
                <img class="-logo-32x32" alt="" sizes="32x32">

          </p>
                  <p>
                <img class="-logo-32x32" alt="toto-0" sizes="32x32">

          </p>
                  <p>
                <img class="-logo-32x32" alt="toto-1" sizes="32x32">

          </p>
                  <p>
                <img class="-logo-32x32" alt="toto-2" sizes="32x32">

          </p>
                  <p>
                <img class="-logo-32x32" alt="toto-3" sizes="32x32">

          </p>
                  <p>
                <img class="-logo-32x32" alt="toto-4" sizes="32x32">

          </p>
                  <p>
                <img class="-logo-32x32" alt="toto-5" sizes="32x32">

          </p>
                  <p>
                <img class="-logo-32x32" alt="toto-6" sizes="32x32">

          </p>
                  <p>
                <img class="-logo-32x32" alt="toto-7" sizes="32x32">

          </p>
                  <p>
                <img class="-logo-32x32" alt="toto-8" sizes="32x32">

          </p>
                  <p>
                <img class="-logo-32x32" alt="toto-9" sizes="32x32">

          </p>
                  <p>
                <img class="-logo-32x32" alt="toto-10" sizes="32x32">

          </p>
        

</div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="/assets/app/js/app.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script >
$(document).ready(function(){

 $('.slider-nav').slick({
   slidesToShow: 8,
   slidesToScroll: 1,

   dots: true,
   centerMode: true,
   autoplay: true,
   autoplaySpeed: 1000,
 });

});


</script>

</body>
</html>

I have same issue with Google chart : while chart of loading their date, their placeholder is height 0 briefly before taking the expected space. I can see on google website https://developers.google.com/chart/interactive/docs/gallery/columnchart that their chart take some time to appear but placeholder has a fix size and it is responsive.

Ad

Answer

Initial, generic answer:

You're probably experiencing FOUC.

It's because you are loading styles for your elements inside your <body> element, after the elements that are being styled have been rendered.

There are (at least) two possible fixes:

  • either move the loading of your style rules inside <head> (and use <link>)
  • or give your <body>opacity:0; transform: opacity .5s ease-out and after the styles have loaded change its opacity to 1.

Obviously, the transform and its sub-properties are optional. If you don't want a transition you could also use visibility or display properties instead of opacity.

Also, instead of targeting everything (<body>), you could simply target the elements causing FOUC and any subsequent elements in DOM which might also be affected. To limit the unstyled elements from affecting their siblings one could use max-height and min-height on them, but keep in mind this needs to be done considering responsiveness (has to work on all device widths).


Specific answer (after MCVE was added):

Looking further into the issue, it's not a classic FOUC case, but a pseudo-FOUC (styles are changed by JavaScript, when Slick is initialized). I found this git issue, providing multiple solutions.
Turns out placing the class slick-slide on each of your <p>'s and slick-slider class on the parent hides the slides before Slick is initialized, thus eliminating the pseudo-FOUC.

Alternatively, if you don't want to add those classes to your markup (and take advantage of Slick's existing CSS), you could add this to your own CSS:

.slider p {
    display: none;
}
.slider p:first-child,
.slick-initialized.slider p {
    display: block;
}

...which is tailored on your current markup.

Ad
source: stackoverflow.com
Ad