Remove border from fixed canvas layout

Add-ons UIs
1

Hello,
I use a fixed canvas page to fill a “magic mirror”. Unfortunately, a white border is created around the page. Is there a way to remove this?

Screenshot 2022-07-22 092837
Screenshot 2022-07-22 0928371654×1031 176 KB

2

FWIW. Consider interrogating (F12 → inspect html section) and perhaps you can overide it via a CSS in your static html directory. Check also UI Page - Can You Remove Margin? - #9 by Tallman

3

Thank you for the hint!

the code form @JustinG did the trick:

  stylesheet: |
    .oh-canvas-layout-container div img {
      visibility: hidden;
    }

but it also removes the album cover in the top right (Rock Antenne). Is there a way to remove only the white borders?

1 Like
4

Perhaps borders and picture, are part of the same entity (aka. background picture)… try to inspect via F12 (firefox) & check the entities and find your way to (if any) the css to be overriden.

5

That’s strange, I wonder why. As along as the album cover is a widget on the canvas, I don’t think there’s a reason that hiding the background image should result in any change, there.

There is completely different way to do this other than the css that hides the element.

The border itself is not actually part of the layout page at all, and therefore cannot be impacted by css. The layout page has an <img> element that is used if the user sets a background image for the layout. If the user does not define a background image then the <img> element persists but without a source image and most modern browsers have a feature where an image element without a source is rendered as a blank box with a thin outline. So the problem here is that the browser is adding that border not OH.

That means that the only solution is to actually have a background image. But, if you don’t want to see a background image on your page then you just have to be a little creative. Just create a small, image in a format that allows transparency (e.g., png) and make sure the whole image is just transparent pixels. Save that image to the [OH_CONF]/html directory. Now you can set that transparent image as the background of the layout by referencing /statc/[name of image file]. For example:

image
image615×627 32.8 KB

1 Like
6

Thank you, @JustinG! The Wallpaper is the better and more easier solution and has no side effects to the ohther img widget :slight_smile:

7

Trying to get rid of the white border in code section with using a small transparent png image link. Unfortuntely it dont get it work.
image path is:

/etc/openhab/html/transparent_144_144.png

config of page canvas:

config:
  fixedType: canvas
  grid: 10
  gridEnable: true
  hideNavbar: true
  hideSidebarIcon: true
  label: overview
  layoutType: fixed
  scale: false
  screenHeight: 1920
  screenWidth: 1080
  showFullscreenIcon: false
  sidebar: true
  style:
    --f7-block-padding-horizontal: 0px
    --f7-navbar-height: 0
    background: url('/static/transparent_144_144.png')
    background-attachment: fixed
  stylesheet: |
    :root {
      touch-action: pan-x pan-y;
      height: 100% 
    }
blocks: []
masonry: null
grid: []
canvas:
  - component: oh-canvas-layer
........
8

This is not how you set the background within the canvas page. If you read closely up above, the canvas actually creates an <img> element to show the image which is defined using the imageUrl property. This is not the same as setting the background of the canvas element itself with css. So, your code still shows the border because the <img> element is still there’ it’s just blank.

1 Like
9

Thank you.

imageUrl: ="/static/transparent_144_144.png"
10

Thank you! This solved my problem too! :slight_smile: Maybe we can fix it so when imageurl is not defined, that image element isn’t rendered at all!

This could just be

imageUrl: /static/transparent_144_144.png

In my case, I used https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png

11