junkfix / numberbox-card

Replace input_number sliders with plus and minus buttons
110 stars 9 forks source link

Question: Change spacing or height in column view #110

Closed almighty059 closed 6 months ago

almighty059 commented 6 months ago

I apologize for opening this because it's not an issue and only a question. I've search and tried everything I know so this is my last resort. I used your following example code for your column view but I'm having a problem adjusting the card to either increase the height or increase/change the distance in between the parameter adjustment and the name. Is there a way to do this? I provided a screen shot of what I'm doing along with my code. Thank you.

example4

type: horizontal-stack
cards:
  - type: custom:numberbox-card
    border: true
    entity: number.office_temp
    name: false
    card_mod:
        style: >
          .body{display:block!important}
          .body::after{text-align:center;font-size:10px;content:"Temperature";display:block!important}
  - type: custom:numberbox-card
    border: true
    entity: number.office_timer
    unit: time
    name: false
    card_mod:
        style: >
          .body{display:block!important}
          .body::after{text-align:center;font-size:10px;content:"Minutes";display:block!important}

image

type: custom:mod-card
card_mod:
  style:
    hui-horizontal-stack-card $: |
      slider-button-card:nth-of-type(1) {
        flex-grow: 2 !important; 
      }
      numberbox-card:nth-of-type(2) {
        flex-grow: 1 !important; 
      }
      button-card:nth-of-type(3) {
        flex-grow: 1 !important; 
      }
card:
  type: horizontal-stack
  cards:
    - type: custom:slider-button-card
      entity: number.tent_002_port_003_on_power
      name: 'Max Level:   '
      compact: true
      slider:
        direction: left-right
        background: gradient
        show_state: true
      icon:
        tap_action:
          action: none
        icon: mdi:arrow-left-right
      action_button:
        show: false
    - type: custom:numberbox-card
      icon: false
      entity: number.tent_002_port_003_on_power
      name: false
      max: 10
      min: 1
      card_mod:
        style: >
          .body{display:block!important}
          .body::after{text-align:center;font-size:14px;content:"Max
          Level";display:block!important} .cur-num{font-size: 25px !important}
          .cur-box ha-icon{transform:scale(90%)}
    - type: custom:button-card
      template:
        - default_button_01
      entity: sensor.tent_002_port_003_current_power
      name: Current Level
      show_icon: false
      show_state: true
      styles:
        card: null
        name:
          - font-size: 14px
        state:
          - font-size: 25px
        grid:
          - grid-template-areas: '"s" "n"'
          - grid-template-columns: 1fr
          - grid-template-rows: null
junkfix commented 6 months ago

Seems like you want to align max level with current level add padding-top:10px; to match the button card padding

.body::after{text-align:center;font-size:14px;padding-top:10px;content:"Max Level";display:block!important}
almighty059 commented 6 months ago

Awesome.Thank you so much.