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

Share your Projects! Dashboards & Frontend
4275

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:
image

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;
          }
5 Likes