UI Page - Can You Remove Margin?

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

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

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

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

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

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.

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

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

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

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

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

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!

1 Like

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.

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:

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

please post your yaml code for the page

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

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

Running Openhab 3.2.0

Regards.

I have been using this full screen to act like a ‘photo frame’. There may be a better way but this one seems to work for me. This is for a specific screen resolution 1920x1080

config:
  layoutType: fixed
  screenWidth: 1920
  screenHeight: 1080
  scale: false
  hideNavbar: true
  hideSidebarIcon: true
  showFullscreenIcon: false
  colNum: 1
  margin: 0
  label: Main Photo Page
  sidebar: true
blocks: []
masonry: null
grid:
  - component: oh-grid-item
    config:
      x: 0
      y: 0
      h: 1
      w: 1
    slots:
      default:
        - component: widget:widget_photoframe
canvas: null

I believe that you have to resort to css to get rid of that border on the fixed layout pages. Add a stylesheet parameter like this to the page config:

config:
  layoutType: fixed
  fixedType: canvas
  label: Wall Mount
  sidebar: true
  stylesheet: |
    .oh-canvas-layout-container div img {
      visibility: hidden;
    }
3 Likes

maybe this helps