Search code examples
javascriptvis.jsvis.js-network

How can I set the height ot the title in vis js?

I created a network graph within a modal. My problem is that if I want to put a long sentence into the title of the edge, the title is out of the modal and I can't see the full sentence. I'm trying to set the title's width with widthConstraint, but it just works only with labels. I'm also trying to set the modal's with, but it doesn't work also. How can I set the title's width?

demo

function drawNetwork() {
      var nodes = [
        {id: 1, label: 'node 1'},
        {id: 2, label: 'node 2'}
      ];

      var edges = [
        {from: 1, to: 2, title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."}
      ]

      var container = document.getElementById('network-container');

      var data = {
      nodes: nodes,
      edges: edges
    };
    var width = 550;
    var height = 400;
    var options = {
      width: width + 'px',
      height: height + 'px',
      nodes: {
        shape: 'dot'
      },
      edges: {
        smooth: false
      },
      physics: false,
      interaction: {
        dragNodes: true,// do not allow dragging nodes
        zoomView: false, // do not allow zooming
        dragView: true  // do not allow dragging
      },
      layout: {
              randomSeed:1,
              improvedLayout:true,
              hierarchical: {
                  enabled:true,
                  levelSeparation: 300,
                  nodeSpacing: 100,
                  treeSpacing: 10,
                  blockShifting: false,
                  edgeMinimization: true,
                  parentCentralization: true,
                  direction: 'LR',        // UD, DU, LR, RL
                  sortMethod: 'directed'   // hubsize, directed
                  }
          }
    };
    var network = new vis.Network(container, data, options);
  }
  
  $('#model4temp').on('shown.bs.modal', function() {
    drawNetwork();
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.css" rel="stylesheet" type="text/css" />
  
  <script src="https://code.jquery.com/jquery.min.js"></script>
  
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  
  <a href='#' data-toggle='modal' data-target='#model4temp'>Click here for network in modal</a>
  
  <div class="modal fade" id="model4temp" tabindex="-1" role="dialog" aria-labelledby="basicModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Sample Network in modal</h4>
      </div>
      <div class="modal-body">
      		<div id="network-container" style="height:400px;width:500px;"></div>        	
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Solution

  • The nice thing is, labels allow html and css inside them. Here's your snippet, modified in only one aspect: instead of

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    I put a wrapped version into the label:

    <div style='white-space: normal;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

    For some (rather understandable) reason, label initially has something like white-space: nowrap and changing it back to normal fixes the issue:

    function drawNetwork() {
      var nodes = [
        {id: 1, label: 'node 1'},
        {id: 2, label: 'node 2'}
      ];

      var edges = [
        {from: 1, to: 2, title: "<div style='white-space: normal; max-width: 15em;'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>"}
      ]

      var container = document.getElementById('network-container');

      var data = {
      nodes: nodes,
      edges: edges
    };
    var width = 550;
    var height = 400;
    var options = {
      width: width + 'px',
      height: height + 'px',
      nodes: {
        shape: 'dot'
      },
      edges: {
        smooth: false
      },
      physics: false,
      interaction: {
        dragNodes: true,// do not allow dragging nodes
        zoomView: false, // do not allow zooming
        dragView: true  // do not allow dragging
      },
      layout: {
              randomSeed:1,
              improvedLayout:true,
              hierarchical: {
                  enabled:true,
                  levelSeparation: 300,
                  nodeSpacing: 100,
                  treeSpacing: 10,
                  blockShifting: false,
                  edgeMinimization: true,
                  parentCentralization: true,
                  direction: 'LR',        // UD, DU, LR, RL
                  sortMethod: 'directed'   // hubsize, directed
                  }
          }
    };
    var network = new vis.Network(container, data, options);
  }
  
  $('#model4temp').on('shown.bs.modal', function() {
    drawNetwork();
  });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.css" rel="stylesheet" type="text/css" />
  
  <script src="https://code.jquery.com/jquery.min.js"></script>
  
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  
  <a href='#' data-toggle='modal' data-target='#model4temp'>Click here for network in modal</a>
  
  <div class="modal fade" id="model4temp" tabindex="-1" role="dialog" aria-labelledby="basicModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Sample Network in modal</h4>
      </div>
      <div class="modal-body">
      		<div id="network-container" style="height:400px;width:500px;"></div>        	
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

    PS this still doesn't work always as desired: depends on where the edge was hovered. Not sure why they made it work this way, but perhaps dealing with the container and its margins can fix the issue..