diff --git a/change/@fluentui-web-components-2021-01-04-10-10-23-users-v-sedono-fix-height-clamp-box-sizing-select.json b/change/@fluentui-web-components-2021-01-04-10-10-23-users-v-sedono-fix-height-clamp-box-sizing-select.json new file mode 100644 index 0000000000000..96be09cdf97a6 --- /dev/null +++ b/change/@fluentui-web-components-2021-01-04-10-10-23-users-v-sedono-fix-height-clamp-box-sizing-select.json @@ -0,0 +1,8 @@ +{ + "type": "patch", + "comment": "add height clamp and box sizing for select", + "packageName": "@fluentui/web-components", + "email": "sethdonohue@Admins-MBP.guest.corp.microsoft.com", + "dependentChangeType": "patch", + "date": "2021-01-04T18:10:23.659Z" +} diff --git a/packages/web-components/src/select/select.styles.ts b/packages/web-components/src/select/select.styles.ts index 950632c0ecbeb..86bf7699eb84c 100644 --- a/packages/web-components/src/select/select.styles.ts +++ b/packages/web-components/src/select/select.styles.ts @@ -25,8 +25,10 @@ export const SelectStyles = css` background: ${neutralFillInputRestBehavior.var}; border-radius: calc(var(--corner-radius) * 1px); border: calc(var(--outline-width) * 1px) solid ${neutralOutlineRestBehavior.var}; + box-sizing: border-box; color: ${neutralForegroundRestBehavior.var}; contain: contents; + height: calc(${heightNumber} * 1px); position: relative; user-select: none; min-width: 250px;