Tile card but just dropdown

Configuration Frontend
1

Hey, I’m trying to make a clean dropdown without a card, icon, state etc.

Something like this:
image

I’ve come this far
image

This is my code:

          - type: tile
            entity: input_select.filip_dashboard_select
            features:
              - type: select-options
            layout_options:
              grid_columns: full
            card_mod:
              style: |
                ha-card .content {
                  display: none !important;                
                }
                ha-card {
                  height: auto !important;
                }

I’ve found that the padding lies in this path /html/body/home-assistant//home-assistant-main//ha-drawer/partial-panel-resolver/ha-panel-lovelace//hui-root//div/div[2]/hui-view/hui-sections-view//ha-sortable/div/div[1]/hui-section/hui-grid-section//ha-sortable/div/div[2]/hui-card/hui-tile-card//ha-card/div[2]/hui-card-features//div but dont know how to modify it.

:host > --feature-padding is another variable I find that changes what I’m looking for. If I set that to 0 I get what I want. But how do I get that result using card mod?

2

hello,

card_mod:
              style: |
                ha-card .content {
                  display: none !important;                
                }
                ha-card {
                  height: auto !important;
                }
                ha-card {
                  padding-right: 10px !important;
                  padding-left: 10px !important;
                  padding-bottom: 0px !important;
                  padding-top: 10px !important;
                  background-color: transparent;
                }

result:
image

padding top must be there as you are hinding the top of the card and the is no spacing.
You will have to adjust drop down list width, at least this is in my case with short ON/OFF etc.
hope it helps

3

Thanks but it does not really remove that padding though, if you set the background-color to red you’ll see that it stills is there not allowing the drop down to use the full width of the card :frowning:

EDIT: It seems to get its properties from “feature-padding” but I cant touch it with ha-card .content, not even with :host

image

4

Hey,
To understand you want the dropdown to use all space without padding?

5

Yeah exactly :slight_smile:

6

if so just set padding to 0px

type: tile
entity: input_select.state
features:
  - type: select-options
    layout_options: null
    grid_columns: full
card_mod:
  style: |
    ha-card .content {
      display: none !important;                
    }
    ha-card {
      height: auto !important;
    }
    ha-card {
      padding-right: 0px !important;
      padding-left: 0px !important;
      padding-bottom: 0px !important;
      padding-top: 0px !important;
      background-color: transparent;
    }

result is:
image

7

But if you change the color from the transparent you can tell that the padding is still there. I can’t figure out how to change that.

image

8

Hello,
Sorry, too far for my small knowledge.
Not sure how to remove it but you can work with margin and negative number px on card to reduce spacing and put background to none.
This will not remove background but will reduce spacing.

You can try to ask in the thread for card mod.
https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744

9

If looking to use card_mod, I think the solution will look something like this:

card_mod:
  style:
    hui-card-features $: |
      div.container {
        padding: 0px;
      }
    .: |
      div.content {
        display: none !important;                
      }
etc etc
10

Wow! thanks for sharing.

1 Like
11

Thank you!

1 Like