Possible q-layout chrome height weirdness

[Sfinx]

Hi,

I’m trying to display the dynamic graph SVG at the q-layout “layout-view” div. But in latest stable chrome the div height is always 150px (+2x2px margin). The firefox displaying the SVG to the full div height. What can be the problem ? I’ve tried to set the style to the following without success :

…
svg { width: 100%; height: 100%; }
#my-graph { width: 100%; height: 100%; }
…

template is:

…
<div id=“my-graph” class=“layout-view”>
</div>
…

The same page with
…
let container = document.getElementById(‘my-graph’)
logger.debug('graph loaded, w: ’ + container.clientWidth + ', h: ’ + container.clientHeight)
…

Displaying ‘graph loaded, w: 1894, h: 154’ in chrome and ‘graph loaded, w: 1907, h: 828’ in firefox. Latest quasar is used.

TIA, Rus
…

[rstoenescu]

Hi,

First please confirm it’s not this: http://quasar-framework.org/guide/app-troubleshoot-and-tips.html#Google-Chrome-shows-scrollbars

[Sfinx]

Hi,

No scrollbars shown and I’ve rechecked with all extension disabled - the bug still present. Moreover: trying to reneder cytoscapejs in this div leads to heigh = 0 and non-working graph render. So I’ve made the small workaround for now:

…
<div id=“graph-content” class=“layout-view”>
<div id=“my-graph”>
</div>
</div>
…
let container = document.getElementById(‘my-graph’)
let parent = document.getElementById(‘graph-content’)
container.style.height = parent.clientHeight + ‘px’
…

Now all is working in both FF and Chrome

[rstoenescu]

You should put graph-content inside layout-view. You page content should always be inside a layout-view div.

[Sfinx]

Sure I’ve did this - no matter how it is named. In my above example the div “my-graph” is inside the “layout-view” div but it has zero height in chrome and normal height in FF. Just try to run this stupid example in chrome. This weird behave/bug can be easily checked when a) using chrome b) trying to figure out the embedded div height inside layout-view div

[Sfinx]

To be more exact: in Chrome if the layout-view div is empty (no divs inside) - it has zero height. If it is includes some divs then all them are zero height

[rstoenescu]

Your specific case needs CSS investigation. It might be the case of a bug in cytoscapejs dealing with flexbox and setting height. There are lots of quirks on that. A live example would be useful, but trying to remain sane as I develop v0.14 and answering a million questions

Not sure what you mean by your last statement (“If it is includes some divs then all them are zero height”). It would mean Quasar Play for example shouldn’t work. Maybe I didn’t understand your issue.