OH4 Hide components on small screen devices

Hi All

Is there a “simple” expression that could be used to “hide” content for example on an oh-cell when the screen size is small to prevent overflows etc?

My use case would be with the following oh-cell


This displays perfectly on a larger screen, however on a device etc the result is less than pretty:


So My idea was to simply use the visible: ... expression to not display the extra information on small screens. Just don’t know what I could use in the expression or if this even at all possible.

You’re on OH4 so your widget expressions have access to the screen object:

In this case you probably just want visible to be some simple boolean involving the viewAreaWidth property.

visible: =(screen.viewAreaWidth >= 800)

If the problem really is between desktop and mobile devices, however, then the other option may just be to use the device object with has a desktop property that is true if the viewer agent is a desktop browser and false if it is a mobile browser.

visible: =device.desktop

Hi there,
unfortunatly, both expressions are not working for me to display widgets only on screens above a certain size. Can anybody confirm that “screen.viewAreaWidth” is actually working within the OpenHab App ?
If I simply try to display/read-out the value returned by this expression in the customer widget’s editor, a plausible value fitting to my Desktop screen (~3000) is shown, however opening the Main UI on the tablet/phone via the app consinstently returns a 0 and hence kind of explains why I am not succesful limiting the widget’s appearence to large screens.

Any ideas ? :slight_smile:

Best regards,

The following works for me:

    - component: f7-block
          height: 25px
          margin: 0
          padding: 0
          position: absolute
          top: 12px
          width: 100%
        visible: =(screen.viewAreaWidth >= 1800)

Which app?

Strange, definitly not working for me:

  • in the custom widget preview it is working and if I reseize the browser windows i can make it vanish depending on the size
  • in the browser Main UI it is always hidden, no matter the size of the browser window
  • in the Open Hab Android App as well always hidden, even if opening it on a big tablet screen

Attached some screenshots:

Print-out of the screen.viewAreaWidth to a label element with the following command:
2023-11-05 11_42_41-openHAB

Custom Widget Preview…size is presented and responsive to re-scaling of the browser:

Browser Main UI…number is always zero and the component with which I am testing (oh-clock card) and to which I applied the expression you stated is always hidden:
2023-11-05 11_43_24-openHAB

Are there any other settings that I am not aware of, in order to allow the screen.viewAreaWidth to be filled with a value, since I noticed that the value is always 0 (except in the custom widget preview).

Maybe share your YAML code in code fences?
Which page are you doing this on? I have seen some odd behavior on the Overview page. Maybe try on a different page to test?

EDIT: The following works for me on the Overview Page , though the layout of the oh-clock-card needs some work. I have tested in browser and using the Android APP:

component: oh-cell
config: {}
    - component: Label
          align-self: center
        text: =screen.viewAreaWidth
    - component: oh-clock-card
        dateFontSize: 25px
        dateFontWeight: 500
        dateFormat: LL
        datePos: below
        showDate: true
          margin: 0
          padding: 0
        timeFontSize: 35px
        timeFontWeight: 700
        visible: =(screen.viewAreaWidth >= 360)
uid: Time Widget
tags: []
    - description: "| Toggle if you want to hide on smartphone view"
      label: Hide on Small Screen
      name: HideOnSmallScreen
      required: true
      type: BOOLEAN
      groupName: General
    - name: General
      label: General Settings
timestamp: Nov 4, 2023, 8:18:00 PM
component: f7-card
  #thats what I want to achieve, since it is not working I take step by step approach:
  #visible: "=props.HideOnSmallScreen === true && screen.viewAreaWidth <= 568px ? false : true"
    background-color: rgb(40,40,40)
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
      - padding: 0px
    height: 280px
    margin-left: 5px
    margin-right: 5px
    - component: f7-block
          padding-left: 15px
          padding-right: 15px
          width: 100%
          position: absolute
          - component: Label
                font-size: 20px
                font-weight: 400
                margin-left: 0px
                margin-top: 0px
                padding-bottom: 15px
              text: =screen.viewAreaWidth
          - component: oh-clock-card
              visible: =(screen.viewAreaWidth >= 480)
              background: rgb(40,40,40)
              dateFontSize: 30px
              dateFontWeight: normal
              dateFormat: dddd, D. MMMM
              datePos: above
              noShadow: true
              outline: false
              showDate: true
                padding-top: -100px
              timeFontSize: 60px
              timeFontWeight: bold
              timeFormat: HH:mm:ss
    - component: oh-link
        action: popup
        actionModal: ='page:' + props.page
          left: 0px
          position: absolute
          padding-top: 10px
          width: 100%

That seems to work on my system. All I have done is change the (screen.viewAreaWidth >= line to refer to 360.

How are you calling this widget?

I used an Personal Widget on the overview page as follows:

component: widget:Test_Time_Widget
config: {}
1 Like

Hi Mark,

I thought it worked, but no :frowning: After reloading the page it vanishes always, doesn’t matter on which device or browser or OH android app…so if I add the expression “visible: =(screen.viewAreaWidth >= 360)” the widget never shows

component: widget:Schmendrax_Time
  text_header: --- hier kommt Uhr und Datum ---
  visible: =(screen.viewAreaWidth >= 360)

Mine works on all the different browsers etc I tried. Even with your last option of hiding the entire widget, not just the oh-clock-card

Not sure if this could be a version issue? I am on a recent SNAPSHOT, prior to OH 4.1.M3. Otherwise I am out of ideas - Sorry.

K, I am on 4.0.3 Release Build…maybe that really is the problem. I will try again after the official update is coming and then will comment again whether that solved it :slight_smile:
Thanks Mark !

seems to be related to this:

Yes, I can confirm that it is resolved with the openHAB 4.1 release build :slight_smile: