Merge branch 'development' of https://github.com/htmlburger/carbon-fi…

…elds into development * 'development' of https://github.com/htmlburger/carbon-fields: Fix truncated text in association options
htmlburger · Mar 29, 2019 · db2bf97 · db2bf97
2 parents 85f387d + def15dd
commit db2bf97
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/packages/core/fields/association/index.js b/packages/core/fields/association/index.js
@@ -282,7 +282,9 @@ class AssociationField extends Component {
 
 										<div className="cf-association__option-content">
 											<span className="cf-association__option-title">
-												{ option.title }
+												<span className="cf-association__option-title-inner">
+													{ option.title }
+												</span>
 											</span>
 
 											<span className="cf-association__option-type">

diff --git a/packages/core/fields/association/style.scss b/packages/core/fields/association/style.scss
@@ -99,19 +99,29 @@
 }
 
 .cf-association__option-title {
-	overflow: hidden;
-	font-size: $wp-font-size;
-	line-height: $wp-line-height;
-	color: $wp-color-base-gray;
-	white-space: nowrap;
-	text-overflow: ellipsis;
+	flex: 1;
+	position: relative;
 	margin-right: $size-base;
 
 	.cf-association__option--selected & {
 		color: $wp-color-dark-silver-gray;
 	}
 }
 
+.cf-association__option-title-inner {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	font-size: $wp-font-size;
+	line-height: $wp-line-height;
+	color: $wp-color-base-gray;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	transform: translateY(-50%);
+}
+
 .cf-association__option-type {
 	font-size: 9px;
 	line-height: 1;