fix(size): Correct height increase during resize (#223)

* fix(size): Correct height increase during resize Removed setting 'max-height' property and set <svg> as block element. Fix #155, Fix #164 Close #223
naver · Dec 14, 2017 · 9699a55 · 9699a55
1 parent 9f2eb7e
commit 9699a55
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 7 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -5,7 +5,7 @@ dist: trusty # needs Ubuntu Trusty
 sudo: false  # no need for virtualization.
 before_install:
   - npm install -g npm@5
-  - yarn global add greenkeeper-lockfile@1
+  - npm install -g greenkeeper-lockfile@1
 install:
   - npm install
 addons:

diff --git a/spec/bb-spec.js b/spec/bb-spec.js
@@ -4,6 +4,7 @@
  */
 /* eslint-disable */
 import {bb} from "../src/core";
+import util from "./assets/util";
 
 describe("Interface & initialization", () => {
 	it("Check for billboard.js object", () => {
@@ -13,7 +14,7 @@ describe("Interface & initialization", () => {
 	});
 
 	it("Check for initialization", () => {
-		const chart = bb.generate({
+		const chart = util.generate({
 			data: {
 				columns: [
 					["data1", 30]
@@ -29,7 +30,7 @@ describe("Interface & initialization", () => {
 	it("should resize correctly in flex container", done => {
 		// set flex container
 		document.body.innerHTML = '<div style="display:flex"><div style="display:block;flex-basis:0;flex-grow:1;flex-shrink:1"><div id="flex-container"></div></div></div>';
-		const chart = bb.generate({
+		const chart = util.generate({
 			bindto: "#flex-container",
 			data: {
 				columns: [
@@ -55,6 +56,34 @@ describe("Interface & initialization", () => {
 		}, 100);
 	});
 
+	it("height shouldn't be increased on resize event", done => {
+		const body = document.body;
+		body.innerHTML = '<div id="chartResize"></div>';
+
+		const chart = bb.generate({
+			bindto: "#chartResize",
+			data: {
+				columns: [
+					["data1", 30, 200, 100, 400],
+					["data2", 500, 800, 500, 2000]
+				]
+			}
+		});
+		const chartHeight = +chart.internal.svg.attr("height");
+
+		body.style.width = `${+body.style.width.replace("px", "") - 100}px`;
+		chart.internal.resizeFunction();
+
+		setTimeout(() => {
+			expect(+chart.internal.svg.attr("height")).to.be.equal(chartHeight);
+
+			// reset the body
+			body.removeAttribute("style");
+			body.innerHTML = "";
+			done();
+		}, 500);
+	});
+
 	it("instantiate with different classname on wrapper element", () => {
 		const bindtoClassName = "billboard-js";
 		const chart = bb.generate({

diff --git a/src/internals/ChartInternal.js b/src/internals/ChartInternal.js
@@ -242,7 +242,8 @@ export default class ChartInternal {
 		// -- Basic Elements --
 
 		$$.svg = $$.selectChart.append("svg")
-			.style("overflow", "hidden");
+			.style("overflow", "hidden")
+			.style("display", "block");
 
 		if (config.interaction_enabled && $$.inputType) {
 			const isTouch = $$.inputType === "touch";
@@ -1036,9 +1037,6 @@ export default class ChartInternal {
 			.attr("width", $$.width)
 			.attr("height", $$.height);
 
-		// MEMO: parent div"s height will be bigger than svg when <!DOCTYPE html>
-		$$.selectChart.style("max-height", `${$$.currentHeight}px`);
-
 		$$.brush && $$.brush.scale($$.subX, brushHeight);
 	}