diff --git a/src/widget/edit-widget/edit-widget-color-control.js b/src/widget/edit-widget/edit-widget-color-control.js
index ada958f..6fd82f7 100644
--- a/src/widget/edit-widget/edit-widget-color-control.js
+++ b/src/widget/edit-widget/edit-widget-color-control.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React, { Component } from 'react';
-import { Form, OverlayTrigger, Tooltip, Button } from 'react-bootstrap';
+import { Form, OverlayTrigger, Tooltip, Button, Col } from 'react-bootstrap';
 import ColorPicker from './color-picker'
 import Icon from "../../common/icon";
 
@@ -77,8 +77,8 @@ class EditWidgetColorControl extends Component {
     let style = {
       backgroundColor: color,
       opacity: opacity,
-      width: '260px',
-      height: '40px'
+      width: '80px',
+      height: '40px',
     }
 
     let tooltipText = "Change color and opacity";
@@ -87,19 +87,23 @@ class EditWidgetColorControl extends Component {
     }
 
 
-    return <Form.Group>
-      <Form.Label>{this.props.label}</Form.Label>
+    return ( <Form.Row>
+      <Form.Group as={Col}>
+        <Form.Label>{this.props.label}</Form.Label>
+      </Form.Group>
 
-      <div className='section-buttons-group-right'>
-        <OverlayTrigger key={0} placement={'right'} overlay={<Tooltip id={`tooltip-${"color"}`}> {tooltipText} </Tooltip>} >
-        <Button key={2} style={style} onClick={this.openColorPicker.bind(this)}  >
-          <Icon icon="paint-brush"/>
-        </Button>
-        </OverlayTrigger>
-      </div>
-
-      <ColorPicker show={this.state.showColorPicker} onClose={(data) => this.closeEditModal(data)} widget={this.state.widget} controlId={this.props.controlId} disableOpacity={this.props.disableOpacity}/>
-    </Form.Group>;
+      <Form.Group as={Col}>
+        <div className='section-buttons-group-right'>
+          <OverlayTrigger key={0} placement={'right'} overlay={<Tooltip id={`tooltip-${"color"}`}> {tooltipText} </Tooltip>} >
+          <Button style={style} onClick={this.openColorPicker.bind(this)}  >
+            <Icon icon="paint-brush"/>
+          </Button>
+          </OverlayTrigger>
+        </div>
+        <ColorPicker show={this.state.showColorPicker} onClose={(data) => this.closeEditModal(data)} widget={this.state.widget} controlId={this.props.controlId} disableOpacity={this.props.disableOpacity}/>
+      </Form.Group>
+    </Form.Row>
+  );
   }
 }
 
diff --git a/src/widget/edit-widget/edit-widget-plot-colors-control.js b/src/widget/edit-widget/edit-widget-plot-colors-control.js
index 271cec2..fbef75c 100644
--- a/src/widget/edit-widget/edit-widget-plot-colors-control.js
+++ b/src/widget/edit-widget/edit-widget-plot-colors-control.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React, { Component } from 'react';
-import { OverlayTrigger, Tooltip , Button } from 'react-bootstrap';
+import { OverlayTrigger, Tooltip , Button, Form } from 'react-bootstrap';
 import ColorPicker from './color-picker'
 import Icon from "../../common/icon";
 import { scaleOrdinal } from "d3-scale";
diff --git a/src/widget/edit-widget/edit-widget.js b/src/widget/edit-widget/edit-widget.js
index e7792a8..6ceef7b 100644
--- a/src/widget/edit-widget/edit-widget.js
+++ b/src/widget/edit-widget/edit-widget.js
@@ -174,6 +174,7 @@ class EditWidgetDialog extends React.Component {
         onClose={(c) => this.onClose(c)}
         onReset={() => this.resetState()}
         valid={this.valid}
+        size={'sm'}
       >
         <Form encType='multipart/form-data'>
           { controls || '' }