🔹 Card-mod - Add css styles to any lovelace card

Ildar_Gabdullin · February 13, 2023, 8:28pm

Scrollable markdown

Shows scrollbar when needed:

code

  - type: markdown
    content: |
      first
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      last
    card_mod:
      style: |
        ha-markdown {
          max-height: 200px;
          overflow-y: auto;
        }

Thanks to “modern design” huge round corners we see a glitch for the scrollbar in corners.
Another example fixes this:

code

  - type: markdown
    content: |
      first
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      xxxxxxxxxx
      last
    card_mod:
      style:
        ha-markdown $: |
          ha-markdown-element p {
            max-height: 210px;
            overflow-y: auto;
            background-color: rgba(0,255,0,0.2);
          }
        .: |
          ha-markdown {
            padding-right: 4px !important;
          }

Djdevil · February 13, 2023, 10:21pm

i solved!! thx you

Ildar_Gabdullin · February 14, 2023, 4:52am

@ASNNetworks

Which element do you wish to hide?
A particular tab?

Mariusthvdb · February 14, 2023, 8:10am

yes, a nice mod indeed. using this on embedded markdowns my self, adding a nice line for the content to scroll under:

type: custom:hui-element
card_type: markdown
card_mod:
  style: |
    ha-card.type-markdown {
      box-shadow: none;
      border-top: 1px groove var(--divider-color);
      overflow-y: scroll;
      height: 300px;
    }
content: >

believe we had to tie in to the markdown card specifically, because otherwise the mod would be applied to other cards in the stack as well

btw, Ive Neve been able to discover the difference between ‘scroll’ and ‘auto’ in these configs, nor on the example pages on W3…
https://www.w3schools.com/cssref/playdemo.php?filename=playcss_overflow-y&preval=auto

ASNNetworks · February 14, 2023, 9:07am

Hi, thanks for reaching out! So I’m not trying hide any tab, but I want to make the tab-bar element sticky. I want to add the following code to this line:

Change this:

:host {
    display: block;
}

To this:

            :host {
                display: block;
                z-index: 999;
                position: sticky;
                top: 0px;
                background: var(--primary-color);
            }

So I want to add the four extra lines under display. Using inspect element this above code works, however I don’t know how to use it with card_mod. This doesn’t work:

        card_mod:
          style: |
            :host {
                display: block;
                z-index: 999;
                position: sticky;
                top: 0px;
                background: var(--primary-color);
            }

So I think I need to traverse the DOM, which I need help with.

Ildar_Gabdullin · February 15, 2023, 10:00am

Styling custom:tabbed-card

The card is documented here.
Some basic styling may be done by the card’s options, some - by card-mod.

Note (11.04.23): some stylings stopped working after 2023.4. Try this workaround to fix:
instead of:

        card_mod:
          style:
            tabbed-card $: |
              ...... {

use this:

        card_mod:
          style:
            tabbed-card:
              $: |
                ...... {

Colored labels & icons (w/o conditions):

code

  - type: custom:tabbed-card
    attributes:
      icon: mdi:circle
    tabs:
      - card:
          <<: &ref_card
            type: entities
            entities:
              - sun.sun
        attributes:
          label: label 1
        styles:
          '--mdc-theme-primary': red
          '--mdc-tab-text-label-color-default': red
          '--mdc-tab-color-default': red
      - card:
          <<: *ref_card
        attributes:
          label: label 2
        styles:
          '--mdc-theme-primary': orange
          '--mdc-tab-text-label-color-default': orange
          '--mdc-tab-color-default': orange
      - card:
          <<: *ref_card
        attributes:
          label: label 2
        styles:
          '--mdc-theme-primary': green
          '--mdc-tab-text-label-color-default': green
          '--mdc-tab-color-default': green

Colored labels & icons (conditions may be added):

code

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:nth-child(2) ha-icon $: |
        ha-svg-icon {
          color: orange;
        }
      mwc-tab:nth-child(2) $: |
        .mdc-tab__text-label {
          color: red !important;
        }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <<: *ref_card
      attributes:
        label: label 3

Using standard theme variables for labels & icons:

code

type: custom:tabbed-card
styles:
  '--mdc-theme-primary': unset
  '--mdc-tab-text-label-color-default': var(--secondary-text-color)
  '--mdc-tab-color-default': var(--paper-item-icon-color)
attributes:
  icon: mdi:circle
tabs:
  - card:
      <<: &ref_card
        type: entities
        entities:
          - sun.sun
    attributes:
      label: label 1
  - card:
      <<: *ref_card
    attributes:
      label: label 2
  - card:
      <<: *ref_card
    attributes:
      label: label 3

Hilight icons on hover:

Untitled

code

type: custom:mod-card
card_mod:
  style:
    tabbed-card $: |
      mwc-tab:hover {
        --mdc-theme-primary: red;
        --mdc-tab-color-default: red;
      }  
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-1-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-2-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-3-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-4-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-5-circle

Change an underline’s color:

code

  - type: custom:mod-card
    card_mod:
      style:
        tabbed-card $:
          mwc-tab:
            $:
              mwc-tab-indicator $: |
                .mdc-tab-indicator__content--underline {
                  border-color: red !important;
                }
    card:
      type: custom:tabbed-card
      attributes:
        icon: mdi:circle
      tabs:
        - card:
            <<: &ref_card
              type: entities
              entities:
                - sun.sun
          attributes:
            label: label 1
        - card:
            <<: *ref_card
          attributes:
            label: label 2
        - card:
            <<: *ref_card
          attributes:
            label: label 3

Colored tab’s background:

code

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:nth-child(1) $: |
        .mdc-tab {
          background: red !important;
        }
      mwc-tab:nth-child(2) $: |
        .mdc-tab {
          background: yellow !important;
        }
      mwc-tab:nth-child(3) $: |
        .mdc-tab {
          background: lightgreen !important;
        }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <:: *ref_card
      attributes:
        label: label 3

Hilight an active tab’s background:

code

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $: |
          .mdc-tab {
            background: yellow !important;
          }
          .mdc-tab--active {
            background: lightgreen !important;
          }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <<: *ref_card
      attributes:
        label: label 3

Tabs with background images:

code

type: custom:mod-card
card_mod:
  style:
    tabbed-card $: |
      mwc-tab {
        background-size: 100% 100%;
      }
      mwc-tab:nth-child(1) {
        background-image: url("/local/images/test/9colors.jpg");
      }
      mwc-tab:nth-child(2) {
        background-image: url("/local/images/test/blue_low_2.jpg");
      }
      mwc-tab:nth-child(3) {
        background-image: url("/local/images/test/6colors.jpg");
      }
card:
  type: custom:tabbed-card
  tabs:
    - card: &ref_card
        type: entities
        entities:
          - sun.sun
    - card: *ref_card
    - card: *ref_card

With inner padding:

code

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $: |
          .mdc-tab {
            background-size: 100% 100% !important;
          }
      mwc-tab:nth-child(1) $: |
        .mdc-tab {
          background-image: url("/local/images/test/9colors.jpg") !important;
        }
      mwc-tab:nth-child(2) $: |
        .mdc-tab {
          background-image: url("/local/images/test/blue_low_2.jpg") !important;
        }
      mwc-tab:nth-child(3) $: |
        .mdc-tab {
          background-image: url("/local/images/test/6colors.jpg") !important;
        }
      .: |
        mwc-tab {
          padding: 4px;
        }
card:
  type: custom:tabbed-card
  tabs:
    - card: &ref_card
        type: entities
        entities:
          - sun.sun
    - card: *ref_card
    - card: *ref_card

Align icons vertically with labels:

Not needed since v.0.4

Currently (v0.3.1) icons are misaligned; hopefully this will be fixed in the next revision (issue 1, issue 2).
The example contains 2 cards - styled (aligned) & default (misaligned).

code

type: vertical-stack
cards:
  - type: custom:mod-card
    card_mod:
      style:
        tabbed-card $:
          mwc-tab: |
            ha-icon {
              display: inline-flex;
            }
    card:
      type: custom:tabbed-card
      attributes:
        icon: mdi:circle
      tabs:
        - card:
            <<: &ref_card
              type: entities
              entities:
                - sun.sun
          attributes:
            label: label 1
        - card:
            <<: *ref_card
          attributes:
            label: label 2
  - type: custom:tabbed-card
    attributes:
      icon: mdi:circle
    tabs:
      - card:
          <<: *ref_card
        attributes:
          label: label 1
      - card:
          <<: *ref_card
        attributes:
          label: label 2

Narrow tabs w/o labels:

code

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $: |
          .mdc-tab {
            min-width: var(--mdc-icon-size) !important;
          }
    .: |
      tabbed-card {
        --mdc-tab-horizontal-padding: 0px;
      } 
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-1-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-2-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-3-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-4-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-5-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-6-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-7-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-8-circle
    - card:
        type: entities
        entities:
          - sun.sun
      attributes:
        icon: mdi:numeric-9-circle

Labels “caps lock off”:

code

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $: |
          .mdc-tab__text-label {
            text-transform: none;
          }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: Label 1
    - card:
        <<: *ref_card
      attributes:
        label: Label 2
    - card:
        <<: *ref_card
      attributes:
        label: Label 3

Labels: font-size, text wrapping:

code

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:nth-child(2) $: |
        .mdc-tab__text-label {
          font-size: 10px;
          white-space: pre;
        }
      mwc-tab:
        $: |
          .mdc-tab__text-label {
            text-transform: none;
          }
        .: |
          mwc-tab ha-icon {
            display: inline-flex;
          }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: Label 1
    - card:
        <<: *ref_card
      attributes:
        label: |-
          Some
          long long label
          !!!
    - card:
        <<: *ref_card
      attributes:
        label: Label 3

Hidden tab:

code

type: custom:mod-card
card_mod:
  style:
    tabbed-card $: |
      mwc-tab:nth-of-type(2) {
        display: none;
      }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <<: *ref_card
      attributes:
        label: label 3

Disabled tab:

code

type: custom:mod-card
card_mod:
  style:
    tabbed-card $: |
      mwc-tab:nth-of-type(2) {
        pointer-events: none;
        --mdc-tab-text-label-color-default: var(--disabled-color);
        --mdc-tab-color-default: var(--disabled-color);
      }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <<: *ref_card
      attributes:
        label: label 3

“Vivid” tabs:
These changes are also discussed here & here.
Below a variant for the HA 2023.2.3 default theme (border-radius: 12px, borders, no shadows); this may be also rewritten to the “old pre 2022.11 style” (shadows, no borders).

code

type: custom:mod-card
card_mod:
  style:
    tabbed-card $: |
      mwc-tab {
        background: var(--ha-card-background, var(--card-background-color, white) );
        border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
        border-width: 1px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        border-style: solid;
        overflow: hidden;
      }
      section article > * {
        --ha-card-border-radius: 0px 0px 12px 12px;
      }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <<: *ref_card
      attributes:
        label: label 3

Tabs on the bottom:

code

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $:
          mwc-tab-indicator $: |
            .mdc-tab-indicator__content--underline {
               align-self: flex-start !important;
            }
    .: |
      tabbed-card {
        display: flex;
        flex-direction: column-reverse;
      }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <<: *ref_card
      attributes:
        label: label 3

Same + “vivid” tabs:

code

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $:
          mwc-tab-indicator $: |
            .mdc-tab-indicator__content--underline {
               align-self: flex-start !important;
            }
        .: |
          mwc-tab {
            background: var(--ha-card-background, var(--card-background-color, white) );
            border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
            border-width: 1px;
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
            border-style: solid;
            overflow: hidden;
          }
          section article > * {
            --ha-card-border-radius: 12px 12px 0px 0px;
          }
    .: |
      tabbed-card {
        display: flex;
        flex-direction: column-reverse;
      }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        <<: &ref_card
          type: entities
          entities:
            - sun.sun
      attributes:
        label: label 1
    - card:
        <<: *ref_card
      attributes:
        label: label 2
    - card:
        <<: *ref_card
      attributes:
        label: label 3

Sticky “vivid” tabs:

tab

code

type: custom:mod-card
card_mod:
  style:
    tabbed-card $: |
      mwc-tab-bar {
        position: sticky;
        position: -webkit-sticky;
        top: 0; /*var(--header-height); */
        display: block;
        z-index: 999;
      }
      mwc-tab {
        background: var(--ha-card-background, var(--card-background-color, white) );
        border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
        border-width: 1px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        border-style: solid;
        overflow: hidden;
      }
      section article > * {
        --ha-card-border-radius: 0px 0px 12px 12px;
      }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        type: entities
        entities:
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
      attributes:
        label: label 1
    - card:
        type: entity
        entity: sun.sun
      attributes:
        label: label 2
    - card:
        type: entity
        entity: sun.sun
      attributes:
        label: label 3

Sticky “vivid” bottom tabs:

Untitled Project111111111111

code

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $:
          mwc-tab-indicator $: |
            .mdc-tab-indicator__content--underline {
               align-self: flex-start !important;
             }
        .: |
          mwc-tab-bar {
            position: sticky;
            position: -webkit-sticky;
            bottom: 4px;
            display: block;
            z-index: 999;
          }
          mwc-tab {
            background: var(--ha-card-background, var(--card-background-color, white) );
            border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
            border-width: 1px;
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
            border-style: solid;
            overflow: hidden;
          }
          section article > * {
            --ha-card-border-radius: 12px 12px 0px 0px;
          }          
    .: |
      tabbed-card {
        display: flex;
        flex-direction: column-reverse;
      }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card:
        type: entities
        entities:
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
          - sun.sun
      attributes:
        label: label 1
    - card:
        type: entity
        entity: sun.sun
      attributes:
        label: label 2
    - card:
        type: entity
        entity: sun.sun
      attributes:
        label: label 3

Additional info in tabs:

How to replace a tab’s name with some text:

code

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:nth-child(2) $: |
        .mdc-tab__text-label {
          font-size: 0px;
        }
        .mdc-tab__text-label:after {
          content: "New info";
          font-size: initial;
          text-transform: none;
          display: block;
        }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card: &ref_card
        type: entities
        entities:
          - sun.sun
      attributes:
        label: Label 1
    - card: *ref_card
      attributes:
        label: dummy
    - card: *ref_card
      attributes:
        label: Label 3

How to add a templated text for 2 or more tabs:

code

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:nth-child(n+2):
        $: |
          .mdc-tab__text-label {
            font-size: 0px;
          }
          .mdc-tab__text-label:after {
            font-size: 10px;
            text-transform: none;
            display: block;
          }
      mwc-tab:nth-child(2) $: |
        .mdc-tab__text-label:after {
          content: "Zone: {{states('zone.home')}}";
        }
      mwc-tab:nth-child(3) $: |
        .mdc-tab__text-label:after {
          content: "{{states('sun.sun')}}";
        }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card: &ref_card
        type: entities
        entities:
          - sun.sun
      attributes:
        label: Label 1
    - &ref_tab
      card:
        <<: *ref_card
      attributes:
        label: dummy
    - *ref_tab

How to add a multiline text:

code

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:nth-child(2) $: |
        .mdc-tab__text-label {
          font-size: 0px;
        }
        .mdc-tab__text-label:after {
          content: "New info\A New info";
          font-size: 8px;
          text-transform: none;
          white-space: pre;
          display: block;
        }
card:
  type: custom:tabbed-card
  attributes:
    icon: mdi:circle
  tabs:
    - card: &ref_card
        type: entities
        entities:
          - sun.sun
      attributes:
        label: Label 1
    - card: *ref_card
      attributes:
        label: dummy
    - card: *ref_card
      attributes:
        label: Label 3

Adding images instead of icons:

Removing “on hover” effect:

Tested in HA 2023.2.2, Chrome + Win10, iOS Companion app (iOS 15.7.3).

more examples

ASNNetworks · February 15, 2023, 11:09am

Thank you so much! I managed to mix and match to create a sticky bar at the bottom! One final question, would it be possible to force the bar to fit all content? When using on mobile, I noticed the tabs are spread out and I need to scroll. I want the bar to force fit all tabs in the view, so I see all tabs without needing to scroll.

Ildar_Gabdullin · February 15, 2023, 11:48am

Do you mean this?

Probably your options are:
– set a scale to 50% (or any <100%) on the Company App;
– decrease font-size, remove icons - only for a mobile client.

VBrenner · February 15, 2023, 12:13pm

I am trying to remove borders from chips but not sure what’s going wrong

schmierlappe · February 15, 2023, 3:28pm

    card_mod:
      style: |
        ha-card {
          --chip-border-width: 0;
          --chip-box-shadow: none;
          --chip-background: none;
          --chip-spacing: 0;
        }

VBrenner · February 15, 2023, 4:12pm

thanks - that worked a charm!

ASNNetworks · February 16, 2023, 11:29am

This is what I mean: if the window is wider, all tabs fit in the view:

msedge_6zbj7T4Qzr

But at a certain width, the tabs don’t fit anymore. I need to scroll to be able to see the last tab.
msedge_ZL6aSxQXgY

So I’m looking for a way to fit all tabs in the view, there is plenty of space around the icons anyway, so I don’t see a reason why it wouldn’t fit.

Ildar_Gabdullin · February 16, 2023, 11:52am

Do not have access to PC.
Try yourself to change margins/paddings by code Inspector.
Now you know how to access elements, probably will manage to style it.
Post here your results, I will check them and probably will add them to my post about this card.

Mariusthvdb · February 16, 2023, 11:57am

are those tabs on the tabbed-card? the look very much like the icon tabs in the regular HA header bar.

ASNNetworks · February 16, 2023, 12:16pm

So I managed to do this with inspect element, by changing min-width to 40px, which works great!
msedge_GEVhsV15Vf

I tried using this with card_mod with different variations, but couldn’t make it work. I think I’m missing something there.

ASNNetworks · February 16, 2023, 12:17pm

Yes correct, using only icon and no labels get this look. Also very cool each active icon can have its own color.

Ildar_Gabdullin · February 16, 2023, 12:21pm

Ok, will check it some day.

Mariusthvdb · February 16, 2023, 12:46pm

before installing, can I ask how responsive the card is?
does it load swiftly and how does it manage the tabs.
is it comparable with say the fold-entity-row?
I could imagine using card_mod on all of those tabs would be costly

considering it might be a nice replacement for the swiper card which seems to be abandoned and causing some styling/functionality issues

seems to be working nicely indeed! using only icons on those tabs, I had to change the selected_false color to

      styles:
        --mdc-theme-primary: gold
        --mdc-tab-color-default: orange

for it to work

wont be using the orange, but just following the docs on that

comparing that to the main view tab bar:

one can see the unselected tabs in the tabbed-card are a bit brighter than the unselected view tabs. maybe I can find the correct setting for that, though it takes a keen eye to notice.

setting minwidth to true using text labels didnt work though, still had to swipe with only 3 or 4 tabs.

ASNNetworks · February 16, 2023, 4:13pm

Yes, I have replaced some swiper elements inside my dashboard for tabbed-card myself. Mainly because I find selecting a tab is a lot more mobile friendly than swiping. Especially if there are like 4-5 options to choose from.

Ildar_Gabdullin · February 16, 2023, 11:29pm

Updated the main post for this card.
Check this:

card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $: |
          .mdc-tab {
            min-width: var(--mdc-icon-size) !important;
          }
    .: |
      tabbed-card {
        --mdc-tab-horizontal-padding: 0px;
      }