I am using Bootstrap3 and trying to make use of the jsPlumb library (https://jsplumbtoolkit.com/). In my bootstrap layout I have a navbar, then the main content goes into a container-fluid div.
The issue is, as per the bootstrap documentation, to ensure the content of the container-fluid isn't hidden under the nav bar, I need to add padding to push the content down below the nav bar. This works fine, except its having a negative impact on where the endpoint is position on the div by jsplumb.
Below is my HTML
<div class="navbar-wrapper" style="z-index: 4000;">
<div class="container" style="z-index: 4000;">
<nav class="navbar-md navbar-inverse navbar-static-top navbar-fixed-top" style="z-index: 4000;">
<div class="container" style="z-index: 4000;">
<div class="navbar-header" style="z-index: 4000;">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a style="padding-top: 0px; padding-bottom: 0px; margin-top: 5px;" class="navbar-brand" href="#">
<img style="height: 90px;" src="/images/logo.png" alt="logo" />
</a>
</div>
<div id="navbar" class="navbar-collapse collapse" style="z-index: 4000;">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-9 content">
<div id="canvas">
<div id="start-block" class="flow-block">
<p class="title">Start Block</p>
<p id="mainContent"></p>
</div>
</div>
</div>
<div class="col-md-3 col-md-offset-9 sidebar">
<p>Sidebar Content</p>
</div>
</div>
</div>
If I remove the padding the endpoint is position correctly, except the start-block div is off the screen under the navbar.
Screenshot of what I am seeing is below:
Managed to figure the problem out, I guess bootstrap makes objects act differently to the default (I tested the library first on a blank HTML/Jquery page - no bootstrap).
I added the position relative to the canvas parent and the flow-block class I added position absolute and that seems to have resolved the issue I was seeing.