(Simple) MainUI layout question - full width component

Add-ons UIs
,
1

I have a simple question regarding a page in MainUI. I would like to have a page that only consists of an oh-webframe showing another website. So far I have only managed to have a rather narrow frame. I have tried with oh-webframe-card and oh-webframe and different combinations of Masonry and block.
Any hints or help appreciated how to get the webframe consuming all available width.
Dominik

config: {}
blocks: []
masonry:
  - component: oh-masonry
    config: {}
    slots:
      default:
        - component: oh-webframe-card
          config:
            src: https://homeserver.local/habapp/device_viewer
            height: 600
grid: []
canvas: []

image
image1163×809 54.1 KB

image
image1408×1217 84.8 KB

2

For my version of this, I don’t even bother with the oh-webframe. There are fewer style issues if you just go right to a basic iframe:

config:
  icon: f7:square_list
  label: Web Viewer Page
  layoutType: responsive
  sidebar: true
  stylesheet: |
    .oh-block {
      margin: 0 !important;
      padding: 0;
    }
  visibleTo:
    - role:administrator
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: iframe
                      config:
                        src: URL_GOES_HERE
                        style:
                          border: none
                          height: calc(100vh - var(--f7-navbar-height) - var(--f7-tabbar-labels-height) -
                            var(--f7-safe-area-top))
                          margin: 0
                          padding: 0
                          width: 100%
masonry: []
grid: []
canvas: []

The height, as you can see, is the tricky part. You can’t use a set percentage because of all the F7 variables that go into building the main page so you have to calculate it from those variables.

1 Like
3

Perfect. Works like a charm!