Hello
How can I change the value of the .column class, specifically the max-width attribute?
.column {
flex: 1 0 0px;
max-width: 500px; /* Remove this attribute or increase its value */
min-width: 0px;
}
Hello
How can I change the value of the .column class, specifically the max-width attribute?
.column {
flex: 1 0 0px;
max-width: 500px; /* Remove this attribute or increase its value */
min-width: 0px;
}
Welcome to this loony bin!
The short answer is, you don’t! In HA the dashboards are nothing you could compare with usual dashboards or websites.
Will say, you have to go into the specific card and set the wanted values there. But you need a custom_component
like card-mod for this. You could as well change the themes CSS, but that would break things on a different end, guaranteed!
I know, that sounds rather difficult, but as I said above, in HA things work quite different.
I can’t exactly see, if you’re already using layout-card
, as this would offer an uncomplicated solution. You could set there a pixel width for the grid-column, in pixel as well as in percent. Should work.
Let us know, what you want to do, so we can add more specific instructions to proceed further, if needed.
Hello again
I tried solutions like:
Unfortunately, I was unable to achieve what is shown in the image below.
I only have problems with higher resolutions. The dashboard looks great on the phone.
Changing or deleting this attribute (max-width) causes the dashboard to display correctly on the computer and phone.
Example in the image below with and without attribute (max-width)
Please post the YAML code of that dashboard (I’d prefer the layout-card
variant). Then we’ll see how we get there.
In a nutshell: layout-card
is able to set “media queries” for different device widths, so you could easily order the shown cards specifically for mobile or desktop view. And you can set the width for the grid-columns in pixel as well as in percent.
Please post the code formatted, see here #11. It’s important, because in YAML indentation matters very much, and without a proper formatting, these (possibly wrong) indentations get lost. Thanks!
title: DOM
views:
- path: default_view
title: Home
subview: false
layout: {}
badges: []
cards:
- square: false
type: grid
cards:
- type: horizontal-stack
cards:
- square: false
type: grid
cards:
- square: false
type: grid
cards:
- type: tile
entity: sensor.0x00124b0029192ce1_temperature
name: Temp. przód
vertical: false
- type: tile
entity: sensor.0x00124b0029192f88_temperature
name: Temp. tył
vertical: false
- type: tile
entity: sensor.0x00124b0029192ce1_humidity
name: Wilgotność - przód
vertical: false
- type: tile
entity: sensor.0x00124b0029192f88_humidity
name: Wilgotność - tył
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: cover.open_cover
target:
entity_id:
- cover.rolety_biuro
- cover.rolety_biuro_wyjscie
- cover.rolety_garaz
- cover.rolety_garderoba
- cover.rolety_goscinny
- cover.rolety_kuchnia_duze
- cover.rolety_kuchnia_mala
- cover.rolety_lazienka
- cover.rolety_salon_lewa
- cover.rolety_salon_prawa
- cover.rolety_salon_srodkowa
- cover.rolety_salon_wyjscie
- cover.rolety_sypialnia_1
- cover.rolety_sypialnia_2
data: {}
name: OTWÓRZ WSZYSTKIE ROLETY
icon: mdi:curtains
show_state: false
hold_action:
action: none
icon_height: 50px
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: cover.close_cover
target:
entity_id:
- cover.rolety_biuro
- cover.rolety_biuro_wyjscie
- cover.rolety_garaz
- cover.rolety_garderoba
- cover.rolety_goscinny
- cover.rolety_kuchnia_duze
- cover.rolety_kuchnia_mala
- cover.rolety_lazienka
- cover.rolety_salon_lewa
- cover.rolety_salon_prawa
- cover.rolety_salon_srodkowa
- cover.rolety_salon_wyjscie
- cover.rolety_sypialnia_1
- cover.rolety_sypialnia_2
data: {}
name: ZAMKNIJ WSZYSTKIE ROLETY
icon: mdi:curtains-closed
show_state: false
hold_action:
action: none
icon_height: 50px
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: cover.brama_garazowa_door
show_state: true
name: BRAMA GARAŻOWA
hold_action:
action: none
icon_height: 50px
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: cover.brama_wjazdowa_door
name: BRAMA WJAZDOWA
show_state: true
icon: ''
hold_action:
action: none
icon_height: 50px
columns: 2
- square: false
type: grid
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: switch.0x00124b0026b7d3a8
icon_height: 70px
name: WEJŚCIE
icon: mdi:lightbulb
show_state: true
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: switch.0x00124b0024ca76f8
name: OGRÓD
show_state: true
icon: mdi:lightbulb
icon_height: 70px
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: switch.0x00124b0026b7f3a2
icon: mdi:lightbulb
name: TARAS
show_state: true
icon_height: 70px
columns: 3
- square: false
type: grid
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: more-info
entity: binary_sensor.0x00124b002918b9af_contact
show_state: true
name: WEJŚCIE
hold_action:
action: none
- show_name: true
show_icon: true
type: button
tap_action:
action: more-info
name: FURTKA
entity: binary_sensor.0x00124b0029170a89_contact
show_state: true
hold_action:
action: none
- show_name: true
show_icon: true
type: button
entity: binary_sensor.0x00124b0029170b44_contact
name: BIURO
show_state: true
tap_action:
action: more-info
hold_action:
action: none
- show_name: true
show_icon: true
type: button
tap_action:
action: more-info
show_state: true
name: SALON
entity: binary_sensor.salon_ogrodek_contact
columns: 4
columns: 1
columns: 1
- type: horizontal-stack
cards:
- square: false
type: grid
cards:
- show_state: false
show_name: false
camera_view: live
type: picture-entity
entity: camera.front_medium
image: https://demo.home-assistant.io/stub_config/bedroom.png
- square: false
type: grid
cards:
- type: entity
entity: climate.0xa4c13859acf2f328
name: BIURO
icon: mdi:thermometer
attribute: current_temperature
unit: °C
state_color: false
- type: entity
entity: climate.0xa4c13852969aa76c
name: KOTŁOWNIA
icon: mdi:thermometer
unit: °C
state_color: true
attribute: current_temperature
- type: entity
entity: climate.0xa4c13837640ad98d
name: PRZEDPOKÓJ
icon: mdi:thermometer
unit: °C
state_color: true
attribute: current_temperature
- type: entity
entity: climate.0xa4c138c693f09ab7
name: SALON 1
icon: mdi:thermometer
unit: °C
state_color: true
attribute: current_temperature
- type: entity
entity: climate.0xa4c13886a4acc0bb
name: SALON 2
icon: mdi:thermometer
unit: °C
state_color: true
attribute: current_temperature
- type: entity
entity: climate.0xa4c1383a98c3c780
name: GOŚCINNY
icon: mdi:thermometer
unit: °C
state_color: true
attribute: current_temperature
- type: entity
entity: climate.0xa4c138448d7c24aa
name: GARDEROBA
icon: mdi:thermometer
unit: °C
state_color: true
attribute: current_temperature
- type: entity
entity: climate.0xa4c1387425c28659
name: KORYTARZ 1
icon: mdi:thermometer
unit: °C
state_color: true
attribute: current_temperature
- type: entity
entity: climate.0xa4c138e67d2be8e4
name: KORYTARZ 2
icon: mdi:thermometer
unit: °C
state_color: true
attribute: current_temperature
- type: entity
entity: climate.0xa4c1380ed317a43f
name: SYPIALNIA
icon: mdi:thermometer
unit: °C
state_color: true
attribute: current_temperature
columns: 4
columns: 1