Embedding viz in plugin but size is tiny

[kevclarx (Kevin Clark)]

Running kibana 6.3.1 I have created a plugin however when I embed a visualization it shows up super tiny. If I click the scrollbar then it expands to fit the width of the page however the height appears to be a single line across.

I am applying a flex layout in the css however that doesn't appear to be helping. Looking for any ideas, I assume it has to do with the fact that when the react component is rendered initially the container is empty so has no height but I cannot seem to force it to fill the space after it rerenders.

I am loading the visualization with loader.embedVisualizationWithSavedObject method inside a react component.

CSS example:
.metrics-dashboard, visualize, visualization, EuiPageContentBody {
display: flex;
flex-wrap: wrap;
flex: 1 1 auto;
}

Display:

[bhavyarm]

@timroes/@markov00 can you please provide some inputs here?

Thanks,
Bhavya

[timroes]

Hi Kevin,

the visualization should take exactly the size it's getting. Could you please make sure using the browser dev tools, that the div you importing that into, has the dimension you want BEFORE calling the API to embed it, i.e. remove the embedding call altogether and check what size the container would have that way. Is this container actually larger, than the size we are drawing in?

Cheers,
Tim

[kevclarx (Kevin Clark)]

Thanks Tim,

I tried making sure the div had the right size beforehand by setting a dashed border and it looked like it was more than large enough, but if I set flex on the visualization/visualize in CSS it still only took up the top line as in the previous image.

If I use block display on those elements I can get the visualization to appear, I just lose the responsive design which is ok for now. For some reason my timerange of 90 days is not displaying properly so I will need to investigate that next.

With block: