https://www.gooddata.com/ logo
Join Slack
Powered by
Any tips on setting the height of an Angular wrapp...
# gooddata-ui
v
Any tips on setting the height of an Angular wrapped 
<InsightView />
component? It seems like it's ignoring the parent container height.
See this inspection:
Any way to force it to take up the parent container's size? As described here: https://sdk.gooddata.com/gooddata-ui/docs/start_with_visual_components.html#responsive-ui
I've logged that the parent component's height is 1000px before rendering...
@hunger regnuh ^^
m
Hello @Vincil Bishop, I’m not sure about your particular wrapper implementation, but I would try to wrap InsightView in another React div element with parent container height propagated via some prop. Does it make sense? Or could you share the code of the wrapper? 🙂
v
Thanks for looking at the issue... I will try the react tip... here is the code I have
gd-insight.component.tsgd-insight.component.html
m
@Vincil Bishop Thanks for the code. Did you tried to set the height explicitly in the html template binding?
Copy code
<div #placeHolder [id]="rootDomID" [style.height]="height"></div>
(Where is this 
style: 1000px
coming from?)
v
let me try that... I have tried something similar
adding this: 
<div #placeHolder [id]="rootDomID" [style.height]="height"></div>
With 
height = '1000px'
in the component. yields this:
I am able to adjust the size of the component by overriding the css from the GoodData.UI library:
Copy code
.insight-view-visualization {
  height: 1000px;
}
And setting 
ViewEncapsulation.None
in the angular component wrapper.
h
think if you set that to 100%, and set the outer div’s width/height you’ll get more flexibility
v
Now I just need to figure out how to make that dynamic so the consumer of the component wrapper can set the height
@hunger regnuh it's at 100% from the .css, that's what I am overriding 🙂
h
hmmmm then 100% is the way to go, something is wrong w/ the outer container
v
.insight-view-container
I think somehow blocks it
or causes it to think it's 400px high
h
it’s the outer container, think what’s happening is when the component is initially rendered, it’s 400px, i can take a look, commit your code
v
it's committed
I log the height of the container that we have control over... it reports it's 1000px high
look at that image above
in the top right red square
.insight-view-container
is 400px high... with no explanation of where it gets set from
the component under it, the child... has a class of 
.insight-view-visualization
with height set at 100%
Might not be the best way to get this done, but this seems to be able to set the height of the component after render:
Copy code
const childView: HTMLElement = this.spanEl.nativeElement.querySelector('.insight-view-container')
    childView.style.height = '1000px';
m
@Vincil Bishop Maybe the insight starts to render before the binding is done? Another thing you could try is to hardcode the height in the template, if it’s possible solution for you.
v
When you say before the binding is done... what do you mean? If you look at the code example, the component is rendered as a result of the 
afterViewInit()
lifecycle hook, according to these instructions: https://sdk.gooddata.com/gooddata-ui/docs/ht_use_react_component_in_angular_2.x.html
Open in Slack
PreviousNext
Powered by