Width of oh-grid-cells

Oliver2 · May 6, 2021, 11:45am

I really like the design and functionality of oh-cells.
When creating a page with lots of oh-cells this looks awesome on a mobile phone. However, if you load this page on an iPad in landscape mode (wall-mounted device) you see 3 long-stretched cells:

I know that oh-grid-cells are not meant to be fixed (but responsive) but I think it it would be necessary to control the width of a grid-cell.
Unfortunately oh-grid-row does not support oh-cells, nor fixed layout pages. Furthermore I want to avoid recreating various cells by my own via custom widgets.

@ysc Yannick, may I ask you if there is a chance to get control of column width within a oh-grid-cells page or do you see any workaround as of today?
I certainly would open a thread on github but wanted to briefly ask you here before.

I have already seen a few discussions/questions around this so I thought it might be usefull to address this directly to you as.

wars · May 6, 2021, 12:02pm

I use oh-grid-col inside a oh-grid-row.

In the oh-grid-col I use this config

large: "25"
xlarge: "25"
medium: "33"
small: "50"
xsmall: "50"
width: "100"

Oliver2 · May 6, 2021, 4:28pm

no, this is about oh-grid-cells - not about oh-grid-rows/cols.
oh-grid-cells do not support width properties

muelli1967 · May 6, 2021, 4:55pm

I am using f7 cards with max-width setting but experiencing the same behavior although it bothers me not ( yet ) , I am using both oh-cells and f7-cards alongside each other even. The issue won’t be fixed if you if you re-create your widgets I suspect.

Oliver2 · May 6, 2021, 5:42pm

Yes, I did the same (and tried many other crazy widgets).
For learning all the possibilities MainUI provides, that was a good experience. But now I try to find a clean config with as little custom widgets as possible and as many standard compontens as possible.
Just for maintenance sake and I do not want to create for each single device type a different page.

Oliver2 · May 6, 2021, 5:46pm

interesting…
this seems to work:

component: oh-grid-row
config: {}
slots:
  default:
    - component: oh-grid-col
      config:
        width: "20"
      slots:
        default:
          - component: oh-label-cell
            config:

ysc · May 9, 2021, 9:15am

The cells were not originally intended to be configurable in size, certainly not individually. The sizes were chosen to accomodate various lengths of labels and state values, so you can mostly add cells with the “add from model” feature and they will look “good enough”.
They were designed to loosely mimic the Android 11 power menu which I like:

That being said I’m not opposed to a config parameter on the container (oh-grid-cells) to have a few size options (default, small, smaller, big, bigger…) to choose from, to have more dense grids of cells when relevant.

Oliver2 · May 9, 2021, 5:05pm

yep. on a mobile phone it really looks great as it is and as you can see, on a tablet in landscape mode it doesn’t.

and fantastic to hear that you are not opposed to add some size options.
if there is anything I can do (create a ticket, testing, etc) please let me know.
but to be honest, embedding an oh-cell into an oh-grid also does the job.
is there any reason why oh-cells are not available in oh-grids?

ysc · May 10, 2021, 9:23am

Cells are designed to be uniform in size in within their dedicated container. Grids allow individual control.

marco_hoefle · September 9, 2021, 3:49pm

Hi Oliver,
have you solved this?
I also want to work with oh-cells whenever possible. The width of a cell should be smaller in my case and thus more cells in one row.
Thanks
Marco

Oliver2 · September 9, 2021, 7:36pm

yes, I have.
Simply
add row
then
add column
and set the size of the column as if you want to add cards to your layout.
then switch into yaml code and add manually your cell.
in the end it should look like this:


blocks:
  - component: oh-block
    config:
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: oh-cell
                      config:
                        …
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: oh-cell
                      config:
                        …

marco_hoefle · September 10, 2021, 5:11pm

Hi Oliver,
that doesn’t work on my side.

This code doesn’t show any cells nor placeholders:

config:
  layoutType: responsive
blocks:
  - component: oh-block
    config: null
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: oh-cell
                      config:
                        title: test
masonry: null
grid: null

Oliver2 · September 10, 2021, 5:37pm

replace line 5

config: null

with

config: {}

marco_hoefle · September 10, 2021, 6:16pm

This was it, thank you Oliver

marco_hoefle · September 11, 2021, 6:46am

It is not quite what I want.
I am using the default oh-cells for light switches etc. Per default they are to wide and I’d prefer to have more cells in a row with a smaller width.
With the oh-grid-col approach it looks that way:

Oliver2 · September 11, 2021, 4:23pm

Hi Marco,
it works - don’t give up

You need to correctly set the col’s size to 100/AmountOfCells

- component: oh-grid-col
  config:
    width: "15"

I use the same page for both tablet and phone. On the phone I just want 2 cells in a row and 4 cells on a tablet. My setting for this is:

- component: oh-grid-col
  config:
    width: "50"
    xsmall: "25"

marco_hoefle · September 12, 2021, 5:26am

Thanks for the encouraging words
Yours looks really good. How did you achieve the “Bedeckt” cell? Did you write an own widget for that or is that possible with the standard cells?
Could you share the complete yaml code for that page please?

Oliver2 · September 12, 2021, 9:07am

Please see the yaml code below. It also contains the bedeckt cell. It is not (yet) moved into its own widget. This page is still under construction

I have seen in your screenshot, that you have two items for your CCT LED (ww/kw).
Have a look at the script I have written for this:
https://community.openhab.org/t/shelly-binding/56862/1655
and here is my widget code:

uid: my-cctled-cell
tags: []
props:
  parameters:
    - label: Label
      name: vLabel
      required: false
      type: TEXT
    - context: item
      label: Item
      name: vItem
      required: false
      type: TEXT
    - context: item
      label: CCT LED Item
      name: vItemCct
      required: false
      type: TEXT
    - label: Alt. command
      name: vCmdAlt
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Jun 3, 2021, 9:47:11 PM
component: oh-label-cell
config:
  label: =props.vLabel
  icon: '=(items[props.vItem].state == "0") ? "oh:slider-0" : "oh:slider-100"'
  color: '=(items[props.vItem].state == "0") ? "gray" : "white"'
  header: =items[props.vItem].state + "%"
  actionItem: =props.vItem
  action: toggle
  actionCommand: OFF
  actionCommandAlt: =props.vCmdAlt
  actionFeedback: ok
  on: true
  style:
    _--f7-card-expandable-bg-color: "#F3F3F3"
slots:
  default:
    - component: oh-repeater
      config:
        sourceType: array
        for: btn
        in:
          - label: An
            cmd: 100
          - label: 70%
            cmd: 70
          - label: 40%
            cmd: 40
          - label: Aus
            cmd: 0
        fragment: true
      slots:
        default:
          - component: oh-button
            config:
              actionItem: =props.vItem
              outline: false
              class:
                - display-flex
                - flex-direction-column
              style:
                height: 70px
                width: 230px
                margin-top: 20px
                --f7-button-bg-color: '=(items[props.vItem].state == loop.btn.cmd) ? "#C8C8C8" : "white"'
                --f7-button-pressed-bg-color: gray
                color: black
                font-size: 20px
                font-weight: 400
                border-radius: var(--f7-card-expandable-border-radius)
                box-shadow: var(--f7-card-expandable-box-shadow)
                --f7-button-text-transform: none
              text: =loop.btn.label
              action: command
              actionCommand: =loop.btn.cmd
    - component: oh-slider
      config:
        item: =props.vItemCct
        vertical: false
        min: 0
        max: 100
        label: true
        scale: false
        unit: "%"
        style:
          margin-top: 50px
          width: 230px
          --f7-range-size: 28px
          --f7-range-bar-size: 6px
          --f7-range-bar-border-radius: 2px
          --f7-range-knob-size: 30px
          --f7-range-knob-color: white
          --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)
          --f7-range-bar-active-bg-color: transparent
          --f7-range-bar-bg-color: linear-gradient(to right, rgba(255,177,110,1.0), rgba(227,255,255,1.0)
          --f7-range-label-size: 20px
          --f7-range-label-text-color: white

Here is the code of the page:

config:
  layoutType: responsive
  label: Home
  sidebar: true
  showFullscreenIcon: true
  hideNavbar: true
  hideSidebarIcon: true
  order: "1"
  style:
    --f7-navbar-height: 0px
blocks:
  - component: oh-block
    config:
      title: Wohnzimmer
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: widget:my-dimmer-cell
                      config:
                        vLabel: Esstisch
                        vItem: ShellyWZEsstischlampe_Helligkeit
                        vCmdAlt: 40
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: widget:my-dimmer-cell
                      config:
                        vLabel: Sofalampe
                        vItem: ShellyWZSofalampe_Helligkeit
                        vCmdAlt: 70
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: widget:my-dimmer-cell
                      config:
                        vLabel: Stehlampe
                        vItem: ShellyWZStehlampe_Helligkeit
                        vCmdAlt: 40
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: oh-label-cell
                      config:
                        label: =items.OWM_Aussentemperatur.displayState  + " / " +
                          items.OWM_GefuhlteTemperatur.displayState
                        header: =items.OWM_Wetterlage.state
                        footer: '="Sonne: " + dayjs(items.OWM_SunriseTime.state).format("HH:mm") + " - "
                          + dayjs(items.OWM_SunsetTime.state).format("HH:mm")'
                        color: gray
                        on: true
                        subtitle: '="Bewölkung: " + items.OWM_Bewolkung.displayState'
                        icon: ="oh:owm-" + items.OWM_IconID.state
                      slots:
                        default:
                          - component: Label
                            config:
                              text: items.OWM_Wind.displayState
                          - component: oh-image
                            config:
                              url: ="http://192.168.178.61:8080/icon/mymoon-" +
                                items.Mondphase.state.toString() + ".svg"
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: widget:my-rollershutter-cell
                      config:
                        vLabel: Terrasse
                        vItem: ShellyWZTurrollladen_Steuerung
                        vCmd: 85,0
                        vCmds: 0=△,STOP=✕,100=▽,85=85%,40=40%
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: widget:my-rollershutter-cell
                      config:
                        vLabel: Fenster
                        vItem: ShellyWZFensterrollladen_Steuerung
                        vCmd: 85,0
                        vCmds: 0=△,STOP=✕,100=▽,85=85%,40=40%
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: widget:my-rollershutter-cell
                      config:
                        vLabel: Küche
                        vItem: ShellyKucheRollladen_Steuerung
                        vCmd: 85,0
                        vCmds: 0=△,STOP=✕,100=▽,85=85%,40=40%
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: widget:my-status-cell
                      config: {}
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: widget:my-toggle-cell
                      config:
                        vLabel: Eingangslicht
                        vItem: ShellyEingangAussenlicht_Betrieb
                        vCmdOn: An,oh:slider-100
                        vCmdOff: Aus,oh:slider-0
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: widget:my-toggle-cell
                      config:
                        vLabel: Aquarium
                        vItem: ShellyWZAquarium_Betrieb
                        vCmdOn: An,oh:slider-100
                        vCmdOff: Aus,oh:slider-0
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: oh-label-cell
                      config:
                        label: Licht aus
                        icon: f7:lightbulb_slash
                        color: '=(items.LichtAus.state == "OFF") ? "gray" : "white"'
                        action: command
                        actionItem: LichtAus
                        actionFeedback: ok
                        actionCommand: ON
                        on: true
                        expandable: false
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: oh-label-cell
                      config:
                        label: Gute Nacht
                        icon: f7:moon_zzz
                        color: '=(items.GuteNacht.state == "OFF") ? "gray" : "white"'
                        header: '=(items.GuteNacht.state == "ON") ? "Gute Nacht" : ""'
                        action: command
                        actionItem: GuteNacht
                        actionFeedback: Gute Nacht!
                        actionCommand: ON
                        on: true
                        expandable: false
  - component: oh-block
    config:
      title: Aussenbereich
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: widget:my-rollershutter-cell
                      config:
                        vLabel: Markise
                        vItem: ShellyGartenMarkise_Steuerung
                        vCmd: 0,70
                        vCmds: 0=Reinfahren,STOP=✕,100=Rausfahren,70=70%
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: widget:my-dimmer-cell
                      config:
                        vLabel: Markise1
                        vItem: ShellyGartenMarkisenlicht_Channel1_Brightness
                        vCmdAlt: 40
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: widget:my-dimmer-cell
                      config:
                        vLabel: Markise2
                        vItem: ShellyGartenMarkisenlicht_Channel2_Brightness
                        vCmdAlt: 40
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: widget:my-cctled-cell
                      config:
                        vLabel: Kugellampe
                        vItem: ShellyGartenKugellampe_Helligkeit
                        vCmdAlt: 70
                        vItemCct: ShellyGartenKugellampe_Lichttemperatur
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: widget:my-toggle-cell
                      config:
                        vLabel: Wandlampe
                        vItem: ShellyGartenWandlampe_Betrieb
                        vCmdOn: An,oh:slider-100
                        vCmdOff: Aus,oh:slider-0
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: widget:my-toggle-cell
                      config:
                        vLabel: Hauptschalter
                        vItem: ShellyGartenHauptschalter_Betrieb
                        vCmdOn: An,oh:switch-on
                        vCmdOff: Aus,oh:switch-off
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default: []
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: widget:my-actionOptions-cell
                      config:
                        vLabel: Kamera
                        vIcon: f7:videocam
                        vItem: vPopupCam
                        vCmd: Eingang
                        vCmds: Eingang=Eingang,Garten=Garten
  - component: oh-block
    config:
      title: Obergeschoss
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: widget:my-cctled-cell
                      config:
                        vLabel: Gaube
                        vItem: ShellyDGGaubenlicht_Helligkeit
                        vCmdAlt: 70
                        vItemCct: ShellyDGGaubenlicht_Lichttemperatur
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: widget:my-cctled-cell
                      config:
                        vLabel: Schrank
                        vItem: ShellyDGSchranklicht_Helligkeit
                        vCmdAlt: 70
                        vItemCct: ShellyDGSchranklicht_Lichttemperatur
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: widget:my-toggle-cell
                      config:
                        vLabel: Luisa Aquarium
                        vItem: ShellyLuisaAquarium_Betrieb
                        vCmdOn: An,oh:slider-100
                        vCmdOff: Aus,oh:slider-0
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: widget:my-cam-popup
                      config: {}
  - component: oh-block
    config:
      title: System
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: widget:my-toggle-cell
                      config:
                        vLabel: Klingel
                        vItem: Klingel_Active
                        vCmdOn: An,oh:switch-on
                        vCmdOff: Aus,oh:switch-off
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: widget:my-toggle-cell
                      config:
                        vLabel: Urlaub
                        vItem: Urlaub
                        vCmdOn: An,oh:switch-on
                        vCmdOff: Aus,oh:switch-off
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: widget:my-actionOptions-cell
                      config:
                        vLabel: openHAB
                        vIcon: oh:openhab
                        vItem: vOpenhabCmd
                        vCmds: ohstop=openHAB Stop,ohrestart=openHAB Restart,ohlog=openHAB
                          ShowLog,pireboot=PI Reboot,pishutdown=PI
                          Shutdown,test=Test
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: oh-label-cell
                      config:
                        label: Test Item
                        icon: oh:openhab
                        color: '=(items.TestItem.state == "OFF") ? "gray" : "white"'
                        header: =items.TestItem.state
                        action: toggle
                        actionItem: TestItem
                        actionFeedback: ok
                        actionCommand: ON
                        actionCommandAlt: OFF
                        on: true
                        expandable: false
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default: []
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default: []
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default: []
              - component: oh-grid-col
                config:
                  width: "50"
                  xsmall: "25"
                slots:
                  default:
                    - component: widget:my-toggle-cell
                      config:
                        vLabel: Plug
                        vItem: ShellyWZPlug_Betrieb
                        vCmdOn: An,oh:switch-on
                        vCmdOff: Aus,oh:switch-off
masonry: null
grid: []

marco_hoefle · September 14, 2021, 4:42am

Hi Oliver,
Wow, I didn’t know what you can do with the YAML code. I need to understand how it is working.
Thanks for the cctled-cell widget. I try to combine it with the two KNX dimmer items:

Dimmer Licht_EG_Zimmer_warmweiss   "EG Zimmer Warmweiss [%d %%]" <light> (gLicht, gLichterAn)              { channel="knx:device:bridge:lichter:Licht_EG_Zimmer_warmweiss" }
Dimmer Licht_EG_Zimmer_kaltweiss   "EG Zimmer Kaltweiss [%d %%]" <light> (gLicht, gLichterAn)              { channel="knx:device:bridge:lichter:Licht_EG_Zimmer_kaltweiss" }

For the page I need to change your items to dummy items at my side and to create the widget:my-dimmer-cell widgets.

Thanks for providing your code. I believe it can be inspiring for many openhabeners.
Marco