Max width on iOS companion app does not match web version....
Closed this issue · 10 comments
Thanks for your hard work on this project, it is awesome.
I am having an issue on the companion app that is not scaling the tab headers down as per the web interface.
Here is my code:
styles:
'--mdc-theme-primary': orange
'--mdc-tab-text-label-color-default': white
'--mdc-typography-button-font-size': 11px
'--mdc-tab-height': 24px
'--mdc-tab-horizontal-padding': 0px
attributes:
isMinWidthIndicator: true
minWidth: true
isFadingIndicator: true
options: {}
This is what the web interface looks like (perfect)
But the mobile companion app does not scale the names across the top correctly? Is there a fix for this as all headers should fit nicely, but I am missing the 5th entity tab name and you have to scroll? I have tried taking the font size down to 6px and there is more than ample room to fit the last entity?
Thanks
i dont have an ios device to test the apps webview on but it looks to be functioning properly. you have enough tabs that it is going to shrink them as small as possible to fit as many as possible. you can see this if you comment out 3 of the tabs and watch them fill the tab bar. like this:
its because of the smaller screen size. your tabs that are not showing are just out of view and you should be able to scroll over to see them. its not very intuitive, and to fix that i will be adding scroll arrows for when the tabs overflow. does this make sense?
There are huge gaps between the tabs though (Dining ->Living ->Bedroom), I have set padding to 0px, if it can't be done, I guess I have to scroll.
Thanks for the quick response
There are huge gaps between the tabs though (Dining ->Living ->Bedroom), I have set padding to 0px, if it can't be done, I guess I have to scroll. Thanks for the quick response
oh, um you shouldnt need quotes on your keys. is everything indented properly?
this works for me:
styles:
--mdc-tab-horizontal-padding: 0px
HA seems to be adding these quotes, I remove them and they come back, the colour options appear to be working ok with quotes as does the font size and tab height. They don't seem to get any closer for me.
Here is all my code....
type: custom:tabbed-card
styles:
'--mdc-theme-primary': orange
'--mdc-tab-text-label-color-default': white
'--mdc-typography-button-font-size': 9px
'--mdc-tab-height': 24px
'--mdc-tab-horizontal-padding': 0px
attributes:
isMinWidthIndicator: true
minWidth: true
isFadingIndicator: true
options: {}
tabs:
- card:
type: custom:mushroom-climate-card
entity: climate.aircon_1
name: Dining Room
collapsible_controls: false
layout: horizontal
use_entity_picture: true
tap_action:
action: more-info
hvac_modes:
- 'off'
- fan_only
- heat
- cool
attributes:
label: Dining - card:
type: custom:mushroom-climate-card
entity: climate.aircon_2
collapsible_controls: false
layout: horizontal
use_entity_picture: true
tap_action:
action: more-info
hvac_modes:
- 'off'
- fan_only
- heat
- cool
attributes:
label: Living - card:
type: custom:mushroom-climate-card
entity: climate.aircon_3
collapsible_controls: false
layout: horizontal
use_entity_picture: true
tap_action:
action: more-info
hvac_modes:
- 'off'
- fan_only
- heat
- cool
attributes:
label: Bedroom - card:
type: custom:mushroom-climate-card
entity: climate.aircon_4
collapsible_controls: false
layout: horizontal
use_entity_picture: true
tap_action:
action: more-info
hvac_modes:
- 'off'
- fan_only
- heat
- cool
attributes:
label: Tyler - card:
type: custom:mushroom-climate-card
entity: climate.aircon_5
collapsible_controls: false
layout: horizontal
use_entity_picture: true
tap_action:
action: more-info
hvac_modes:
- 'off'
- fan_only
- heat
- cool
attributes:
label: Jaxson
where are you entering and copying this config from?
where are you entering and copying this config from?
regardless, your yaml config needs proper indentation to be accurate. this is correct formatting and works:
type: custom:tabbed-card
attributes:
minWidth: true
isMinWidthIndicator: true
styles:
'--mdc-tab-horizontal-padding': 0px
tabs:
- card:
...
attributes:
...This is the layout of the code, looks ok and passed YAML checker...
This is the layout of the code, looks ok and passed YAML checker...
weird. i dont have a ios device to check that. can you add this config and see if it has the same issue?
type: custom:tabbed-card
attributes:
minWidth: true
isMinWidthIndicator: true
styles:
'--mdc-tab-horizontal-padding': 0px
tabs:
- card:
type: entity
entity: sun.sun
attributes:
icon: mdi:pause
label: Pause
- card:
type: entity
entity: sun.sun
attributes:
label: Play
icon: mdi:play
- card:
type: entity
entity: sun.sun
attributes:
icon: mdi:stop
label: Stop
- card:
type: entity
entity: sun.sun
attributes:
icon: mdi:pause
label: PauseThis only has 4 tabs, it is when you add the 5th tab this problem appears, I have the same issues when I add one more tab to yours.
`type: custom:tabbed-card
attributes:
minWidth: true
isMinWidthIndicator: true
styles:
'--mdc-tab-horizontal-padding': 0px
tabs:
- card:
type: entity
entity: sun.sun
attributes:
icon: mdi:pause
label: Pause - card:
type: entity
entity: sun.sun
attributes:
label: Play
icon: mdi:play - card:
type: entity
entity: sun.sun
attributes:
icon: mdi:stop
label: Stop - card:
type: entity
entity: sun.sun
attributes:
icon: mdi:pause
label: Pause - card:
type: entity
entity: sun.sun
attributes:
icon: mdi:pause
label: Pause`
I think it is just a limitation I have to deal with.
ill try and find an ios device to test on and report back. thanks for your time troubleshooting.