Et2Select: Ellipsis on tags that are too long

This commit is contained in:
nathan 2022-07-12 11:36:18 -06:00
parent e8e3d2fc38
commit d9f094053f
2 changed files with 6 additions and 1 deletions

View File

@ -35,10 +35,12 @@ export class Et2EmailTag extends Et2Tag
.tag__prefix { .tag__prefix {
width: 20px; width: 20px;
height: 20px; height: 20px;
flex: 0 1 auto;
background-color: initial; background-color: initial;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
background-position-y: center;
opacity: 30%; opacity: 30%;
cursor: pointer; cursor: pointer;

View File

@ -23,6 +23,7 @@ export class Et2Tag extends Et2Widget(SlTag)
shoelace, css` shoelace, css`
:host { :host {
flex: 1 1 auto; flex: 1 1 auto;
overflow: hidden;
} }
.tag--pill { .tag--pill {
overflow: hidden; overflow: hidden;
@ -34,7 +35,9 @@ export class Et2Tag extends Et2Widget(SlTag)
} }
.tag__content { .tag__content {
padding: 0px 0.2rem; padding: 0px 0.2rem;
flex: 1 1 auto; flex: 1 2 auto;
overflow: hidden;
text-overflow: ellipsis;
} }
/* Avoid button getting truncated by right side of button */ /* Avoid button getting truncated by right side of button */
.tag__remove { .tag__remove {