dpad not in the middle

[vednolacni]

As the title say. Is there a way fix this?

Edit: Im using the buuble card - pop up.

[Nerwyn]

A chromium webview update from a few months ago broke my Google dpad style example but I've neglected to fix it. I'll need to rework it.

[Nerwyn]

It may have not been a webview change but a row style change. Setting justify-content to center for the row class (or just this row in particular by ID) using card-mod fixes it.

While it is now fixable using card-mod, I should get around to adding a built in way to modify individual row and column styles. I did add unique IDs for each row and column in a car a few release ago, and should add a row/column style field.

[vednolacni]

My wife is using iPhone and its it the middle for her 😅 you think its my phone? Xiaomi 14.

[Nerwyn]

Your wife's iPhone has a larger horizontal resolution, so it can fit the middle row without squishing the end and causing it to be lopsided.

[Nerwyn]

This would also be a good place for me to remember to do the following:

• Use grid for dpad instead of rows and columns to help it keep shape at different screen resolutions.
• Add xpad and npad button layout special elements, also using grid.

[Nerwyn]

Turns out the grid made the dpad way worse (3.8.0 beta 2). Because of this I'm keeping the option to autogenerate the direction buttons in rows easily using nav_buttons, but have added dpad, numpad, xpad, and npad using grid. I'll continue working on internal rows styling for 3.8.0 beta 3 later.

[Nerwyn]

@vednolacni you should be able to set row and column styles without card-mod now using row_styles in the latest 3.8.0 beta.

[Nerwyn]

@vednolacni if you have no feedback on the 3.8.0 beta I'll release it in a few days and then close this issue.

[vednolacni]

This is the state after the update. What do i need to change (row_styles)?

My code:

type: custom:android-tv-card
remote_id: remote.living_room_tv
rows:
  - - 1
    - power
    - 2
  - - dpad
  - - volume_down
    - volume_mute
    - volume_up
  - - back
    - home
    - play_pause
  - - slider
  - - youtube
    - plex
    - keyboard
custom_actions:
  '1':
    icon: mdi:fan
    tap_action:
      action: call-service
      service: remote.send_command
      target:
        entity_id: remote.rm4_pro
  '2':
    icon: mdi:lightbulb
    tap_action:
      action: call-service
      service: light.toggle
      target:
        entity_id: light.luc_dnevna_soba_switch_0
  center:
    style:
      color: rgb(94, 94, 94)
      '--size': 200px
      background: rgb(31, 31, 31)
      border-radius: 200px
      margin: '-70px'
      padding: 70px
  up:
    style:
      color: rgb(197, 199, 197)
      z-index: 2
      top: 25px
      height: 90px
      width: 300px
  down:
    style:
      color: rgb(197, 199, 197)
      z-index: 2
      bottom: 25px
      height: 90px
      width: 300px
  left:
    style:
      color: rgb(197, 199, 197)
      z-index: 2
      left: 30px
      height: 170px
      width: 90px
  right:
    style:
      color: rgb(197, 199, 197)
      z-index: 2
      right: 30px
      height: 170px
      width: 90px
  youtube:
    tap_action:
      action: call-service
      service: remote.turn_on
      data:
        activity: https://www.youtube.com
      target:
        entity_id: remote.living_room_tv
  plex:
    tap_action:
      action: call-service
      service: remote.turn_on
      data:
        activity: plex://
      target:
        entity_id: remote.living_room_tv

[Nerwyn]

Change dpad to nav_buttons. dpad now uses the fixed size grid, which doesn't work with these styles. nav_buttons returns the buttons using rows.

[vednolacni]

Its working! Thanks m8!

[vednolacni]

There is still a problem on my xiaomi 14, but its ok on iphones...

[Nerwyn]

Row/column style options and special grids added in 3.8.0.

[Nerwyn]

@vednolacni what does your row style settings look like? Looking at your config the nav buttons are on rows 2, 3, and 4 so it should look like this:

row_styles:
  row-2:
    justify-content: center
  row-3:
    justify-content: center
  row-4:
    justify-content: center

[vednolacni]

my bad. Its working now. Thanks again.