diff --git a/package.json b/package.json index 13a08aa..4d60919 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@independent-software/typeui", - "version": "1.2.18", + "version": "1.2.19", "description": "TypeUI", "keywords": [ "react", diff --git a/src/controls/Form/FieldWrapper.tsx b/src/controls/Form/FieldWrapper.tsx index 90dbcd4..4d30843 100644 --- a/src/controls/Form/FieldWrapper.tsx +++ b/src/controls/Form/FieldWrapper.tsx @@ -56,7 +56,7 @@ const FieldWrapper = styled(FieldWrapperBase)` border-color: ${lighten(0.25, p.theme.primaryColor)}; } /* Label */ - &>*:nth-child(1) { + & > *:nth-child(1) { padding-left: 15px; padding-right: 14px; line-height: 12px; @@ -65,10 +65,9 @@ const FieldWrapper = styled(FieldWrapperBase)` font-variant: all-small-caps; opacity: ${p.error ? 0 : 1}; color: #2C4253; - } /* Hint/error */ - &>*:nth-child(3) { + & > *:nth-child(3) { position: absolute; ${p.error && css`left: 12px;`} ${!p.error && css`right: 12px;`} diff --git a/src/controls/Form/Label.tsx b/src/controls/Form/Label.tsx index f693e08..98eca7a 100644 --- a/src/controls/Form/Label.tsx +++ b/src/controls/Form/Label.tsx @@ -41,6 +41,9 @@ const Label = styled(LabelBase)` font-size: 80%; margin-right: 1em; color: ${p => lighten(0.5, p.theme.fontColor)}; + white-space: nowrap; + overflow-x: hidden; + text-overflow: ellipsis; /* Ordinarily, labels are displayed above the field control: */ display: block;