I'm trying to create a dashboard widget using the new Craft charting library. I'm more or less copying the New Users widget however I'm running into an issue where my container does not seem to be behaving in the same way as the New User widget - it appears the container is getting a different width and no height.
NewUsersWidget.js I am using these three lines of code to set the container:
this.$widget = $('#widget'+widgetId); this.$body = this.$widget.find('.body:first'); this.$chartContainer = $('<div class="chart hidden"></div>').appendTo(this.$body);
However, when I inspect
this.$chartContainer in the
NewUsersWidget.js it has a width and height whereas when I inspect
this.$chartContainer in my own widget, the width is different and the height is not present. I don't see these values set explicitly in the New Users widget. It appears they may be set dynamically in
Understandably, someone helping troubleshoot this may need more context. I'm really not sure what more I should be sharing, so let me know if I can provide additional details to help narrow down what may be happening.
A more general question may be, how does width and height get set when creating a variable (
this.$chartContainer) in an object that extends
Garnish.Base? Why would two different widgets creating the same variable both end up with a different height and width?