Try to change header: to default:
Thanks - that makes the two chips dissapear.
Right. But if I also changed f7-chip to oh-button then I could get popup to display. Maybe this can lead you to some solution.
Great, yes that does help. Got to a similar point to my other work-around with a list. But now get this strange behavior when closing the popup.
When you close the popup you go through other pages - and not back to where you were.
Could be a bug in OH, similar happens to me when creating pages and widgets
Are you in “run mode” of the editor? Otherwise test it by launching the page from sidebar. Otherwise add your own “back” button by simply closing the popup.
If you
- create a button which spreads across the entire popup (to close the popup). Of course your light buttons need to be in the order after this close button.
- add
closeByBackdropClick: true
then you can click wherever you want and the popup closes
Thanks Oliver - I actually did the capture from the live page from the sidebar as I also suspected that may be an issue.
Not 100% clear on your proposal? The poped up widget does close, but goes through other pages and does not just close.
the basic idea is to test closing your popup with your own button.
if that is working then you could optimize it , that wherever you click, the popup closes.
but let’s do one step after the other
So I would create a button in the widget (as that is the popup), not in the oh-cell?
No sure how to create it across the entire popup?
Can you give me more of a clue please?
not tested:
component: f7-popup
config:
class:
- openPopup
closeByBackdropClick: true
slots:
default:
- component: oh-button
config:
action: popup
popupClose: .openPopup
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-pressed-bg-color: transparent
height: 100%
width: 100%
position: absolute
left: 0px
top: 0px
- component: oh-button
config:
label: Switch off light
this creates a popup which closes wherever you click (with exception of switch off light button)
Thanks Oliver. I have spent some time trying your suggestion, and unless I am missing something it does not seem to work for the issue I am seeing. I managed to create a cell with the popup as you suggested, but that does not close with a background click.
To summarize what I am now seeing:
-
Cell contains a list of “Rooms”. So click on Cell to bring up the list
-
Select a “Room” from the list to popup a widget (Universal widget for switch, dimmer, color items) with properties configured for that room to be able to control those specific light etc.
-
Widget pops up as expected and is 100% functional. All its internal popups work and close down as expected.
-
Click on <Back in widget popup to close the widget and return to the list then goes through the weird pages and then pack to the original launch page of the list (Not the list itself).
Also just realized that if I move the calling cell to my Overview Page (not my Overview - TEST page), the <Back takes me Back to the Overview - which is I guess not as bad as the round about from Overview - TEST.
Maybe there is a limitation from Overview that you can not return to the expanded cell and that gets messed up by my using an Overview - TEST page?
Hopefully one of the gurus out there will stumble on this and have an idea or solution.
Thanks for the suggestions.
Could you post your yaml code?
Sure, no problem.
My version of the widget - minor layout and language changes.
light switch widget.txt (27.6 KB)
Yaml for the cell in Overview (-TEST).
Overview List Cell.txt (2.4 KB)
Anything else let me know. Thanks
ok. The following is just for explaining purposes a concept - I didn’t take care about passing variables over to the popup.
Delete in List Cell
actionModal:
actionModalConfig:
and replace with:
popupOpen: .openPopup
edit your page, switch to code view and add the following code (you could also create another widget for this):
component: oh-block
config: {}
slots:
default:
- component: oh-grid-cells
config: {}
slots:
default:
- component: f7-popup
config:
class:
- openPopup
closeByBackdropClick: true
slots:
default:
- component: oh-button
config:
action: popup
popupClose: .openPopup
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-pressed-bg-color: transparent
height: 100%
width: 100%
position: absolute
left: 0px
top: 0px
- component: widget:ak_universal_switch_widget_v1
config:
header1: Switch off light
So this would be my Overview Page to edit in code view??
Can’t see where to add this to the Page though? Get errors no matter what I try.
Attached is my full Overview - TEST page. This includes teh modifications made to the Cell (I also removed the last two list items for testing
Overview Page .txt (100.4 KB)
Sorry to be a pain - but really not getting this 
No problem at all. It isn’t easy…
Edit Overview page, add a new block and click on the black icon to edit yaml code.
Then add the above block (I removed the “-”) so that it is easier for you to copy/paste
Still no luck. This is the end of my Overview Page:
left: 0px
top: 0px
- component: oh-button
config:
label: Switch off light
text: Some text
- component: oh-block
config: {}
slots:
default:
- component: oh-grid-cells
config: {}
slots:
default:
- component: f7-popup
config:
class:
- openPopup
closeByBackdropClick: true
slots:
default:
- component: oh-button
config:
action: popup
popupClose: .openPopup
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: transparent
--f7-button-pressed-bg-color: transparent
height: 100%
width: 100%
position: absolute
left: 0px
top: 0px
- component: widget:ak_universal_switch_widget_v1
config:
header1: Switch off light
masonry: []
grid: null
canvas: null
However nothing is displayed. And If I click on the initial Cell, just the expanded cell opens.
Actually - I think it might be working… Let me test for a bit and get back to you.
Please post the entire Overview page - I see some other test code above the last block.
Makes it easier to me to find the error.
On my side it is working.
Thanks Oliver. Does seem to be working. Just have to get the Widget Props across
I guess that would be the next step?
I have cleaned up the Overview - TEST-2 page (there was a lot of work in progress stuff there):
Overview - TEST 2 Popup Test.txt (2.7 KB)
excellent. Now you ave the main concept created. And I see that this weird “back” is also gone.
And yes, now the real work starts 
- From here on, you could move the popup to its own widget. But be carefull, it might not be working as expected. Quite a while ago I intentionally built in the popup directly into the page as there were some problem. But I cannot remeber…
Just as a side note out of experience. I was at the same stage as you where I wanted to do everything with generic items and provide all required information either through props or be getting them from css sheets embeddeed into the page. To have reusable code and just to refer to a page-wide parameter for color or shading or buttonpressedlabelcolorsounds professional, but once the page is done that advantage is gone.
I ended up doing the opposite: To have multiple specialised widgets with as less props as possible.