Markdown card width problem - hui-markdown-card

[www987 (Wojciech)]

So I am trying to do a card with a title at the top and 2 row with diffrent columns size so that rows would work separately from each other. I was doing it with custom:stack-in-card.

However don’t know why I cant set width of markdown card. I set it for 50px or less nothing works it takes much more space and push back my icon. As I see in dev tools hui-markdown-card div occupies place but I don’t know how to scale it

My YAML:

type: custom:stack-in-card
mode: vertical
card_mod:
  style: |
    :host {
      border:none;
    }
     ha-card {
      box-shadown:none;
      margin: 0px;
      padding: 0px;
    }
cards:
  - type: custom:stack-in-card
    mode: horizontal
    title: Black humidifier
    card_mod:
      style: |
        :host {
        }
         ha-card {
          border:none;
          box-shadown:none;
          margin: 0px;
          padding: 0px;
          display:block;
        }
    cards:
      - type: custom:button-card
        show_name: false
        tap_action:
          action: call-service
          service: script.send_ac_fanlow_commands
        entity: input_select.fanstatus
        icon: mdi:plus
        styles:
          card:
            - padding: 0
            - margin: 5px
            - margin-top: 0px
            - width: 27px
            - border: none
            - margin-left: 20px
          icon:
            - width: 100%
            - transform: scale(1.1)
            - color: green
      - type: markdown
        content: >-
          <div> {{states('sensor.humidity_desk_dht22')}} is your desired
          humidity  </div>
        card_mod:
          style: |
            ha-card {
              display:block !important;
              margin: 0;
              padding: 0;
              line-height:0;
              width: 250px;
              border:none;
              }
            ha-markdown{
            }
      - type: custom:button-card
        icon: mdi:air-humidifier
        styles:
          card:
            - padding: 0px
            - margin: 5px
            - margin-top: 0px
            - margin-left: 20px
            - width: 27px
            - border: none
          icon:
            - width: 100%
            - transform: scale(1)
            - color: rgb(08, 150, 255, 0.5)

How to change width of that hui-markdown-card?

[boheme61]

I dont know from where you got your card-mod-code, or you just are quite inconsistent with your “spaces” and Your “{ }”
Try to “create” your code correct ( Not that it always will “bite” you, if you don’t … it just look awfull, in my opinion

For your Markdown Width add “!important” ( width: 260px !important; )

However that’s Not the whole “deal” ( Use Inspector ) And you will find that the “hui-markdown-card” Has a " flex: 1 1 0px; " , which causes the right button-card ends up to the most right

So one way of getting it “closer” to the “text” , is adding/playing with the “flex values”
Or, set a max-width ( i.e 280px; on host )

[LiQuid_cOOled]

The width on the Markdown card is working from my tests. Which icon is being affected?

You have margin settings on the button cards which IMO is in play

I removed the border: none and adjusted the icon margin-left: to a negative value for effect

        card_mod:
          style: |
           ha-card {
              display:block !important;
              margin: 0;
              padding: 0;
              line-height:0;
              width: 220px;
                    }
           
      - type: custom:button-card
        icon: mdi:air-humidifier
        styles:
          card:
            - padding: 0px
            - margin: 5px
            - margin-top: 0px
            - margin-left: -180px
            - width: 27px
            - border: none
          icon:
            - width: 100%
            - transform: scale(1)
            - color: rgb(08, 150, 255, 0.5)

[www987 (Wojciech)]

I know that my YAML code might not look the best I was trying millions solutions to make width smaller. Yes I saw flex values but I don’t know how to change that flex 1 1 0 px on host where to apply that css. Could you tell me? Solution with negative margins works well but maybe I would try also with yours?

[www987 (Wojciech)]

What you mean by IMO? I wanted air-humidifier card to be closer to the markdown. Your solution with negative margin-left is great. Thank you very much it is what I wanted. I tried so many solutions but none of them was working… I thought I will be able to style upper layer container hui-markdown-card but I couldnt. Thank you

[boheme61]

@www987

I saw flex values but I don’t know how to change that flex 1 1 0 px on host where to apply that css. Could you tell me? Solution with negative margins works well but maybe I would try also with yours?

flex: 1 will use all available space, and therefore “move” the “fixed-sized”(width) button-card to the end of row ( And yes flex is very “versatile”, and more “complex” to play with )

By using huge -margins you will move the button-card Over other “elements” Check you View in a mobile, or just reduce the size of your “view-port” on your screen ( reduce the width of your browser-window ) , the button card, will still be -180px to the left, regardless if your" Browser-Windows" is only 200px wide
PX (in a view) , is a “fixed-size” (often, depends on many other factors), however with % one can accomplice more Responsive results.

Another way, as i mention is the max-width on host

            :host {
              max-width: 240px !important;
            }

PS: When im in doubt i always use " !important " ( To make sure best possibility it “bites” ), afterwards i go through my code, and remove “redundant” text/values, i.e 0px which doesn’t matters etc
Cleaning up codes can reduce the whole view/dasboards-size … alot in my case

[www987 (Wojciech)]

Thank for your advices. I took your solution to heart to make cleaner YAML and find new, cleaner, better solution with grid

type: custom:stack-in-card
mode: vertical
title: Black humidifier
card_mod:
  style: |
    :host {
      border:none;
      margin: 0;
      padding: 0;
    }
     ha-card {
      margin: 0px;
      padding: 0px;
    }
cards:
  - type: custom:stack-in-card
    mode: horizontal
    card_mod:
      style: |
        :host {
          margin: 0px;
          padding: 0px;
        }
         ha-card {
          border:none;
          box-shadown:none;
          margin: 0px;
          padding: 0px;
          display: flex;
          justify-content: start;
        }
    cards:
      - type: custom:button-card
        layout: icon_name_state
        icon: mdi:air-humidifier
        name: |
          [[[
            return `Your desired humidity is: ${states['sensor.humidity_desk_dht22'].state}%`;
          ]]]
        styles:
          card:
            - padding: 10px
            - border: none
            - margin: 0px
            - padding: 0
            - margin-left: 22px
            - width: 100%
            - min-height: 110%
          grid:
            - grid-template-areas: '"i n"'
            - grid-template-columns: auto 1fr
          icon:
            - width: 24px
            - height: 24px
          name:
            - justify-self: start
            - padding-left: 10px
      - type: 'custom:button-card'
        icon: mdi:plus
        show_name: false
        show_state: false
        styles:
          card:
            - padding: 0px
            - margin: 0px
            - margin-left: 5px
            - border: none
          grid:
            - grid-template-areas: '"i n"'
            - grid-template-columns: auto 1fr
          icon:
            - width: 30px
            - height: 30px
            - color: green
          name:
            - justify-self: start
            - padding-left: 10px
        tap_action:
          action: call-service
          service: script.send_humidifier1_power_command

However, I still dont know how to change paddings of black humidifier title I find that padding bottom is too big, but set everywhere padding: 0px and still padding is not 0. What css class should I use to style that title padding?

[boheme61]

@www987

make cleaner YAML and find new, cleaner, better solution with grid

Ok, not to be picky, but now that you decided to use custom:button-card for the whole row(and same entity/info) You could use 3 columns
ohh, wait now you removed the first input-select, and have 2 side-by-side buttons with both i+n (but hide s+n) on the latest

Anyways, good luck

[www987 (Wojciech)]

Yes, but it works like I wanted. What s+n means? Do you have any documentations to the grid or video/material? It is a mystery for me

@www987

ohh, wait now you removed the first input-select, and have 2 side-by-side buttons with both i+n (but hide s+n) on the latest

Anyways, good luck

[LiQuid_cOOled]

State and name =s+n. Check out the Button Card github for additional information.

GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant