How to make a card fullscreen

[brucegl]

Hi,

I have a bunch of cards arranged as a grid on my screen, each with a button to make them fullscreen. The question is, what's the best approach for individually making them fullscreen (with a 'restore' button to make them turn back into a card).

This is a code snippet of what I tried. I've given Card.Root component an id, and called the requestFullscreen method on it. Looks ok so far, though I've got to toggle Maximise and Minimise appropriately

...
  import Maximize from 'lucide-svelte/icons/maximize';
  import Minimize from 'lucide-svelte/icons/minimize';
...
<div class="grid grid-cols-3 gap-2 border-x-8">
  <Card.Root id="map">
    <Card.Header class="px-2 pb-1 pt-3">
      <Card.Title>
        <div class="flex items-center">
          Map
          <div class="ml-auto flex-none">
            <DropdownMenu.Root>
              <DropdownMenu.Trigger asChild let:builder>
                <Button
                  variant="outline"
                  class="ml-auto mt-0 rounded-full border-0 px-3 pb-0 pt-0"
                  builders={[builder]}
                >
                  <Import class="h-4 w-4" />
                </Button>
              </DropdownMenu.Trigger>
              <DropdownMenu.Content>Under construction</DropdownMenu.Content>
            </DropdownMenu.Root>
            <Button
              variant="outline"
              class="ml-auto mt-0 rounded-full border-0 px-3 pb-0 pt-0"
              on:click={() => {
                let elem = document.querySelector('#map');
                console.log('elem', elem);
                if (!document.fullscreenElement && elem) {
                  elem.requestFullscreen().catch((err) => {
                    alert(
                      `Error attempting to enable fullscreen mode: ${err.message} (${err.name})`
                    );
                  });
                } else {
                  document.exitFullscreen();
                }
              }}
            >
              <Maximize class="h-4 w-4" />
              <!-- <Minimize class=" h-4 w-4" /> -->
            </Button>
          </div>
        </div>
      </Card.Title>
    </Card.Header>
...

Thanks
Gary

[brucegl]

I got min/max toggle working ok. The only issue is that fullscreenElement sets z-index to a high value... but that's a webAPI thing

[brucegl]

I gave up on the requestFullscreen and ended up changing styles on elements instead to get 'kindof' the desired effect, e.g.

elemId.style.position = 'fixed';
elemId.style.top = '0';
elemId.style.left = '0';
elemId.style.height = '100vh';
elemId.style.width = '100vw';

and then set to '' or elemId.style.removeProperty("position"); etc to revert.

This works fine for expanding/restoring the cards, however, there are some issues around leaflet and echarts card contents not expanding because they still operate like they are in a grid...something to solve for another time.