Skip to content

Commit

Permalink
ComboBox: Fixed input overlap rendering issue (microsoft#4102)
Browse files Browse the repository at this point in the history
* Shorted and centered input field

* Added change file

* Updated snapshot
  • Loading branch information
lynamemi authored and Chris Mohr committed Apr 17, 2018
1 parent 3972d74 commit 50e9197
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 19 deletions.
Original file line number Diff line number Diff line change
@@ -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": ""
}
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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',
Expand Down Expand Up @@ -316,7 +314,7 @@ export const getStyles = memoizeFunction((
input: {
boxSizing: 'border-box',
width: '100%',
height: '30px',
height: '28px',
borderStyle: 'none',
outline: 'none',
font: 'inherit',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down

0 comments on commit 50e9197

Please sign in to comment.