Resolve attribute and icon alignment issues in compact mode, per #5

lizsugar · May 20, 2022 · f28cb31 · f28cb31
1 parent 270cb13
commit f28cb31
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/dist/slider-button-card.js b/dist/slider-button-card.js
@@ -8126,7 +8126,9 @@ let SliderButtonCard = class SliderButtonCard extends LitElement {
       color: var(--disabled-text-color);
     }
     .compact .icon {
+      position: relative;
       float: left;
+      bottom: 0px;
     }
 
     /* --- TEXT --- */
@@ -8219,6 +8221,12 @@ let SliderButtonCard = class SliderButtonCard extends LitElement {
       */
     }
 
+    .compact .attribute {
+      display: inline-block;
+      max-width: calc(100% - 0em);
+      overflow: hidden;
+    }
+
     .oneliner {      
       color: var(--state-color-on, var(--label-badge-text-color, white));
       text-overflow: ellipsis;

diff --git a/src/slider-button-card.ts b/src/slider-button-card.ts
@@ -555,7 +555,9 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
       color: var(--disabled-text-color);
     }
     .compact .icon {
+      position: relative;
       float: left;
+      bottom: 0px;
     }
 
     /* --- TEXT --- */
@@ -648,6 +650,12 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
       */
     }
 
+    .compact .attribute {
+      display: inline-block;
+      max-width: calc(100% - 0em);
+      overflow: hidden;
+    }
+
     .oneliner {      
       color: var(--state-color-on, var(--label-badge-text-color, white));
       text-overflow: ellipsis;