diff --git a/common/changes/office-ui-fabric-react/combobox-input-ht_2018-02-26-22-46.json b/common/changes/office-ui-fabric-react/combobox-input-ht_2018-02-26-22-46.json new file mode 100644 index 0000000000000..45d0264b15b11 --- /dev/null +++ b/common/changes/office-ui-fabric-react/combobox-input-ht_2018-02-26-22-46.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "ComboBox: Shortened and centered the input field to account for overlap that appears at some resolutions.", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.styles.ts b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.styles.ts index 98de0475a975b..0c0037c234294 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.styles.ts +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.styles.ts @@ -214,11 +214,9 @@ export const getStyles = memoizeFunction(( borderWidth: '2px', MsHighContrastAdjust: 'none', paddingLeft: '11px', + paddingTop: '0', + paddingBottom: '0', selectors: { - '.ms-ComboBox-Input': { - // ComboBoxHeight is 32, 28 accounts for the 2px borders - height: '28px' - }, '.ms-ComboBox-CaretDown-button': { // Negative positioning to account for the 2px border right: '-2px', @@ -237,9 +235,9 @@ export const getStyles = memoizeFunction(( boxShadow: 'none', marginBottom: '10px', marginLeft: '0', - paddingTop: '0', + paddingTop: '1px', // The 1px padding centers the input field, avoiding overlap in the browser + paddingBottom: '1px', paddingRight: ComboxBoxCaretDownWidth, - paddingBottom: '0', paddingLeft: '12px', color: ComboBoxRootTextColor, position: 'relative', @@ -316,7 +314,7 @@ export const getStyles = memoizeFunction(( input: { boxSizing: 'border-box', width: '100%', - height: '30px', + height: '28px', borderStyle: 'none', outline: 'none', font: 'inherit', diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap index a6f5bdf79bb21..2531bea9cb933 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap @@ -28,10 +28,10 @@ exports[`ComboBox Renders ComboBox correctly 1`] = ` margin-left: 0; outline: 0; overflow: hidden; - padding-bottom: 0; + padding-bottom: 1px; padding-left: 12px; padding-right: 32px; - padding-top: 0; + padding-top: 1px; position: relative; text-overflow: ellipsis; user-select: none; @@ -53,10 +53,9 @@ exports[`ComboBox Renders ComboBox correctly 1`] = ` border-color: Highlight; border-width: 2px; color: HighlightText; + padding-bottom: 0; padding-left: 11px; - } - @media screen and (-ms-high-contrast: active){&.is-open .ms-ComboBox-Input { - height: 28px; + padding-top: 0; } @media screen and (-ms-high-contrast: active){&.is-open .ms-ComboBox-CaretDown-button { right: -2px; @@ -80,10 +79,9 @@ exports[`ComboBox Renders ComboBox correctly 1`] = ` border-color: Highlight; border-width: 2px; color: HighlightText; + padding-bottom: 0; padding-left: 11px; - } - @media screen and (-ms-high-contrast: active){&:active .ms-ComboBox-Input { - height: 28px; + padding-top: 0; } @media screen and (-ms-high-contrast: active){&:active .ms-ComboBox-CaretDown-button { right: -2px; @@ -98,10 +96,9 @@ exports[`ComboBox Renders ComboBox correctly 1`] = ` border-color: Highlight; border-width: 2px; color: HighlightText; + padding-bottom: 0; padding-left: 11px; - } - @media screen and (-ms-high-contrast: active){&:focus .ms-ComboBox-Input { - height: 28px; + padding-top: 0; } @media screen and (-ms-high-contrast: active){&:focus .ms-ComboBox-CaretDown-button { right: -2px; @@ -127,7 +124,7 @@ exports[`ComboBox Renders ComboBox correctly 1`] = ` border-style: none; box-sizing: border-box; font: inherit; - height: 30px; + height: 28px; outline: none; padding-bottom: 0; padding-left: 0;