[Feature]: How to center slides (flex: space-around)?

[sulliwane]

Is your feature request related to a problem?

I have three blinds, each one represented by a vertical slider. It works great, congrats on the hard work!

My only issue is I'd like to center those within the horizontal stack card:

type: horizontal-stack
  cards:
    - type: custom:my-slider-v2
      entity: cover.0x70ac08fffe12c813
      flipped: false
      styles:
        card:
          - height: 200px
          - width: 50px
        track:
          - background: '#292830'
        progress:
          - background: '#87CEEB'
    - type: custom:my-slider-v2
      entity: cover.0xf4b3b1fffef1b934
      flipped: false
      styles:
        card:
          - height: 200px
          - width: 50px
        track:
          - background: '#292830'
        progress:
          - background: '#87CEEB'
    - type: custom:my-slider-v2
      entity: cover.0xf4b3b1fffef1bfee
      flipped: false
      styles:
        card:
          - height: 200px
          - width: 50px
          - display: flex
          - justify-content: center
        track:
          - background: '#292830'
        progress:
          - background: '#87CEEB'

Is it possible to do that?

Describe the solution you'd like

justify: center

Describe alternatives you've considered

I've tried using https://github.com/thomasloven/lovelace-card-mod without success.

Thanks for your help! 🙏

[AnthonMS]

Hello, thank you for the issue/request. I'm glad to hear you find the card useful even though there are shortcomings.

You could use plain CSS styling on the outer most html element. Haven't worked on it in a while so can't remember the specific name for that element exactly. But I think it's just the "card".

You could make it a flex box that expands to fill the available space and then center the actual slider element inside that. You can inspect the card in your browser and try to play around with the CSS live in the developer tools of your browser, until you find something that works the way you intend.

This is a solution you can do now, without me adding the specific feature request, since I don't know exactly when I will be able to add this and I wouldn't want to disappoint anyone.

But I will definitely try to add a 'jusitfy' key to the config to make it easier for people in the future. With all these requests being given I will try to prioritize it higher.

You are very welcome to respond further for more clarification for styling it properly if you decide to try that out but having trouble understanding how.

[sulliwane]

Thanks a lot for the through answer. When inspecting the widget, I see this: When I point the box, it highlights the outer container (<my-slider-v2></my-slider-v2>). And when I point the slider, it highlights the inner slider box (<ha-card></ha-card>).

However, those are the default and only styles available to customize in the yaml definition:

The "card" CSS properties are actually applied (partially) onto the slider container: <ha-card></ha-card>. And my understanding is that none of the other property in the yml is attached to the outer component (<my-slider-v2></my-slider-v2>).

So I've tried this approach to centering using inner box properties:

type: horizontal-stack
cards:
  - type: custom:my-slider-v2
    entity: cover.0x70ac08fffe12c813
    flipped: false
    styles:
      card:
        - height: 200px
        - width: 50px
        - display: flex; /* Flexbox to align its content */
        - justify-content: center; /* Horizontal alignment */
        - align-items: center; /* Vertical alignment */
        - margin: auto; /* Center horizontally and vertically */
      track:
        - background: '#292830'
      progress:
        - background: '#87CEEB'

And also this approach:

type: horizontal-stack
cards:
  - type: custom:my-slider-v2
    entity: cover.0x70ac08fffe12c813
    flipped: false
    styles:
      card:
        - height: 201px
        - width: 50px
        - position: relative;
        - margin-left: auto;
        - margin-right: auto;
        - display: block;

Both don't work/. Either this CSS defined in YAML doesn't work as expected, or it just doesn't get applied (I lean toward the second option).

Thanks again for your help, much appreciated!

[AnthonMS]

The 'const styles' object is just to give a clear overview of the default styles. Every property given in the styles yaml config should be converted to css properties and overwrite the default and add the ones that are not in the default styles.

Hmm.. I know for sure it did add/overwrite styles when I created the card and I use custom styles for the card in my own setup.

I did some work on it a while ago that had a bug where the default styles would overwrite the styles given, but I'm pretty sure I got that resolved and haven't had any issues with it since and since there are many people using it, I would assume someone would have raised the issue sooner if I had accidentally pushed that bug to "production".

When inspecting the element, you can add new style properties and change the ones it already has while seeing the styles being applied live in the developer tools of your browser. Have you tried that, to see if those styles you add in the config actually do what you expect?

[sulliwane]

Ok, so the issue with my above attempt are the ; that I didn't remove when transitioning from CSS to YAML.

Removing them made it work instantly. Here is the full config:

type: horizontal-stack
cards:
  - type: custom:my-slider-v2
    entity: cover.0x70ac08fffe12c813
    flipped: false
    styles:
      card:
        - height: 200px
        - width: 50px
        - position: relative
        - margin-left: auto
        - margin-right: auto
        - display: block
      track:
        - background: '#292830'
      progress:
        - background: '#87CEEB'
  - type: custom:my-slider-v2
    entity: cover.0xf4b3b1fffef1b934
    flipped: false
    styles:
      card:
        - height: 200px
        - width: 50px
        - position: relative
        - margin-left: auto
        - margin-right: auto
        - display: block
      track:
        - background: '#292830'
      progress:
        - background: '#87CEEB'
  - type: custom:my-slider-v2
    entity: cover.0xf4b3b1fffef1bfee
    flipped: false
    styles:
      card:
        - height: 200px
        - width: 50px
        - position: relative
        - margin-left: auto
        - margin-right: auto
        - display: block
      track:
        - background: '#292830'
      progress:
        - background: '#87CEEB'
title: Title

Have a nice day and thanks again for the precious help!

[AnthonMS]

Awesome! I completely missed that in your examples as well. Glad you got it working!

I will keep the issue open so I remember to add the justify key to the config in a future update.