Dashboard rendering issue

#1

I have a custom dashboard with a hierachy of elements composed by page/container/comnponents and I defined all the templates and sub-template for pages/containers/components. Each time I reach the dashboard url from the browser I need to run the keyboard shortcuts to zoom-in/zoom-out the webpage in order to make page render.

Is there a way to avoid it?

Here, the template for the page:

{{ div.container-fluid.c3-page-dashboard.c3-page-MyPackageUi-dashboard({cls: cls}) do }}
    <div id="side-menu" />
    <div id="side-sub-menu" />
    <div class="row" style="margin: 0 0 10px 0">
        <div class="col-md-12 text-center">
            {{ h1 title }}
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 text-center">
            <h3 align="center" style="margin: 0 0 5px 0">ONLINE DATA</h3>
        </div>
    </div>
    <div class="row" style="margin: 0 0 10px 0">
        <div class="c3-component-socket col-sm-12" id="SelectorLine">
          <div class="col-lg-2 text-left" style="margin-left: 0px;">
                <div id="DashboardDtrCode" style="display: inline-block; width: 110px;"></div>
          </div>
          <div class="col-lg-2 text-left" style="margin-left: 0px;">
            <div id="DashboardSibiloCode" style="display: inline-block; width: 110px;"></div>  
          </div>
          <div class="col-lg-8 text-center align-self-center" style="margin: 0 0 5px 0">
              <div id="GeneralInfo" style="display: inline-block;"></div>
          </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="c3-component-socket"  id="ContainerDetails"></div>
        </div>
    </div>
{{ end }}

Here, the template for the container:

<div class="c3-container container-fluid">
  <div class="row" style="margin: 10px 0 5px 0">
      <div class="col-md-4" style="text-align: center">
          <div class="c3-component-socket align-self-center"  id="BoilerDiagram" style="margin-left: 5px;"></div>
      </div>
      <div class="col-md-8">
          <div class="c3-component-socket align-self-center"  id="Chart" style="margin-right: 5px;"></div>
      </div>
  </div>
</div>

Thanks!

#2

Does the HTML exist in the browser dev tools when you first load the page? Or does the HTML get created only when you zoom in/out?

#3

Yes, I can ispect the components correctly.

#4

Nothing seems incorrect in the templates you’ve provided. If the HTML exists, then the problem is likely not with the UI Framework itself. Try debugging the CSS properties that are applied to the hidden elements.

#5

Sorry, I did not get which are the properties and elements you are speaking about.

#6

By “hidden elements”, I mean the elements that are not being rendered—the ones that show up only when you zoom in or out. You mentioned that you are able to inspect them in the browser dev tools, so take a look at whatever CSS is applied to them to see if there are any issues there that may cause them to be hidden (e.g. display, height, width, visibility, etc.).