UI Page - Can You Remove Margin?

Richie1972 · November 26, 2021, 9:14pm

Hi,
I’m still playing around with some page layouts and I’m trying to get a widget to fill the whole page.
However, I still get a border around it:

See the gaps (1) and (2).
The page is:

config:
  label: PanelV2DEV
  layoutType: responsive
  style:
    height: 100%
    margin: 0px
  sidebar: true
  hideNavbar: true
  order: "12"
blocks: []
masonry:
  - component: oh-masonry
    config:
      cols:
        "768": 1
        "1023": 1
        "1280": 1
        default: 1
      style:
        margin: 0px
    slots:
      default:
        - component: f7-row
          config:
            style:
              height: 700px
          slots:
            default:
              - component: widget:PanelV2DEV
grid: null

It’s only being designed for a single sized tablet, so I’m not worrying about any resizing “weirdness” it would produce.

The widget has this:

uid: PanelV2DEV
tags: []
timestamp: Nov 26, 2021, 8:49:42 PM
component: f7-card
config:
  style:
    padding: 20px
    margin: 0px auto
    width: 100%
    height: 650px
    background-image: -webkit-linear-gradient(rgba(143,188,143,0.6) 0%,rgba(143,188,143,0.3) 100%),url("https://openhab.domain.com/webres/background/cog-board.jpg")
    background-size: 100% 100%

The padding ensures there’s a gap between background image and the rest of the widget (would also prevent content of the widget from being right up to edge of screen if it worked).
Why do it like this?
As you can’t change the background of a page with variables/expressions, but you can change the backgrounds on widgets, this is my attempt to get around the issue.
My knowledge of CSS and, especially, how to use it with the OH3 UI is relatively limited, so I’m hoping someone can suggest a way to do this (or categorically confirm it can’t be done).

Thanks,
Richie

Tallman · November 27, 2021, 11:54am

Use the canvas layout, it has a full screen function

Richie1972 · November 27, 2021, 2:16pm

Hi,
Canvas layout?
Is that in the new 3.2 release? If so, then looks like my next job is upgrade my 3.1
I’ve tried the block and responsive/masonry layouts and my post above shows the results of that.
I’ve started playing with some “dirty” css with mixed results (negative margins and other horrors)

Thanks,
Richie

Tallman · November 27, 2021, 5:34pm

Yes, been since 3.2, always new futures from snapshots to snapshots there are .

Oliver2 · November 27, 2021, 6:10pm

“Fixed layout” also has the support for this.
You can provide x and y coordinates

Oliver2 · November 27, 2021, 6:27pm

In case you want to stick with your existing layout, add the following to the page’s config section:

  style:
    --f7-card-margin-horizontal: 0px
    --f7-block-padding-horizontal: 0px

Richie1972 · November 27, 2021, 8:55pm

Hi,
Thanks Oliver.
I’ve now upgraded to:
openHAB 3.2.0 Build #2595

Your suggestion (below) fixes horizontal, but not vertical in my page:

  style:
    --f7-card-margin-horizontal: 0px
    --f7-block-padding-horizontal: 0px

Adding:

    --f7-card-margin-vertical: 0px
    --f7-block-margin-vertical: 0px

Makes no difference.

Utlising the new Canvas layout I get this:
openhab-canvas

config:
  label: PanelV2DEV3
  sidebar: true
  layoutType: fixed
  fixedType: canvas
  style:
    height: 900px
    width: 1600px
blocks: []
masonry: null
grid: []
canvas:
  - component: oh-canvas-layer
    config: {}
    slots:
      default:
        - component: oh-canvas-item
          config:
            x: 0
            y: 0
            h: 900
            w: 1600
          slots:
            default:
              - component: widget:PanelV2DEV
                config: {}

I’m not sure what to try next - is there any documentation for these new features?

Thanks,
Richie

Oliver2 · November 27, 2021, 10:14pm

reduces the space by 16px.
No idea what else can be done.
In Chrome hit F12 and try to find the css style which creates the rest of the space

Tallman · November 28, 2021, 9:00am

This is an error, if a widget has a 0 at x / y, it will be moved to the next grid value.
you simply have to set x / y to 1 in code mode.

Richie1972 · November 28, 2021, 3:15pm

Hi,
Ah, so my mistake was assuming it was starting at 0, when it starts at 1?
I will look at that tonight.

Thanks,
Richie

Richie1972 · November 28, 2021, 3:19pm

Hi Oliver,
I did that whilst trying to identify the problem and it seemed to be in the same div element that the other css items on this post were being added.

Thanks,
Richie

Richie1972 · November 28, 2021, 8:43pm

Hi Tallman,
Ok, so adjusted some settings like so:

config:
  label: PanelV2DEV3
  sidebar: true
  hideNavbar: true
  layoutType: fixed
  fixedType: canvas
blocks: null
masonry: null
grid: null
canvas:
  - component: oh-canvas-layer
    config: {}
    slots:
      default:
        - component: oh-canvas-item
          config:
            x: 1
            y: 1
            h: 1200
            w: 1920
          slots:
            default:
              - component: widget:PanelV2DEV
                config: {}

Which is better, but still has space to the left:
OpenHab-canvas-left-space
This space is in both Edge and Chrome, full and “normal” screen.
When using the Developer Tools (F12) I can see the elements broken down like this:
class=“oh-canvas-layout”

<div class="oh-canvas-layout-container" style="user-select: auto; width: 1280px; height: 720px; transform: scale(1); text-align: center; position: relative; --oh-canvas-item-box-shadow:0px 0px 4px 2px #444; --oh-canvas-item-svg-shadow:drop-shadow(0px 0px 4px #444); --oh-canvas-item-text-shadow:#444 0px 0px 4px;">

is this:

Within that div is this div:

<div style="height: inherit; width: inherit; position: absolute; top: 0px; left: 0px;"><img class="oh-canvas-background">

I’m not sure whether it’s something I’m doing wrong (very likely) or a bug.

Thanks,
Richie

Richie1972 · November 29, 2021, 7:50am

Hi,
Ok, so I’ve now got it working.
I just needed to tweak the screenwidth and width values until the panel would correctly fit on my tablet screen:

config:
  label: PanelV2DEV3
  screenWidth: 1280   <== this value
  screenHeight: 800
  scale: false
  sidebar: true
  hideNavbar: true
  layoutType: fixed
  fixedType: canvas
blocks: null
masonry: null
grid: null
canvas:
  - component: oh-canvas-layer
    config: {}
    slots:
      default:
        - component: oh-canvas-item
          config:
            x: 1
            y: 1
            h: 800
            w: 1240   <== this value
          slots:
            default:
              - component: widget:PanelV2DEV
                config: {}

Thanks for your help,
Richie

ysc · November 29, 2021, 8:17am

@tarag I see @Confectrician merged the PR but unless I’m mistaken it’s still missing some explanation about the layers feature.

as 3.2 will be released in probably less than a month now it would be nice to have it in the docs by then!

tarag · November 29, 2021, 7:39pm

Yes, I have some plans to make a canvas layout by then. Hopefully I’ll have time and write some docs at the same time.

L777 · February 25, 2022, 8:54am

Hi, Is there any news on this feature? I’m using 3.2.0 but I’m not able to remove the white external border in cavass layout in any way, I’m trying everything, the only alternative for a tablet is to use Habpanel, buit I really would like to use mainui instead. Thanks in advance.
This is what I’m talking about:

nikos7179 · February 26, 2022, 12:48pm

Me too, i dont know how to remove this border.

Oliver2 · February 26, 2022, 4:37pm

please post your yaml code for the page

L777 · February 27, 2022, 4:20pm

Hi, this is the code, it’s nothing more than create a new page and choose a fixed canvass layout:

config:
  layoutType: fixed
  fixedType: canvas
  label: test_CanvassPage
blocks: []
masonry: null
grid: []
canvas:
  - component: oh-canvas-layer
    config: {}
    slots:
      default:
        - component: oh-canvas-item
          config:
            x: 20
            y: 20
            h: 150
            w: 200
          slots:
            default:
              - component: oh-label-card
                config:
                  title: Test Label Card
                  footer: Footer
                  action: command
                  actionCommand: MyCommand
                  item: myItem

DeeZett · April 8, 2022, 10:12pm

Hello there,
same here. Don’t know how to remove the white border, too.

Running Openhab 3.2.0

Regards.