topology parent container dimensions

[jawalke2]

Hi there,

I keep getting a console warning 'Please set height*width to topology's parent container'; my code is based on the dynamic topology example in the example github repo that's been posted on here.

I've set CSS height & width for the parent element that I'm passing in through app.container() but that doesn't appear to address this - can someone suggest what I need to do to fix this?

Thanks,

James

[alzverev]

Hi James,

You seem to be using an adaptive layout, which means that you want topology's container (for example <div class="next-app"></div>) to fit in parent container. It seems like NeXt can only deal with explicitly defined width and height of the parent container. I might advise you to set the dimensions manually.

Also, would be nice if you share your code so that I could inspect it and tell you how to address that

- Alex

[jawalke2]

so I have a bootstrap app, i define a container div:

<div id="next-app-container"></div>

I have some CSS:

#next-app-container {

  display: block ;

  height: 500px;

  width: 700px;

}

and my javascript in onload() includes:

var app = new nx.ui.Application();

  /* TopologyContainer is a nx.ui.Component object that can contain much more things than just a nx.graphic.Topology object.

  We can 'inject' a topology instance inside and interact with it easily

  */

  var topologyContainer = new TopologyContainer();

  // topology instance was made in TopologyContainer, but we can invoke its members through 'topology' variable for convenience

  var topology = topologyContainer.topology();

  var actionBar = new ActionBar();

  //assign the app to the <div>

  var parent = document.getElementById('next-app-container') ;

  app.container(parent);

  // pass topology's instance into action's bar instance

  actionBar.assignTopology(topology);

  actionBar.attach(app);

  topology.attach(app);

pretty much lifted directly form some of the code examples for dynamic topology & custom tooltips...

when you say ' I might advise you to set the dimensions manually' I assume you mean via CSS as I have tried?!

Thanks for your response,

James

[lkang2]

In the next-modules/topology.js, you manually set the width/height of the topology, so the 'adaptive' property should be false.

[jawalke2]

Thanks; this fixed the warnings.