I got the following problem: I use a bootstrap modal (which has 900px width) to display a goJS canvas. The modal is 900px wide. However, the canvas does not fill up the modal even though I set the width of the canvas root element to 100%:
The canvas that is generated is a little smaller…
…which results in a white bar on the right side of the modal:
Setting the value of the canvas to 900px after it is drawn results in a subtle horizontal stretch, which is not a solution.
Setting the value of the wrapping DIV (#goJSCanvas) to 917 (17px more because thats the width of the white gap) result in an overflow of 17px to the right side of the modal. The canvas then has the perfect width, but the white gap overflows.
I am almost certain that it has to do with a scrollbar but I did not manage to solve this issue yet.
Basically, I want the white space to go away by extending the canvas without stretching it.
Correct, that is a scrollbar, which indicates that your diagram bounds are larger than your viewport. There are a few ways to deal with this depending on what you want.
Set the Diagram.autoScale to go.Diagram.Uniform
Set Diagram.scrollMode to go.Diagram.InfiniteScroll
Set Diagram.hasHorizontalScrollbar, Diagram.hasVerticalScrollbar, Diagram.allowHorizontalScroll, Diagram.allowVerticalScroll depending on what you want
Also, please understand that the contents of the HTML Div element that you provide as a host for the Diagram are entirely controlled by the GoJS software. If you modify any of the elements, either programmatically or via CSS, including any HTML Canvas element that you might find within the Div, you are likely to produce bugs. At least, from our point of view, the behavior will be undefined.
