Hi,
Which is your use case, why do you need to retrieve height and width ?
In non-responsive form components are wrapped within a div which automatically gets the proper posizion/size depending on the Layout settings of the element.
Most of the time would be enough to style properly your component so that will use 100% of height and width of it's container: (width:100%, height:100%).
Each webcomponents in non responsive form supports the API elements.yourComponent.setSize(x,y);
You will see a warning in the code editor but this API is available for all components since operate with the container of the component, not with the component itself.
In rare occasion you may need to know the exact width and height; for example if your webcomponent contains a canvas, a chart or similar.
In this case you can retrieve the exact width/height from it's parent wrapper.
You may want to listen for changes in the window size to recalculate the height width.
- Code: Select all
function resize() {
if ($element.parent().hasClass('svy-wrapper')) { // if doesn't have a .svy-wrapper class you are not in an anchored form.
var height = $element.parent().height();
var width = $element.parent().width();
// do something with width and height
}
}
// width/height changes when the window is resized.
$(window).on('resize', resizeButton);
// remove the resize listener when the component is destroyed
$scope.$on("$destroy", function() {
$(window).off('resize', resize);
});
Regards,
Paolo