# OH3: Popup Window Size

**URL:** <https://community.openhab.org/t/oh3-popup-window-size/141565>\
**Category:** Beginners\
**Tags:** widget, popup, openhab3\
**Created:** [November 30, 2022, 9:15am UTC](https://community.openhab.org/t/oh3-popup-window-size/141565 "2022-11-30T09:15:38Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mark\_VG](https://community.openhab.org/letter_avatar_proxy/v4/letter/m/2acd7d/32.png) [@Mark\_VG](https://community.openhab.org/u/Mark_VG)\
**Post date:** [November 30, 2022, 9:15am UTC](https://community.openhab.org/t/oh3-popup-window-size/141565/1 "2022-11-30T09:15:38Z")

</div>

Currently running openHAB 3.4.0.M5.

Was wondering if anyone has found a way to configure the popup window size?

Calling Popup as follows:

```auto
component: oh-cell
config:
  header: Test Popup Size
  action: popup
  actionModal: widget:popup_test_size

```

with widget:

```auto
uid: popup_test_size
tags: []
props:
  parameterGroups: []
timestamp: Nov 30, 2022, 11:07:57 AM
component: f7-page
config:
  style:
    --f7-bars-translucent-blur: none
    --f7-bars-translucent-opacity: none
    --f7-card-margin-horizontal: 0px
    --f7-navbar-bg-color: transparent
    --f7-navbar-border-color: transparent
    --f7-navbar-font-size: 15px
    --f7-navbar-height: 35px
    --f7-navbar-link-color: white
    --f7-navbar-shadow-image: none
    --f7-navbar-text-color: white
    --f7-popup-tablet-width: 40px
    background-color: rgb(220,220,220)
    border-radius: 30px
    height: 200px
    left: 0px
    text-overflow: ellipsis
    top: 0px
    width: 200px

```

This pops up the following:

 ![image](https://community-openhab-org.s3.dualstack.eu-central-1.amazonaws.com/original/3X/5/9/593027ca29b197eeeed6f4b14f0fe9ef6183e9f1.png)

Is there any way with the newer updates to get the popup size to match the widget size?

---

<div class="post-metadata">

**Author:** ![JustinG](https://community.openhab.org/user_avatar/community.openhab.org/justing/32/55948_2.png) [@JustinG](https://community.openhab.org/u/JustinG)\
**Post date:** [November 30, 2022, 5:04pm UTC](https://community.openhab.org/t/oh3-popup-window-size/141565/2 "2022-11-30T17:04:36Z")

</div>

> [@Mark\_VG](#):
>
> Is there any way with the newer updates to get the popup size to match the widget size?

Not really if you are using the OH actions to open the popup. As you have seen, defining the f7 variables in the widget doesn’t work. That’s because the way f7 creates the popups at a much higher level than the widgets so the css from the widgets cannot “cascade” down to the popup. It’s possible that if you tried to define things like `--f7-popup-tablet-width` in the page config, then that might work, but it’ll apply to all the popups that happen on the page, which you probably don’t want.

To have full control over the appearance of the popup you have to build the popup manually using the `f7-popup`. There’s a quick example of how to do this in the updated docs:

> **[Creating Personal Widgets](https://next.openhab.org/docs/ui/personal-widgets.html#f7-components)**
>
> a vendor and technology agnostic open source automation software for your home

A `style` object added to the `f7-popup` config will have full effect on that popup and in the default slot, you can just continue to build a widget as you would at any other point including adding your own already defined widgets using the

```yaml
- component: widget:widget_name_here

```

syntax.

---

<div class="post-metadata">

**Author:** ![Mark\_VG](https://community.openhab.org/letter_avatar_proxy/v4/letter/m/2acd7d/32.png) [@Mark\_VG](https://community.openhab.org/u/Mark_VG)\
**Post date:** [December 1, 2022, 5:58am UTC](https://community.openhab.org/t/oh3-popup-window-size/141565/3 "2022-12-01T05:58:17Z")

</div>

> [@Mark\_VG](#):
>
> `widget:popup_test_size`

As usual, thanks Justin.

That helps a lot. I am however trying to call the popup directly from my Overview Page using an oh-cell (bypassing OH actions as per your example). This however makes it a two step opening and closing process:

![Popup Test](https://community-openhab-org.s3.dualstack.eu-central-1.amazonaws.com/original/3X/1/8/1881e67044599078b7be2001a4fc365e4b4808ca.gif)

Using the code as follows:

```auto
component: oh-cell
config:
  title: Popup Card
slots:
  default:
    - component: oh-link
      config:
        text: Open the popup
        popupOpen: .demo-pop
    - component: f7-popup
      config:
        class: demo-pop
        style:
          background-color: rgb(220,220,220)
          border-radius: 30px
          height: 500px
          text-overflow: ellipsis
          width: 500px
      slots:
        default:
          - component: widget:caddx_graphic_portrait_V6
            config:
              text: Close it again
              popupClose: .demo-pop

```

I can’t seem to get the f7-popup to call directly from the oh-cell.

Do you have any suggestions? The sizing etc of the popup however works great!

---

<div class="post-metadata">

**Author:** ![JustinG](https://community.openhab.org/user_avatar/community.openhab.org/justing/32/55948_2.png) [@JustinG](https://community.openhab.org/u/JustinG)\
**Post date:** [December 1, 2022, 5:12pm UTC](https://community.openhab.org/t/oh3-popup-window-size/141565/4 "2022-12-01T17:12:36Z")

</div>

> [@Mark\_VG](#):
>
> I can’t seem to get the f7-popup to call directly from the oh-cell.

Alas, there’s no way to make this work directly. The oh-cell family of components does not have the `popupOpen` etc. set of properties. In order to make something like this work smoothly for my own setup I just completely rebuilt an oh-cell style component from the base f7 parts which is a bit of a hassle.

You can do a pretty good job of simulating what you want by adding a button to the background of the cell and using the button’s `popupOpen` property instead.

```yaml
    - component: oh-cell
      config:
        ...
      slots:
        background:
          - component: oh-button
            config:
              style:
                height: 120px
                width: 100%
              popupOpen: .example-pop
    - component: f7-popup
      config:
        class: example-pop
      slots:
        default:
          ...

```

---

<div class="post-metadata">

**Author:** ![Mark\_VG](https://community.openhab.org/letter_avatar_proxy/v4/letter/m/2acd7d/32.png) [@Mark\_VG](https://community.openhab.org/u/Mark_VG)\
**Post date:** [December 2, 2022, 4:39am UTC](https://community.openhab.org/t/oh3-popup-window-size/141565/5 "2022-12-02T04:39:17Z")

</div>

> [@JustinG](#):
>
> You can do a pretty good job of simulating what you want by adding a button to the background of the cell and using the button’s `popupOpen` property instead.

Works just fine. Now just to sort out one little niggle that I can’t trace.

Seems like one of my cars if being populated and I can’t see where or how? Doesn’t happen when I don’t use this method, but will continue debugging and post a new thread if I don’t come right.

Thanks Justin