diff --git a/canvas_modules/common-canvas/__tests__/common-properties/common-properties-test.js b/canvas_modules/common-canvas/__tests__/common-properties/common-properties-test.js
index 08f511e33f..2b9134fcfe 100644
--- a/canvas_modules/common-canvas/__tests__/common-properties/common-properties-test.js
+++ b/canvas_modules/common-canvas/__tests__/common-properties/common-properties-test.js
@@ -338,17 +338,14 @@ describe("CommonProperties works correctly in flyout", () => {
 		wrapper = renderedObject.wrapper;
 		const resizeBtn = wrapper.find("button.properties-btn-resize");
 		expect(resizeBtn).to.have.length(1);
-		expect(wrapper.find("aside.properties-small")).to.have.length(1);
-		expect(wrapper.find("aside.properties-medium")).to.have.length(0);
-		expect(wrapper.find("aside.properties-small").get(0).props.style).to.have.property("width", "400px");
+		expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
+		expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "400px");
 		resizeBtn.simulate("click");
-		expect(wrapper.find("aside.properties-small")).to.have.length(0);
-		expect(wrapper.find("aside.properties-medium")).to.have.length(1);
-		expect(wrapper.find("aside.properties-medium").get(0).props.style).to.have.property("width", "800px");
+		expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
+		expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "800px");
 		resizeBtn.simulate("click");
-		expect(wrapper.find("aside.properties-small")).to.have.length(1);
-		expect(wrapper.find("aside.properties-medium")).to.have.length(0);
-		expect(wrapper.find("aside.properties-small").get(0).props.style).to.have.property("width", "400px");
+		expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
+		expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "400px");
 	});
 
 	it("When enableResize=true and editor_size=medium and pixel_width min and max are set resize button should be rendered", () => {
@@ -359,17 +356,14 @@ describe("CommonProperties works correctly in flyout", () => {
 		wrapper = renderedObject.wrapper;
 		const resizeBtn = wrapper.find("button.properties-btn-resize");
 		expect(resizeBtn).to.have.length(1);
-		expect(wrapper.find("aside.properties-medium")).to.have.length(1);
-		expect(wrapper.find("aside.properties-large")).to.have.length(0);
-		expect(wrapper.find("aside.properties-medium").get(0).props.style).to.have.property("width", "400px");
+		expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
+		expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "400px");
 		resizeBtn.simulate("click");
-		expect(wrapper.find("aside.properties-medium")).to.have.length(0);
-		expect(wrapper.find("aside.properties-large")).to.have.length(1);
-		expect(wrapper.find("aside.properties-large").get(0).props.style).to.have.property("width", "800px");
+		expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
+		expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "800px");
 		resizeBtn.simulate("click");
-		expect(wrapper.find("aside.properties-medium")).to.have.length(1);
-		expect(wrapper.find("aside.properties-large")).to.have.length(0);
-		expect(wrapper.find("aside.properties-medium").get(0).props.style).to.have.property("width", "400px");
+		expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
+		expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "400px");
 	});
 
 	it("When enableResize=true and editor_size=large and pixel_width min and max are set resize button should be rendered", () => {
@@ -380,17 +374,14 @@ describe("CommonProperties works correctly in flyout", () => {
 		wrapper = renderedObject.wrapper;
 		const resizeBtn = wrapper.find("button.properties-btn-resize");
 		expect(resizeBtn).to.have.length(1);
-		expect(wrapper.find("aside.properties-large")).to.have.length(1);
-		expect(wrapper.find("aside.properties-max")).to.have.length(0);
-		expect(wrapper.find("aside.properties-large").get(0).props.style).to.have.property("width", "400px");
+		expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
+		expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "400px");
 		resizeBtn.simulate("click");
-		expect(wrapper.find("aside.properties-large")).to.have.length(0);
-		expect(wrapper.find("aside.properties-max")).to.have.length(1);
-		expect(wrapper.find("aside.properties-max").get(0).props.style).to.have.property("width", "800px");
+		expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
+		expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "800px");
 		resizeBtn.simulate("click");
-		expect(wrapper.find("aside.properties-large")).to.have.length(1);
-		expect(wrapper.find("aside.properties-max")).to.have.length(0);
-		expect(wrapper.find("aside.properties-large").get(0).props.style).to.have.property("width", "400px");
+		expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
+		expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "400px");
 	});
 
 	it("When enableResize=true and editor_size=small and pixel_width min and max are the same the resize button should not be rendered", () => {
@@ -401,8 +392,8 @@ describe("CommonProperties works correctly in flyout", () => {
 		wrapper = renderedObject.wrapper;
 		const resizeBtn = wrapper.find("button.properties-btn-resize");
 		expect(resizeBtn).to.have.length(0);
-		expect(wrapper.find("aside.properties-small")).to.have.length(1);
-		expect(wrapper.find("aside.properties-small").get(0).props.style).to.have.property("width", "800px");
+		expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
+		expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "800px");
 	});
 
 	it("When enableResize=true and editor_size=medium and pixel_width min and max are the same the resize button should not be rendered", () => {
@@ -413,8 +404,8 @@ describe("CommonProperties works correctly in flyout", () => {
 		wrapper = renderedObject.wrapper;
 		const resizeBtn = wrapper.find("button.properties-btn-resize");
 		expect(resizeBtn).to.have.length(0);
-		expect(wrapper.find("aside.properties-medium")).to.have.length(1);
-		expect(wrapper.find("aside.properties-medium").get(0).props.style).to.have.property("width", "800px");
+		expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
+		expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "800px");
 	});
 
 	it("When enableResize=true and editor_size=large and pixel_width min and max are the same the resize button should not be rendered", () => {
@@ -425,8 +416,8 @@ describe("CommonProperties works correctly in flyout", () => {
 		wrapper = renderedObject.wrapper;
 		const resizeBtn = wrapper.find("button.properties-btn-resize");
 		expect(resizeBtn).to.have.length(0);
-		expect(wrapper.find("aside.properties-large")).to.have.length(1);
-		expect(wrapper.find("aside.properties-large").get(0).props.style).to.have.property("width", "800px");
+		expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
+		expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "800px");
 	});
 
 	it("When enableResize=true and editor_size=max and pixel_width is ommited the resize button should not be rendered", () => {
@@ -447,8 +438,8 @@ describe("CommonProperties works correctly in flyout", () => {
 		wrapper = renderedObject.wrapper;
 		const resizeBtn = wrapper.find("button.properties-btn-resize");
 		expect(resizeBtn).to.have.length(0);
-		expect(wrapper.find("aside.properties-max")).to.have.length(1);
-		expect(wrapper.find("aside.properties-max").get(0).props.style).to.have.property("width", "1000px");
+		expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
+		expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "1000px");
 	});
 
 	it("When enableResize=true and editor_size is omitted and pixel_width min and max are the same the resize button should not be rendered", () => {
@@ -458,8 +449,8 @@ describe("CommonProperties works correctly in flyout", () => {
 		wrapper = renderedObject.wrapper;
 		const resizeBtn = wrapper.find("button.properties-btn-resize");
 		expect(resizeBtn).to.have.length(0);
-		expect(wrapper.find("aside.properties-small")).to.have.length(1);
-		expect(wrapper.find("aside.properties-small").get(0).props.style).to.have.property("width", "800px");
+		expect(wrapper.find("aside.properties-custom-size")).to.have.length(1);
+		expect(wrapper.find("aside.properties-custom-size").get(0).props.style).to.have.property("width", "800px");
 	});
 
 	it("When no groups or parameters are defined the flyout should still render", () => {
diff --git a/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx b/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx
index 3e6289dc7b..c77de8ab45 100644
--- a/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx
+++ b/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx
@@ -570,18 +570,24 @@ class PropertiesMain extends React.Component {
 					{editorForm}
 				</PropertiesModal>);
 			}
+
+			let propertiesSizeClassname = `properties-${this.state.editorSize}`;
+
+			const overrideSize = this._getOverrideSize();
+			let overrideStyle = null;
+			if (overrideSize !== null) {
+				// Add custom classname when custom editor size is set
+				propertiesSizeClassname = "properties-custom-size";
+				overrideStyle = { width: overrideSize + "px" };
+			}
+
 			const className = classNames("properties-wrapper",
 				{
 					"properties-right-flyout": this.props.propertiesConfig.rightFlyout,
 					"properties-light-enabled": this.props.light,
 					"properties-light-disabled": !this.props.light
 				},
-				`properties-${this.state.editorSize}`);
-			const overrideSize = this._getOverrideSize();
-			let overrideStyle = null;
-			if (overrideSize !== null) {
-				overrideStyle = { width: overrideSize + "px" };
-			}
+				propertiesSizeClassname);
 			return (
 				<Provider store={this.propertiesController.getStore()}>
 					<aside