0

i've a problem that drives me crazy. I want to get started with jsPlumb. So i just copied their demo draggableConnectors and add a little bootstrap navbar. If i use navbar-fixed-top <- with no padding all works well except i can drag my elments behind my navbar without a scrollbar... So i changed that to navbar-static-top, now a padding is applied through bootstrap. My anchors and endpoints get drawn away from the example divs. And the anchors get drawn away exact the same height as navbar. But i want to use the bootstrap grid system and all padding left or right is applied to the anchors/endpoints, so if i add a col-lg-2 left to the elements all anchors/endpoints get drawn col-lg-2 far away from elements. The crazy thing is if i grab some element and move it, it jumps to its anchors far away from my cursor.... any ideas? I work on this problem for hours.

Bootstrap Navbar:

<nav class="navbar navbar-default navbar-static-top"></nav>

Css:

.scrollbars{
      height: 80vh;
      position: relative;
      overflow: scroll !important;
    }


 .drag-drop-demo .window {
    ....        
    position: absolute;
    ....
  }

Here is an example of the bug: https://jsfiddle.net/f5bxgzLu/ I can't get rid of this error, could u provide me some help?

lkaupp
  • 551
  • 1
  • 6
  • 17

1 Answers1

0

Try to trap the .navbar within a div with position: relative and give the navbar position:absolute

https://jsfiddle.net/nitincool4urchat/f5bxgzLu/27/

HTML

<div class='bar-container'>
<nav class="navbar navbar-default"></nav>
</div>

CSS

.bar-container{
    position: relative;
}
.navbar{
    position: absolute;
}

References:

Bootstrap fixed navbar inside div

Community
  • 1
  • 1
coding_idiot
  • 13,526
  • 10
  • 65
  • 116