diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/_index.scss b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/_index.scss
index b219f59476ce9..fd074edf032fa 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/_index.scss
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/_index.scss
@@ -1,3 +1,4 @@
 @import './layer_panel';
 @import './filter_editor/filter_editor';
-@import './join_editor/resources/join';
\ No newline at end of file
+@import './join_editor/resources/join';
+@import './style_settings/style_settings';
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/_style_settings.scss b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/_style_settings.scss
new file mode 100644
index 0000000000000..c671368552440
--- /dev/null
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/_style_settings.scss
@@ -0,0 +1,3 @@
+.mapStyleSettings__fixedBox {
+    width: 120px;
+}
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/style_settings.js b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/style_settings.js
index 2857065f04c70..69cf51fb29c0d 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/style_settings.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/style_settings.js
@@ -21,7 +21,7 @@ export function StyleSettings({ layer, updateStyleDescriptor }) {
 
   return (
     <Fragment>
-      <EuiPanel>
+      <EuiPanel className="mapStyleSettings">
         <EuiFlexGroup>
           <EuiFlexItem>
             <EuiTitle size="xs">
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/_color_stops.scss b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/_color_stops.scss
index 001ca0685d0e9..519e97f4b30cd 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/_color_stops.scss
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/_color_stops.scss
@@ -1,6 +1,5 @@
 .mapColorStop {
   position: relative;
-  padding-right: $euiSizeXL + $euiSizeS;
 
   & + & {
     margin-top: $euiSizeS;
@@ -17,23 +16,3 @@
   }
 }
 
-.mapColorStop__icons {
-  flex-shrink: 0;
-  display: none;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  margin-right: -$euiSizeS;
-  margin-top: -$euiSizeM;
-}
-
-@keyframes mapColorStopBecomeVisible {
-
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
index e8d5754ef4206..f71bd52210cd7 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
@@ -6,10 +6,11 @@
 
 import React, { Component, Fragment } from 'react';
 
-import { EuiSuperSelect, EuiSpacer } from '@elastic/eui';
+import { EuiSpacer, EuiSelect, EuiSuperSelect, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { ColorStopsOrdinal } from './color_stops_ordinal';
 import { COLOR_MAP_TYPE } from '../../../../../../common/constants';
 import { ColorStopsCategorical } from './color_stops_categorical';
+import { i18n } from '@kbn/i18n';
 
 const CUSTOM_COLOR_MAP = 'CUSTOM_COLOR_MAP';
 
@@ -27,6 +28,42 @@ export class ColorMapSelect extends Component {
     };
   }
 
+  _renderColorMapToggle() {
+    const options = [
+      {
+        value: COLOR_MAP_TYPE.ORDINAL,
+        text: i18n.translate('xpack.maps.styles.dynamicColorSelect.quantitativeLabel', {
+          defaultMessage: 'Quantitative',
+        }),
+      },
+      {
+        value: COLOR_MAP_TYPE.CATEGORICAL,
+        text: i18n.translate('xpack.maps.styles.dynamicColorSelect.qualitativeLavel', {
+          defaultMessage: 'Qualitative',
+        }),
+      },
+    ];
+
+    const selectedValue = this.props.styleProperty.isOrdinal()
+      ? COLOR_MAP_TYPE.ORDINAL
+      : COLOR_MAP_TYPE.CATEGORICAL;
+
+    return (
+      <EuiSelect
+        options={options}
+        value={selectedValue}
+        onChange={this.props.onColorMapTypeChange}
+        aria-label={i18n.translate(
+          'xpack.maps.styles.dynamicColorSelect.qualitativeOrQuantitativeAriaLabel',
+          {
+            defaultMessage: 'Select to style by gradient or color palette',
+          }
+        )}
+        compressed
+      />
+    );
+  }
+
   _onColorMapSelect = selectedValue => {
     const useCustomColorMap = selectedValue === CUSTOM_COLOR_MAP;
     this.props.onChange({
@@ -57,30 +94,24 @@ export class ColorMapSelect extends Component {
 
     if (this.props.colorMapType === COLOR_MAP_TYPE.ORDINAL) {
       return (
-        <Fragment>
-          <EuiSpacer size="s" />
-          <ColorStopsOrdinal
-            colorStops={this.state.customColorMap}
-            onChange={this._onCustomColorMapChange}
-          />
-        </Fragment>
+        <ColorStopsOrdinal
+          colorStops={this.state.customColorMap}
+          onChange={this._onCustomColorMapChange}
+        />
       );
     }
 
     return (
-      <Fragment>
-        <EuiSpacer size="s" />
-        <ColorStopsCategorical
-          colorStops={this.state.customColorMap}
-          field={this.props.styleProperty.getField()}
-          getValueSuggestions={this.props.styleProperty.getValueSuggestions}
-          onChange={this._onCustomColorMapChange}
-        />
-      </Fragment>
+      <ColorStopsCategorical
+        colorStops={this.state.customColorMap}
+        field={this.props.styleProperty.getField()}
+        getValueSuggestions={this.props.styleProperty.getValueSuggestions}
+        onChange={this._onCustomColorMapChange}
+      />
     );
   }
 
-  render() {
+  _renderColorMapSelections() {
     const colorMapOptionsWithCustom = [
       {
         value: CUSTOM_COLOR_MAP,
@@ -98,15 +129,43 @@ export class ColorMapSelect extends Component {
         : '';
     }
 
+    let toggle;
+    if (this.props.showColorMapTypeToggle) {
+      toggle = (
+        <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+          {this._renderColorMapToggle()}
+        </EuiFlexItem>
+      );
+    } else {
+      toggle = <Fragment />;
+    }
+
+    return (
+      <EuiFlexGroup gutterSize="xs">
+        {toggle}
+        <EuiFlexItem>
+          <EuiSuperSelect
+            compressed
+            options={colorMapOptionsWithCustom}
+            onChange={this._onColorMapSelect}
+            valueOfSelected={valueOfSelected}
+            hasDividers={true}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+
+  render() {
     return (
       <Fragment>
-        <EuiSuperSelect
-          options={colorMapOptionsWithCustom}
-          onChange={this._onColorMapSelect}
-          valueOfSelected={valueOfSelected}
-          hasDividers={true}
-        />
-        {this._renderColorStopsInput()}
+        {this._renderColorMapSelections()}
+
+        <EuiSpacer size="s" />
+
+        <EuiFlexGroup>
+          <EuiFlexItem>{this._renderColorStopsInput()}</EuiFlexItem>
+        </EuiFlexGroup>
       </Fragment>
     );
   }
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js
index 47c2d037e0c79..509e8f89c0c04 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js
@@ -11,6 +11,18 @@ import { i18n } from '@kbn/i18n';
 import { EuiButtonIcon, EuiColorPicker, EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
 
 function getColorStopRow({ index, errors, stopInput, colorInput, deleteButton, onAdd }) {
+  const colorPickerButtons = (
+    <div className="mapColorStop__icons">
+      {deleteButton}
+      <EuiButtonIcon
+        iconType="plusInCircle"
+        color="primary"
+        aria-label="Add"
+        title="Add"
+        onClick={onAdd}
+      />
+    </div>
+  );
   return (
     <EuiFormRow
       key={index}
@@ -19,22 +31,19 @@ function getColorStopRow({ index, errors, stopInput, colorInput, deleteButton, o
       error={errors}
       display="rowCompressed"
     >
-      <div>
-        <EuiFlexGroup responsive={false} alignItems="center" gutterSize="xs">
-          <EuiFlexItem>{stopInput}</EuiFlexItem>
-          <EuiFlexItem>{colorInput}</EuiFlexItem>
-        </EuiFlexGroup>
-        <div className="mapColorStop__icons">
-          {deleteButton}
-          <EuiButtonIcon
-            iconType="plusInCircle"
-            color="primary"
-            aria-label="Add"
-            title="Add"
-            onClick={onAdd}
+      <EuiFlexGroup alignItems="center" gutterSize="xs">
+        <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+          {stopInput}
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiColorPicker
+            onChange={colorInput.onColorChange}
+            color={colorInput.color}
+            compressed
+            append={colorPickerButtons}
           />
-        </div>
-      </div>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiFormRow>
   );
 }
@@ -87,7 +96,10 @@ export const ColorStops = ({
             defaultMessage: 'Color must provide a valid hex value',
           })
         : undefined,
-      colorInput: <EuiColorPicker onChange={onColorChange} color={color} compressed />,
+      colorInput: {
+        onColorChange: onColorChange,
+        color: color,
+      },
     };
   }
 
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
index af5e5b37f5467..673f84c04bd4c 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
@@ -13,6 +13,12 @@ import { CATEGORICAL_DATA_TYPES, COLOR_MAP_TYPE } from '../../../../../../common
 import { COLOR_GRADIENTS, COLOR_PALETTES } from '../../../color_utils';
 import { i18n } from '@kbn/i18n';
 
+function getDefaultColorMapType(fieldType) {
+  return CATEGORICAL_DATA_TYPES.includes(fieldType)
+    ? COLOR_MAP_TYPE.CATEGORICAL
+    : COLOR_MAP_TYPE.ORDINAL;
+}
+
 export function DynamicColorForm({
   fields,
   onDynamicStyleChange,
@@ -40,21 +46,42 @@ export function DynamicColorForm({
   };
 
   const onFieldChange = async ({ field }) => {
-    const { name, origin, type } = field;
+    const { name, origin, type: fieldType } = field;
+    const defaultColorMapType = getDefaultColorMapType(fieldType);
     onDynamicStyleChange(styleProperty.getStyleName(), {
       ...styleOptions,
       field: { name, origin },
-      type: CATEGORICAL_DATA_TYPES.includes(type)
-        ? COLOR_MAP_TYPE.CATEGORICAL
-        : COLOR_MAP_TYPE.ORDINAL,
+      type: defaultColorMapType,
+    });
+  };
+
+  const onColorMapTypeChange = async e => {
+    const colorMapType = e.target.value;
+    onDynamicStyleChange(styleProperty.getStyleName(), {
+      ...styleOptions,
+      type: colorMapType,
+    });
+  };
+
+  const getField = () => {
+    const fieldName = styleProperty.getFieldName();
+    if (!fieldName) {
+      return null;
+    }
+
+    return fields.find(field => {
+      return field.name === fieldName;
     });
   };
 
   const renderColorMapSelect = () => {
-    if (!styleOptions.field || !styleOptions.field.name) {
+    const field = getField();
+    if (!field) {
       return null;
     }
 
+    const showColorMapTypeToggle = !CATEGORICAL_DATA_TYPES.includes(field.type);
+
     if (styleProperty.isOrdinal()) {
       return (
         <ColorMapSelect
@@ -63,35 +90,41 @@ export function DynamicColorForm({
             defaultMessage: 'Custom color ramp',
           })}
           onChange={onColorMapSelect}
+          onColorMapTypeChange={onColorMapTypeChange}
           colorMapType={COLOR_MAP_TYPE.ORDINAL}
           color={styleOptions.color}
           customColorMap={styleOptions.customColorRamp}
           useCustomColorMap={_.get(styleOptions, 'useCustomColorRamp', false)}
           styleProperty={styleProperty}
+          showColorMapTypeToggle={showColorMapTypeToggle}
+        />
+      );
+    } else if (styleProperty.isCategorical()) {
+      return (
+        <ColorMapSelect
+          colorMapOptions={COLOR_PALETTES}
+          customOptionLabel={i18n.translate('xpack.maps.style.customColorPaletteLabel', {
+            defaultMessage: 'Custom color palette',
+          })}
+          onColorMapTypeChange={onColorMapTypeChange}
+          onChange={onColorMapSelect}
+          colorMapType={COLOR_MAP_TYPE.CATEGORICAL}
+          color={styleOptions.colorCategory}
+          customColorMap={styleOptions.customColorPalette}
+          useCustomColorMap={_.get(styleOptions, 'useCustomColorPalette', false)}
+          styleProperty={styleProperty}
+          showColorMapTypeToggle={showColorMapTypeToggle}
         />
       );
     }
-
-    return (
-      <ColorMapSelect
-        colorMapOptions={COLOR_PALETTES}
-        customOptionLabel={i18n.translate('xpack.maps.style.customColorPaletteLabel', {
-          defaultMessage: 'Custom color palette',
-        })}
-        onChange={onColorMapSelect}
-        colorMapType={COLOR_MAP_TYPE.CATEGORICAL}
-        color={styleOptions.colorCategory}
-        customColorMap={styleOptions.customColorPalette}
-        useCustomColorMap={_.get(styleOptions, 'useCustomColorPalette', false)}
-        styleProperty={styleProperty}
-      />
-    );
   };
 
   return (
     <Fragment>
-      <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-        <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+      <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+        <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+          {staticDynamicSelect}
+        </EuiFlexItem>
         <EuiFlexItem>
           <FieldSelect
             fields={fields}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/static_color_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/static_color_form.js
index 48befa1ca74c0..ab1634a53a966 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/static_color_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/static_color_form.js
@@ -18,8 +18,10 @@ export function StaticColorForm({
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <EuiColorPicker
           onChange={onColorChange}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js
index 7ad541efe0ab7..0c9011b811f38 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js
@@ -21,8 +21,10 @@ export function DynamicLabelForm({
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <FieldSelect
           fields={fields}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/static_label_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/static_label_form.js
index 721487b5d8ff0..3b7145fdfc884 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/static_label_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/static_label_form.js
@@ -14,8 +14,10 @@ export function StaticLabelForm({ onStaticStyleChange, staticDynamicSelect, styl
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <EuiFieldText
           placeholder={i18n.translate('xpack.maps.styles.staticLabel.valuePlaceholder', {
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_form.js
index df0ae6513f8ed..5879e94991054 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_form.js
@@ -24,8 +24,10 @@ export function DynamicOrientationForm({
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <FieldSelect
           fields={fields}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/static_orientation_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/static_orientation_form.js
index 8c4418f95e1d2..b28743f426262 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/static_orientation_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/static_orientation_form.js
@@ -14,8 +14,10 @@ export function StaticOrientationForm({ onStaticStyleChange, staticDynamicSelect
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <ValidatedRange
           min={0}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_form.js
index 141a941017790..4918c2d906eef 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_form.js
@@ -44,8 +44,10 @@ export function DynamicSizeForm({
 
   return (
     <Fragment>
-      <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-        <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+      <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+        <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+          {staticDynamicSelect}
+        </EuiFlexItem>
         <EuiFlexItem>
           <FieldSelect
             fields={fields}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/static_size_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/static_size_form.js
index d8fe1322db3e3..90e540cc6802a 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/static_size_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/static_size_form.js
@@ -15,8 +15,10 @@ export function StaticSizeForm({ onStaticStyleChange, staticDynamicSelect, style
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <ValidatedRange
           min={0}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js
index f1180a3a56494..b9f04711286c9 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js
@@ -97,8 +97,10 @@ export class StylePropEditor extends Component {
         anchorClassName="mapStyleFormDisabledTooltip"
         content={getDisabledByMessage(this.props.disabledBy)}
       >
-        <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-          <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+        <EuiFlexGroup gutterSize="xs">
+          <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+            {staticDynamicSelect}
+          </EuiFlexItem>
           <EuiFlexItem>
             <EuiFieldText compressed disabled />
           </EuiFlexItem>
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js
index afa11daf45217..9065102dc8bd7 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js
@@ -53,8 +53,10 @@ export function DynamicIconForm({
 
   return (
     <Fragment>
-      <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-        <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+      <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+        <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+          {staticDynamicSelect}
+        </EuiFlexItem>
         <EuiFlexItem>
           <FieldSelect
             fields={fields}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/icon_select.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/icon_select.js
index 68f7a30b22862..41cba1b76d97a 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/icon_select.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/icon_select.js
@@ -128,6 +128,7 @@ export class IconSelect extends Component {
         closePopover={this._closePopover}
         anchorPosition="downLeft"
         panelPaddingSize="s"
+        display="block"
       >
         <EuiFocusTrap clickOutsideDisables={true}>{this._renderIconSelectable()}</EuiFocusTrap>
       </EuiPopover>
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/static_icon_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/static_icon_form.js
index b20d8f2eba162..9b00b2fe38d7b 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/static_icon_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/static_icon_form.js
@@ -20,8 +20,10 @@ export function StaticIconForm({
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <IconSelect
           isDarkMode={isDarkMode}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js
index 6b08fc2a105c3..7a03d8a7bed20 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js
@@ -222,3 +222,30 @@ test('Should pluck the categorical style-meta from fieldmeta', async () => {
     ],
   });
 });
+
+test('Should read out ordinal/categorical correctly', async () => {
+  const categoricalColorStyle = makeProperty({
+    type: COLOR_MAP_TYPE.CATEGORICAL,
+    colorCategory: 'palette_0',
+    getCategoricalFieldMeta,
+  });
+
+  expect(categoricalColorStyle.isOrdinal()).toEqual(false);
+  expect(categoricalColorStyle.isCategorical()).toEqual(true);
+
+  const ordinalColorStyle = makeProperty({
+    type: undefined,
+    color: 'Blues',
+  });
+
+  expect(ordinalColorStyle.isOrdinal()).toEqual(true);
+  expect(ordinalColorStyle.isCategorical()).toEqual(false);
+
+  const ordinalColorStyle2 = makeProperty({
+    type: COLOR_MAP_TYPE.ORDINAL,
+    colorCategory: 'palette_0',
+  });
+
+  expect(ordinalColorStyle2.isOrdinal()).toEqual(true);
+  expect(ordinalColorStyle2.isCategorical()).toEqual(false);
+});