I use angular -1.5.8, d3-3.5.17, nvd3-1.8.5 and angular -nvd3-1.0.9 with Angular stuff. I am trying to put the NVD3 directive in $mdDialog . The source code is simple:
<md-dialog aria-label="FooBar"> <md-toolbar> <div class="md-toolbar-tools"> <h2>FooBar/h2> <span flex></span> <md-button class="md-icon-button" ng-click="dialog.close()"> <md-icon>close</md-icon> </md-button> </div> </md-toolbar> <md-dialog-content> <nvd3 options="dialog.options" data="dialog.data"></nvd3> </md-dialog-content> <md-dialog-actions> <md-button ng-click="dialog.close()"> Close </md-button> </md-dialog-actions> </md-dialog>
I am using $mdDialog.show() with fullscreen: true . As you know, even with fullscreen: true , the dialog opens only in full-screen mode if the browser windows are small enough.
Anyway, I am having numerous problems with a chart like scatterChart . Here are a few great ones:
- A scatter chart with 16 dots appears really, very small! I do not want to hardcode the width / height. Is there a scaling option for NVD3 to say "show the double size you usually want"?
- If I make the browser (Chrome) small enough, mdDialog will suddenly appear in full screen! The NVD3 chart is dynamically expanding to fill the entire width! Pretty awesome! But the height of the chart remains the same. Now I have a wide chart with a tiny height; The close button mdDialog is located almost at the top of the screen with a huge space below it.
- If I manually set
<md-dialog-content style="min-width=500px;min-height=300px"> as an example, the same thing will happen: the NVD3 board expands horizontally to fill the width, but above the diagram is huge empty space above the close button.
How do I get an NVD3 diagram for pleasant playback using mdDialog and fill the entire content area of the dialog box?
source share