diff --git a/build/plotcss.js b/build/plotcss.js index d7697da8f75..fd635c98f7d 100644 --- a/build/plotcss.js +++ b/build/plotcss.js @@ -31,7 +31,7 @@ var rules = { "X .cursor-n-resize": "cursor:n-resize;", "X .cursor-ne-resize": "cursor:ne-resize;", "X .cursor-grab": "cursor:-webkit-grab;cursor:grab;", - "X .modebar": "position:absolute;top:2px;right:2px;z-index:1001;", + "X .modebar": "position:absolute;top:2px;right:2px;", "X .ease-bg": "-webkit-transition:background-color 0.3s ease 0s;-moz-transition:background-color 0.3s ease 0s;-ms-transition:background-color 0.3s ease 0s;-o-transition:background-color 0.3s ease 0s;transition:background-color 0.3s ease 0s;", "X .modebar--hover>:not(.watermark)": "opacity:0;-webkit-transition:opacity 0.3s ease 0s;-moz-transition:opacity 0.3s ease 0s;-ms-transition:opacity 0.3s ease 0s;-o-transition:opacity 0.3s ease 0s;transition:opacity 0.3s ease 0s;", "X:hover .modebar--hover .modebar-group": "opacity:1;", diff --git a/src/css/_modebar.scss b/src/css/_modebar.scss index 78af40d29c5..b9c7f797a2c 100644 --- a/src/css/_modebar.scss +++ b/src/css/_modebar.scss @@ -2,7 +2,6 @@ position: absolute; top: 2px; right: 2px; - z-index: 1001; } .ease-bg { diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js index c8e440b32fc..d20b0f827ed 100644 --- a/src/plot_api/plot_api.js +++ b/src/plot_api/plot_api.js @@ -3805,6 +3805,11 @@ function makePlotFramework(gd) { fullLayout._toppaper = fullLayout._paperdiv.append('svg') .classed('main-svg', true); + fullLayout._modebardiv = fullLayout._paperdiv.append('div'); + + fullLayout._hoverpaper = fullLayout._paperdiv.append('svg') + .classed('main-svg', true); + if(!fullLayout._uid) { var otherUids = {}; d3.selectAll('defs').each(function() { @@ -3881,11 +3886,10 @@ function makePlotFramework(gd) { fullLayout._infolayer = fullLayout._toppaper.append('g').classed('infolayer', true); fullLayout._menulayer = fullLayout._toppaper.append('g').classed('menulayer', true); fullLayout._zoomlayer = fullLayout._toppaper.append('g').classed('zoomlayer', true); - fullLayout._hoverlayer = fullLayout._toppaper.append('g').classed('hoverlayer', true); + fullLayout._hoverlayer = fullLayout._hoverpaper.append('g').classed('hoverlayer', true); // Make the modebar container - fullLayout._modebardiv = fullLayout._paperdiv.selectAll('.modebar-container').data([0]); - fullLayout._modebardiv.enter().append('div') + fullLayout._modebardiv .classed('modebar-container', true) .style('position', 'absolute') .style('top', '0px') diff --git a/test/jasmine/tests/plots_test.js b/test/jasmine/tests/plots_test.js index 367e077b482..7a7b11960eb 100644 --- a/test/jasmine/tests/plots_test.js +++ b/test/jasmine/tests/plots_test.js @@ -329,7 +329,7 @@ describe('Test Plots', function() { it('should resize the main svgs', function() { var mainSvgs = document.getElementsByClassName('main-svg'); - expect(mainSvgs.length).toBe(2); + expect(mainSvgs.length).toBe(3); for(var i = 0; i < mainSvgs.length; i++) { var svg = mainSvgs[i]; @@ -343,7 +343,7 @@ describe('Test Plots', function() { it('should update the axis scales', function() { var mainSvgs = document.getElementsByClassName('main-svg'); - expect(mainSvgs.length).toBe(2); + expect(mainSvgs.length).toBe(3); var fullLayout = gd._fullLayout; var plotinfo = fullLayout._plots.xy; @@ -357,7 +357,7 @@ describe('Test Plots', function() { it('should allow resizing by plot ID', function(done) { var mainSvgs = document.getElementsByClassName('main-svg'); - expect(mainSvgs.length).toBe(2); + expect(mainSvgs.length).toBe(3); expect(typeof gd.id).toBe('string'); expect(gd.id).toBeTruthy();