Feature Request: Card Side by Side #183

mcfly2283 · 2021-11-18T10:37:48Z

Description

The Card with its Sensor-Tiles are very high at all. It would be great if there is an Option to place the Map and Tiles Side by Side.
Especially with a Wallpanel, the palcement could be very Hard.

Solution

Optional Side by Side-View MAP-TILES

Alternatives

No response

Context

No response

PiotrMachowski · 2021-11-18T12:26:07Z

Something like this?

PiotrMachowski · 2021-11-18T12:57:35Z

It's possible to do it using card-mod:

...
style: |
  ha-card {
    display: flex !important;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  .map-wrapper {
    flex-grow: 3;
    width: 600px;
  }
  .controls-wrapper {
    flex-grow: 1;
    width: 300px;
  }

mcfly2283 · 2021-11-18T13:56:36Z

Yeah, thats it!
Thank you, I'll give it a try

PiotrMachowski · 2021-11-18T14:00:41Z

There is only a slight problem...

mcfly2283 · 2021-11-18T21:54:23Z

Very Cool, now it fits the the whole Screen, overlaid with some Quick-Buttons
Im only using predefined-zones as preselect, so that "glitch" is not a Problem.

Thank you for your continuous Work!

PiotrMachowski · 2021-11-18T22:05:33Z

That looks great! How are these buttons made?

mcfly2283 · 2021-11-18T22:22:23Z

This is a 1-Panel made with custom:layout-card in Grid-Mode.
The Buttons are just simple buttons and thanks to the 1-Panel-Grid you can place it wehre you want inside the (static) grid,
even onto other Cards. With that you can do cool Graphic-Overlays when the post man arrives ;) :

PiotrMachowski · 2021-11-18T22:47:51Z

Neat idea 👍 by the way, you can add additional tiles and icons with your own sensors/service calls ;)

tempmaseg · 2021-11-19T10:54:28Z

I have installed card_mod and added below to the bottom of the card, but it doesn't split.

card-mod:
  style: |
    ha-card {
      display: flex !important;
      align-items: stretch;
      flex-wrap: wrap;
      justify-content: space-evenly;
    }
    #map-wrapper {
      flex-grow: 3;
      width: 600px;
    }
    .controls-wrapper {
      flex-grow: 1;
      width: 300px;
    }

mcfly2283 · 2021-11-19T11:12:26Z

You have to use the right Dashboard-View. Try to use the 1-Panel or the other new "Sidebar", dont know how its realy called in english

tempmaseg · 2021-11-19T15:18:00Z

Thanks @mcfly2283 !

@PiotrMachowski , if it is not to complicated it would be great to be able do decide if the tiles should be above the map or vice versa.

Denow · 2021-11-20T13:58:06Z

@mcfly2283 The current configuration stretches the card horizontally, is it possible to also stretch vertically so that the card fills the whole page?

PiotrMachowski · 2021-11-20T14:22:23Z

@Denow height of the card is adjusted to match map proportions. You can change them by adding crop (with big left and right values in your case) to your settings:

...
map_source:
  camera: camera.vacuum
  crop:
    top: 10
    bottom: 10
    left: 100
    right: 110

mcfly2283 · 2021-11-22T10:50:27Z

Unfortunately that was a short Story.
Since the last Update of card-mod, the View does not work anymore. Maybe the Syntax has changed or something like that.

I can`t fix it for myself.

shred86 · 2021-12-05T01:45:20Z

Definitely would love to see this feature as I'm also trying to use this card on a wall mounted tablet.

idogrf · 2021-12-05T06:48:55Z

This would be a great feature for an already great card :)

PiotrMachowski · 2021-12-05T13:34:46Z

@mcfly2283 have you managed to figure it out using card mod?

mcfly2283 · 2021-12-05T15:51:04Z

No, after the last update of card-mod the syntax above won‘t work for me and i don’t have the knowledge to get this working again.

kimme1024 · 2021-12-09T14:07:50Z

Thanks @mcfly2283 !

@PiotrMachowski , if it is not to complicated it would be great to be able do decide if the tiles should be above the map or vice versa.

That would indeed be a good option to have! Really waiting for that as well!
Also, as I mentioned in #247, when using panel mode, the crop function doesn't work.

PiotrMachowski · 2021-12-09T15:00:02Z

@kimme1024 I'm pretty sure that it works. Are you sure you have provided big enough values to notice change?

kimme1024 · 2021-12-09T15:27:58Z

@kimme1024 I'm pretty sure that it works. Are you sure you have provided big enough values to notice change?

Aha! I was assuming that the cropping was relative to the picture itself but it's relative to the dashboard it's displayed on... I increased the crop values and now it works!

Thanks!

PiotrMachowski · 2021-12-09T15:35:28Z

@kimme1024 hmmmm, that seems to be a little bug 😉

kimme1024 · 2021-12-09T15:39:16Z

@kimme1024 hmmmm, that seems to be a little bug 😉

It would indeed make more sense if your crop was correct for any way of displaying it.

When using tile top and bottom are 100
When using panel top and bottom are 320 and 310 to be displayed correctly on my wall tablet, however then it doesn't display correctly on any other screen than the tablet...

ddmmcz · 2022-01-03T20:22:19Z

Very Cool, now it fits the the whole Screen, overlaid with some Quick-Buttons Im only using predefined-zones as preselect, so that "glitch" is not a Problem.

Thank you for your continuous Work!

Hi @mcfly2283 , please would you show the custom button position configuration. I don't understand how you got them over you. Thank you.

mcfly2283 · 2022-01-04T13:14:19Z

Very Cool, now it fits the the whole Screen, overlaid with some Quick-Buttons Im only using predefined-zones as preselect, so that "glitch" is not a Problem.
Thank you for your continuous Work!

Hi @mcfly2283 , please would you show the custom button position configuration. I don't understand how you got them over you. Thank you.

Hi, sure, here is my Dashboard-Config. The Config for the newer Version of custom:layout-card is mostly different due to some major changes in the recent past. Im using an old Version, no. "16" and don`t have time to migrate this...

https://pastebin.com/GyvbPYx5

ddmmcz · 2022-01-04T13:20:54Z

Hi, sure, here is my Dashboard-Config. The Config for the newer Version of custom:layout-card is mostly different due to some major changes in the recent past. Im using an old Version, no. "16" and don`t have time to migrate this...

https://pastebin.com/GyvbPYx5

Thank you very much!

Ender3Pro · 2022-01-17T20:03:30Z

Very Cool, now it fits the the whole Screen, overlaid with some Quick-Buttons Im only using predefined-zones as preselect, so that "glitch" is not a Problem.
Thank you for your continuous Work!

Hi @mcfly2283 , please would you show the custom button position configuration. I don't understand how you got them over you. Thank you.

Hi, sure, here is my Dashboard-Config. The Config for the newer Version of custom:layout-card is mostly different due to some major changes in the recent past. Im using an old Version, no. "16" and don`t have time to migrate this...

https://pastebin.com/GyvbPYx5

Hi @mcfly2283 is possible to show one of the "script.cleanup"?

Thanks a lot

ddmmcz · 2022-01-21T18:52:37Z

Hi @mcfly2283 is possible to show one of the "script.cleanup"?

Thanks a lot

Hi, my control scripts:

empty_dust_bin:
 alias: Vycisteni zasovniku vysavace
 sequence:
 - data:
     command: app_goto_target
     params: [28471,30389]
   service: vacuum.send_command
   entity_id: vacuum.roborock_vacuum_a10

obyvak_stul:
 alias: Vysavac ke stolku
 sequence:
 - data:
     command: app_goto_target
     params: [23198,26294]
   service: vacuum.send_command
   entity_id: vacuum.roborock_vacuum_a10

mcfly2283 · 2022-01-22T10:01:43Z

(Thanks ddmmcz)

Has anybody fixed the card-mod Side-by-Side View?. I've tried many things, but it still won't work.

card-mod:
  style: |
    ha-card {
      display: flex !important;
      align-items: stretch;
      flex-wrap: wrap;
      justify-content: space-evenly;
    }
    #map-wrapper {
      flex-grow: 3;
      width: 600px;
    }
    .controls-wrapper {
      flex-grow: 1;
      width: 300px;
    }

ddmmcz · 2022-01-22T15:39:47Z

Has anybody fixed the card-mod Side-by-Side View?. I've tried many things, but it still won't work.

I have it like this -> https://pastebin.com/CYpaE3f3

mcfly2283 · 2022-01-22T16:32:40Z

Has anybody fixed the card-mod Side-by-Side View?. I've tried many things, but it still won't work.

I have it like this -> https://pastebin.com/CYpaE3f3

Thank you, i think have to update to the new Version of Layout-Card. Thanks for the new Syntax, that helps to migrate the old Version!

Sysoev86 · 2022-05-08T11:30:32Z

Has anybody fixed the card-mod Side-by-Side View?. I've tried many things, but it still won't work.

I have it like this -> https://pastebin.com/CYpaE3f3

Thanks for your tips, I copied the code from you, but I end up with a very small map. I've tried different ways, but the map is always small. What is your advice?

https://pastebin.com/R6Nserh3

PiotrMachowski · 2022-05-08T12:12:28Z

You can add scale to map extractor:

map_transformation:
  scale: 2

PiotrMachowski · 2022-05-08T13:04:30Z

You can also try different values for width

mcfly2283 · 2022-05-10T19:04:32Z

Thanks for your tips, I copied the code from you, but I end up with a very small map. I've tried different ways, but the map is always small. What is your advice?
https://pastebin.com/R6Nserh3

i am getting the same View, even with the latest hints From Piotr, at the moment im using the Standard-View.
If you get this to work, please let me know since i don`t have time right now to get deeper in this :)

PiotrMachowski · 2022-05-10T20:11:46Z

@mcfly2283 have you tried to increase width for map-wrapper?

mcfly2283 · 2022-05-10T20:19:09Z

@mcfly2283 have you tried to increase width for map-wrapper?

Yes, but due to my very old "layout-card", the problem could be located there. If i change the width, nothing happens or the map is very small as shown in the prev. Post. It's def. not seemless.

PiotrMachowski · 2022-05-10T20:35:00Z

Ok, I have checked it out and it turned out that I have changed some stuff in CSS and card-mod style had to be adjusted (change #map-wrapper to .map-wrapper). Current version:

...
style: |
  ha-card {
    display: flex !important;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  .map-wrapper {
    flex-grow: 3;
    width: 600px;
  }
  .controls-wrapper {
    flex-grow: 1;
    width: 300px;
  }

mcfly2283 · 2022-05-11T06:58:35Z

Ok, I have checked it out and it turned out that I have changed some stuff in CSS and card-mod style had to be adjusted (change #map-wrapper to .map-wrapper). Current version:

Great, that was the Point.
Thank you for your Support, Piotr! :)
Now everything looks fine again

PiotrMachowski · 2022-05-11T09:30:37Z

that was the Point

exactly 😃

mattdevo1 · 2022-07-14T04:36:39Z

Ok, I have checked it out and it turned out that I have changed some stuff in CSS and card-mod style had to be adjusted (change #map-wrapper to .map-wrapper). Current version:
...
style: |
  ha-card {
    display: flex !important;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  .map-wrapper {
    flex-grow: 3;
    width: 600px;
  }
  .controls-wrapper {
    flex-grow: 1;
    width: 300px;
  }

I can't get this to work :(

Running card-mod 3.1.4 and lovelace-xiaomi-vacuum-map-card 2.0.11.

Any thoughts on why this might not work for me?

Here is my YAML:

type: custom:xiaomi-vacuum-map-card
map_source:
  camera: camera.xiaomi_cloud_map_extractor
calibration_source:
  camera: true
entity: vacuum.roborock_vacuum_a27
vacuum_platform: default
card_mod:
  style: |
   ha-card {
    display: flex !important;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: space-evenly;
   }
   .map-wrapper {
    flex-grow: 3;
    width: 600px;
   }
   .controls-wrapper {
    flex-grow: 1;
    width: 300px;
   }

yoda98mnt · 2022-11-03T09:16:41Z

square: true
columns: 1
type: grid
cards:
  - type: conditional
    conditions:
      - entity: binary_sensor.roborock_downstairs
        state: 'on'
    card:
    type: custom:layout-card
    layout_type: grid-layout
    layout:
      grid-template-columns: repeat(15, 80px)
      grid-template-rows: repeat(11, 50px)
cards:
      - type: vertical-stack
        view_layout:
          grid-column-start: 1
          grid-column-end: 15
          grid-row-start: 1
          grid-row-end: end
        cards:
          - type: custom:xiaomi-vacuum-map-card
            title: ''
            preset_name: Live map
            entity: vacuum.roborock_s6_maxv
            vacuum_platform: default
            map_locked: true
            map_source:
              camera: camera.xiaomi_cloud_map_extractor
            calibration_source:
              camera: true
            map_modes:
              - template: vacuum_clean_segment
 
            card_mod:
              style: |
                ha-card {
                  display: flex !important;
                  align-items: stretch;
                  flex-wrap: wrap;
                  justify-content: space-evenly;
                }
                #map-wrapper {
                  flex-grow: 3;
                  width: 300px;
                }
                .controls-wrapper {
                  flex-grow: 1;
                  width: 100px;
                }
                .room-wrapper {
                --map-card-internal-room-label-color: red;
                --map-card-internal-room-label-font-size: 20px;
                }
      - type: vertical-stack
        view_layout:
          grid-column-start: 12
          grid-column-end: 14
          grid-row-start: 8
          grid-row-end: 10
        cards:
          - type: entity-button
            name: Servis
            icon: mdi:tools
            entity: script.obyvak_stul
            tap_action:
              action: call-service
              service: script.obyvak_stul 

      type: custom:xiaomi-vacuum-map-card
      entity: vacuum.roborock_s6_maxv
      language: de
      camera: camera.xiaomi_cloud_map_extractor
      title: Roborock S6 Erdgeschoss
      map_source:
        camera: camera.xiaomi_cloud_map_extractor
      calibration_source:
        camera: true
      append_icons: true
      card_mod: null
      icons:
        - icon: mdi:home-floor-0
          tooltip: Erdgeschoss
          tap_action:
            action: call-service
            service: vacuum.send_command
            service_data:
              entity_id: vacuum.roborock_s6_maxv
              command: load_multi_map
              params: 0
        - icon: mdi:home-floor-1
          tooltip: Obergeschoss
          tap_action:
            action: call-service
            service: vacuum.send_command
            service_data:
              entity_id: vacuum.roborock_s6_maxv
              command: load_multi_map
              params: 1
      vacuum_platform: default
      map_locked: true
      map_modes:
        - template: vacuum_clean_segment
          repeats_type: EXTERNAL
          max_repeats: 3
          service_call_schema:
            service: vacuum.send_command
            service_data:
              command: app_segment_clean
              entity_id: '[[entity_id]]'
              params:
                - segments: '[[selection]]'
                  repeat: '[[repeats]]'
          name: Erdgeschoss
          predefined_selections:
            - id: 23
              outline:
                - - 23978
                  - 30172
                - - 23935
                  - 29568
                - - 24151
                  - 29525
                - - 24151
                  - 27068
                - - 24108
                  - 24999
                - - 25918
                  - 25042
                - - 25961
                  - 28534
                - - 26392
                  - 28534
                - - 26349
                  - 30388
                - - 25444
                  - 30431
                - - 25401
                  - 30646
                - - 24366
                  - 30646
                - - 24323
                  - 30388
              label:
                text: Flur
                x: 24975
                'y': 27591
                offset_y: 25
              icon:
                name: mdi:floor-lamp-torchiere
                x: 24975
                'y': 27591
            - id: 19
              outline:
                - - 21995
                  - 28620
                - - 23892
                  - 28663
                - - 23892
                  - 29525
                - - 23935
                  - 30215
                - - 22168
                  - 30344
                - - 22125
                  - 29482
                - - 21952
                  - 29525
              label:
                text: Badezimmer
                x: 22932
                'y': 29539
                offset_y: 25
              icon:
                name: mdi:bathtub
                x: 22932
                'y': 29539
            - id: 18
              outline:
                - - 23069
                  - 21675
                - - 25504
                  - 21675
                - - 25504
                  - 23756
                - - 23069
                  - 23756
              label:
                text: Sofa Teppich
                x: 24193
                'y': 22754
                offset_y: 25
              icon:
                name: mdi:rug
                x: 24193
                'y': 22754
            - id: 21
              outline:
                - - 27326
                  - 26637
                - - 27326
                  - 23189
                - - 30229
                  - 23189
                - - 30229
                  - 26637
              label:
                text: Tisch Teppich
                x: 28677
                'y': 25387
                offset_y: 25
              icon:
                name: mdi:rug
                x: 28677
                'y': 25387
            - id: 20
              outline:
                - - 26131
                  - 27243
                - - 30235
                  - 27243
                - - 30235
                  - 26669
                - - 27326
                  - 26669
                - - 27326
                  - 23303
                - - 30194
                  - 23303
                - - 30235
                  - 21497
                - - 29496
                  - 20676
                - - 22683
                  - 20635
                - - 22683
                  - 20923
                - - 22109
                  - 20923
                - - 22068
                  - 21785
                - - 25515
                  - 21826
                - - 25597
                  - 24781
                - - 26049
                  - 24781
              label:
                text: Wohnzimmer
                x: 27427
                'y': 22111
                offset_y: 25
              icon:
                name: mdi:table-chair
                x: 27427
                'y': 22111
            - id: 23
              outline:
                - - 26090
                  - 28405
                - - 27125
                  - 28405
                - - 27168
                  - 29913
                - - 29280
                  - 29913
                - - 29668
                  - 29568
                - - 29625
                  - 27887
                - - 28504
                  - 27844
                - - 28504
                  - 27241
                - - 26047
                  - 27284
              label:
                text: Küche
                x: 28246
                'y': 29310
                offset_y: 25
              icon:
                name: mdi:table-chair
                x: 28246
                'y': 29310
        - template: vacuum_clean_zone
        - template: vacuum_follow_path
        - template: vacuum_goto
  - type: conditional
    conditions:
      - entity: binary_sensor.roborock_downstairs
        state: 'off'
    card:
      type: custom:xiaomi-vacuum-map-card
      entity: vacuum.roborock_s6_maxv
      language: de
      camera: camera.xiaomi_cloud_map_extractor
      title: Roborock S6 Obergeschoss
      map_source:
        camera: camera.xiaomi_cloud_map_extractor
      calibration_source:
        camera: true
      append_icons: true
      icons:
        - icon: mdi:home-floor-0
          tooltip: Erdgeschoss
          tap_action:
            action: call-service
            service: vacuum.send_command
            service_data:
              entity_id: vacuum.roborock_s6_maxv
              command: load_multi_map
              params: 0
        - icon: mdi:home-floor-1
          tooltip: Obergeschoss
          tap_action:
            action: call-service
            service: vacuum.send_command
            service_data:
              entity_id: vacuum.roborock_s6_maxv
              command: load_multi_map
              params: 1
      vacuum_platform: default
      map_locked: true
      map_modes:
        - template: vacuum_clean_segment
          repeats_type: EXTERNAL
          max_repeats: 3
          service_call_schema:
            service: vacuum.send_command
            service_data:
              command: app_segment_clean
              entity_id: '[[entity_id]]'
              params:
                - segments: '[[selection]]'
                  repeat: '[[repeats]]'
          name: Obergeschoss
          predefined_selections:
            - id: 24
              outline:
                - - 27342
                  - 24886
                - - 28062
                  - 24886
                - - 28100
                  - 23863
                - - 28290
                  - 23749
                - - 31474
                  - 23749
                - - 31474
                  - 20262
                - - 27418
                  - 20338
                - - 27380
                  - 23332
                - - 26735
                  - 23370
                - - 26698
                  - 24204
              label:
                text: Schlafzimmer
                x: 29802
                'y': 22254
                offset_y: 25
              icon:
                name: mdi:bed-king
                x: 29802
                'y': 22254
            - id: 24
              outline:
                - - 28469
                  - 25204
                - - 28428
                  - 24134
                - - 31515
                  - 24134
                - - 31474
                  - 24751
                - - 30651
                  - 25492
                - - 30239
                  - 25204
                - - 29786
                  - 25245
                - - 29786
                  - 25781
                - - 30733
                  - 26769
                - - 31515
                  - 26810
                - - 31474
                  - 28251
                - - 30939
                  - 27674
                - - 30033
                  - 28374
                - - 28428
                  - 28374
              label:
                text: Badezimmer
                x: 29704
                'y': 27551
                offset_y: 25
              icon:
                name: mdi:hot-tub
                x: 29704
                'y': 27551
            - id: 25
              outline:
                - - 26169
                  - 25463
                - - 25917
                  - 25463
                - - 25455
                  - 25001
                - - 25455
                  - 24077
                - - 25581
                  - 24035
                - - 25581
                  - 23909
                - - 26337
                  - 23951
                - - 27303
                  - 24959
                - - 28101
                  - 24917
                - - 28269
                  - 24959
                - - 28227
                  - 26135
                - - 26169
                  - 26135
              label:
                text: Flur
                x: 27114
                'y': 25816
                offset_y: 25
              icon:
                name: mdi:floor-lamp-torchiere
                x: 27114
                'y': 25816
            - id: 26
              outline:
                - - 25437
                  - 25019
                - - 25982
                  - 25606
                - - 26024
                  - 25858
                - - 25647
                  - 25900
                - - 25563
                  - 28330
                - - 24892
                  - 28288
                - - 24850
                  - 27366
                - - 22964
                  - 27366
                - - 22964
                  - 27995
                - - 21707
                  - 27911
                - - 21707
                  - 25900
                - - 22126
                  - 25900
                - - 22084
                  - 24726
                - - 21707
                  - 24768
                - - 21665
                  - 24517
                - - 22839
                  - 24517
                - - 22839
                  - 24642
                - - 25186
                  - 24684
                - - 25228
                  - 24852
              label:
                text: Gästezimmer
                x: 23677
                'y': 26612
                offset_y: 25
              icon:
                name: mdi:bed-king
                x: 23677
                'y': 26612
card_mod:
  style: |
    ha-card {
      display: flex !important;
      align-items: stretch;
      flex-wrap: wrap;
      justify-content: space-evenly;
    }
    #map-wrapper {
      flex-grow: 3;
      width: 600px;
    }
    .controls-wrapper {
      flex-grow: 1;
      width: 100px;
    }
    .room-wrapper {
    --map-card-internal-room-label-color: white;
    --map-card-internal-room-label-font-size: 16px;
    }
    - template: vacuum_clean_zone
    - template: vacuum_follow_path
    - template: vacuum_goto

Error:
Konfigurationsfehler erkannt:
duplicated mapping key (10:5)

I would like a SidebySide like the Picture

and therefore have the code from here: https://pastebin.com/R6Nserh3
but I have tried everything now and I either get an error or the view is not sidebySide. Can anyone tell me what I am doing wrong? Unfortunately, I am still a complete beginner.

yoda98mnt · 2022-11-11T09:18:33Z

Has anybody fixed the card-mod Side-by-Side View?. I've tried many things, but it still won't work.

I have it like this -> https://pastebin.com/CYpaE3f3

Thanks for your tips, I copied the code from you, but I end up with a very small map. I've tried different ways, but the map is always small. What is your advice?
https://pastebin.com/R6Nserh3

Hello, I have now finally managed that both cards are next to each other. Unfortunately I still have a problem, the map is centered. As you can see in the post above it also works that you move it to the left. My question what do I have to do so that the map is left?

ecstasy88 · 2022-11-23T13:28:33Z

Has anybody fixed the card-mod Side-by-Side View?. I've tried many things, but it still won't work.

I have it like this -> https://pastebin.com/CYpaE3f3

Thanks for your tips, I copied the code from you, but I end up with a very small map. I've tried different ways, but the map is always small. What is your advice? https://pastebin.com/R6Nserh3

Hello, I have now finally managed that both cards are next to each other. Unfortunately I still have a problem, the map is centered. As you can see in the post above it also works that you move it to the left. My question what do I have to do so that the map is left?

yeah, i also have this issue, no matter what i try

yoda98mnt · 2022-12-05T06:35:53Z

I got it to work with this:

card_mod:
          style: |
            ha-card {
              display: flex !important;
              align-items: stretch;;
              flex-wrap: wrap;
              width: 95%;
              margin-left: -20vw;
            }
            #map-wrapper {
              flex-grow: 3;
              width: 65px;
            }
            .controls-wrapper {
              flex-grow: 1;
              width: 80px;
            }
            .room-wrapper {
            --map-card-internal-room-label-color: red;
            --map-card-internal-room-label-font-size: 20px;
            }
            .map-controls {
                width: 58% !important;        
 }

This Point is important:
margin-left: -20vw;
This will move the entire card to the left. Not pretty, but works.

ecstasy88 · 2022-12-05T07:28:07Z

hi,

thanks for the reply.
in the mean time, i managed to arange it with place-content: center for the layout, it turned out ok.

13860605362 · 2023-09-28T10:17:09Z

I also encountered a layout issue. I am unsure whether this is a bug or if I am not using it correctly. The problem arises when attempting to use the layout-card to set the width of the card to fill the entire screen. This results in a noticeable offset of the Map modes options, as shown in the attached image.

it's my config

type: custom:layout-card
layout_type: custom:vertical-layout
style:
  left: 58.5%
  top: 51%
layout:
  width: 900
cards: 
  - type: custom:xiaomi-vacuum-map-card
    map_source:
      camera: camera.dreamebot_s10_map
    calibration_source:
      camera: true
    entity: vacuum.dreamebot_s10
    vacuum_platform: Tasshack/dreame-vacuum
    map_locked: true

PiotrMachowski · 2023-09-28T10:21:53Z

@13860605362 how does fan speed menu work?

13860605362 · 2023-09-28T10:33:57Z

风扇速度菜单如何工作？

It has the same issue, the position is incorrect.

mcfly2283 added the enhancement New feature or request label Nov 18, 2021

mcfly2283 assigned PiotrMachowski Nov 18, 2021

PiotrMachowski mentioned this issue Dec 7, 2021

Better design for panel mode #247

Closed

PiotrMachowski mentioned this issue May 8, 2022

Horizontal layout of the map and control #394

Closed

pillemats mentioned this issue Nov 3, 2023

Can not change Map Size --> Dreame L20 Ultra #674

Closed

3 tasks

Feature Request: Card Side by Side #183

Feature Request: Card Side by Side #183

Comments

mcfly2283 commented Nov 18, 2021 • edited

Description

Solution

Alternatives

Context

PiotrMachowski commented Nov 18, 2021

PiotrMachowski commented Nov 18, 2021 • edited

mcfly2283 commented Nov 18, 2021

PiotrMachowski commented Nov 18, 2021 • edited

mcfly2283 commented Nov 18, 2021 • edited

PiotrMachowski commented Nov 18, 2021

mcfly2283 commented Nov 18, 2021 • edited

PiotrMachowski commented Nov 18, 2021

tempmaseg commented Nov 19, 2021 • edited by PiotrMachowski

mcfly2283 commented Nov 19, 2021 • edited

tempmaseg commented Nov 19, 2021

Denow commented Nov 20, 2021

PiotrMachowski commented Nov 20, 2021

mcfly2283 commented Nov 22, 2021

shred86 commented Dec 5, 2021

idogrf commented Dec 5, 2021

PiotrMachowski commented Dec 5, 2021

mcfly2283 commented Dec 5, 2021

kimme1024 commented Dec 9, 2021

PiotrMachowski commented Dec 9, 2021

kimme1024 commented Dec 9, 2021

PiotrMachowski commented Dec 9, 2021

kimme1024 commented Dec 9, 2021

ddmmcz commented Jan 3, 2022 • edited

mcfly2283 commented Jan 4, 2022 • edited

ddmmcz commented Jan 4, 2022

Ender3Pro commented Jan 17, 2022

ddmmcz commented Jan 21, 2022 • edited by PiotrMachowski

mcfly2283 commented Jan 22, 2022 • edited by PiotrMachowski

ddmmcz commented Jan 22, 2022 • edited

mcfly2283 commented Jan 22, 2022

Sysoev86 commented May 8, 2022 • edited

PiotrMachowski commented May 8, 2022

PiotrMachowski commented May 8, 2022

mcfly2283 commented May 10, 2022 • edited

PiotrMachowski commented May 10, 2022

mcfly2283 commented May 10, 2022

PiotrMachowski commented May 10, 2022

mcfly2283 commented May 11, 2022

PiotrMachowski commented May 11, 2022

mattdevo1 commented Jul 14, 2022 • edited

yoda98mnt commented Nov 3, 2022 • edited by PiotrMachowski

yoda98mnt commented Nov 11, 2022

ecstasy88 commented Nov 23, 2022

yoda98mnt commented Dec 5, 2022 • edited by PiotrMachowski

ecstasy88 commented Dec 5, 2022

13860605362 commented Sep 28, 2023

PiotrMachowski commented Sep 28, 2023

13860605362 commented Sep 28, 2023

mcfly2283 commented Nov 18, 2021 •

edited

PiotrMachowski commented Nov 18, 2021 •

edited

PiotrMachowski commented Nov 18, 2021 •

edited

mcfly2283 commented Nov 18, 2021 •

edited

mcfly2283 commented Nov 18, 2021 •

edited

tempmaseg commented Nov 19, 2021 •

edited by PiotrMachowski

mcfly2283 commented Nov 19, 2021 •

edited

ddmmcz commented Jan 3, 2022 •

edited

mcfly2283 commented Jan 4, 2022 •

edited

ddmmcz commented Jan 21, 2022 •

edited by PiotrMachowski

mcfly2283 commented Jan 22, 2022 •

edited by PiotrMachowski

ddmmcz commented Jan 22, 2022 •

edited

Sysoev86 commented May 8, 2022 •

edited

mcfly2283 commented May 10, 2022 •

edited

mattdevo1 commented Jul 14, 2022 •

edited

yoda98mnt commented Nov 3, 2022 •

edited by PiotrMachowski

yoda98mnt commented Dec 5, 2022 •

edited by PiotrMachowski