Black Lives Matter. Please consider donating to Black Girls Code today.

Moderbar/Toolbar Positioning Bug

Hello, the community of Plotly have a very nice day I have to deal with this problem or bug, maybe bad code practices anyway, I’m trying to embed Plotly code into a bootstrap tab panel but I got success but with bug at the modebar, is no solution for me hide the bar since is one of the features that I most use here is a screenshot: http://prntscr.com/l4vqia

Bootstrap Code:

          <div class="chart tab-pane active" id="myDiv" style=" width: 870; height: 870px;"></div>
          <div class="chart tab-pane" id="myDiv" style=" width: 870; height: 870px;"></div>
        </div>
      </div>
      <!-- Sales-->

Plotly.js:

var trace1 = {

x: [1, 2, 3],
y: [40, 50, 60],
name: ‘yaxis data’,
type: ‘scatter’
};

var trace2 = {
x: [2, 3, 4],
y: [4, 5, 6],
name: ‘yaxis2 data’,
yaxis: ‘y2’,
type: ‘scatter’
};

var data = [trace1, trace2];

var layout = {
title: ‘Double Y Axis Example’,
yaxis: {title: ‘yaxis title’},
yaxis2: {
title: ‘yaxis2 title’,
titlefont: {color: ‘rgb(148, 103, 189)’},
tickfont: {color: ‘rgb(148, 103, 189)’},
overlaying: ‘y’,
side: ‘right’
}
};

Plotly.newPlot(‘myDiv’, data, layout, {displayModeBar: true});