OH3 Align iconF7 inside 0h-button

Mark_VG · December 8, 2022, 7:05am

Hi All

I am trying to align my iconF7 inside a large oh-button. My existing code is as follows:

    - component: oh-button
      config:
        popupClose: .modal-in
        bgColor: gray
        iconColor: black
        iconF7: clear_fill
        iconSize: 25
        large: true
        style:
          color: white
          position: absolute
          left: 6.0%
          top: 5%
          height: 55px
        tooltip: '=!(props.tooltipEnable) ? false : "Close Popup"'
        tooltip-trigger: hover

I would like the icon centered on the oh-button. It is centered left to right and I would like the same for top to bottom.

Thanks

JustinG · December 8, 2022, 3:36pm

There are two basic methods, both of which are simple, one of which is robust.

Just add display: flex and align-items: center to your button’s style. When a container uses flex styling the justify-content property determines how the child items are placed along the main axis (in this case left-to-right) and align-items determines how the child items are placed along the secondary axis. This will continue to work even if you change the size of the button.
Add top padding to the button. Padding is the space between the edge of the container and the items inside, so in this case adding padding to the top will move the icon down. In this case, because of the way the button is calculating it’s size you need 10px of top padding (add padding-top: 10px to the button’s style). This will not properly respond to changes in the button’s size because the 10px is a fixed value and you’ve have to change that again if the button changes size.

Mark_VG · December 8, 2022, 5:36pm

Thanks Again Justin.

I eventually did it this way:

- component: oh-button
  config:
    popupClose: .modal-in
    bgColor: gray
    large: true
    style:
      color: white
      position: absolute
      left: 6.0%
      top: 5%
      height: 55px
      width: 40px
    tooltip: '=!(props.tooltipEnable) ? false : "Close Popup"'
    tooltip-trigger: hover
  slots:
    default:
      - component: f7-icon
        config:
          f7: clear_fill
          color: white
          style:
            color: black
            font-size: 25px
            left: 20%
            overflow: hidden
            position: absolute
            top: 30%

Probably overkill...

Will give the other options a go as well.

Mark_VG · December 9, 2022, 4:40am

I tried the suggestion with the following:

slots:
  default:
    - component: Label
      config:
        style:
          color: white
          display: flex
          align-items: center
          justify-content: right
          font-size: 25px
          left: 30%
          overflow: hidden
          position: absolute
          text-overflow: ellipsis
          text-shadow: -1px 1px 1px hsl(0,0%,66%)
          top: 0%
          white-space: nowrap
        text: ="P▲R▲DOX"
    - component: f7-badge
      config:
        style:
          border-radius: 0px
          display: flex
          align-items: center
          justify-content: left
          background: var(--paradox-background-color)
          height: 55px
          left: 20%
          position: absolute
          top: 5%
          width: 60%
    - component: oh-link
      config:
        large: true
        raised: true
        style:
          left: 20%
          display: flex
          align-items: center
          justify-content: center
          font-weight: 700
          background: var(--paradox-background-color)
          color: var(--paradox-font-color)
          position: absolute
          top: 5.5%
          width: 60%
        text: Select Partition

To try and get the components centered, or LEFT justified to test.

But does not seem to work for me. Do I have something wrong? Only seems to work for the f7-badge

JustinG · December 9, 2022, 2:47pm

The important part here is that flex styling is about the container an element is in, not the element itself.

- component: some-container
  config:
    style:
      display: flex <-- flex styling goes here
  slots:
    default:
      - component: some-child-element <-- this element is placed following the container's flex-rules
      - component: some-other-child-element <-- this element is placed following the container's flex-rules
      - component: a-last-child-element <-- this element is placed following the container's flex-rules

When you add display: flex and justify-content: center to the link or the label or any other element that doesn’t have and children, this has no effect on the styling of the page.

See here for a better explanation than I can give:

Mark_VG · December 9, 2022, 4:39pm

Thanks again Justin.

So I tried putting the 3 components in an f7-block:

slots:
  default:
    - component: f7-block
      config:
        style:
          width: 100%
          height: 100%
          display: flex
          align-items: top 
          justify-content: center
          top: 0%
      slots:
        default:
          - component: Label
            config:
              style:
                color: white
                font-size: 25px
                left: 30%
                text-overflow: ellipsis
                text-shadow: -1px 1px 1px hsl(0,0%,66%)
                top: 0%
                white-space: nowrap
              text: ="P▲R▲DOX"
          - component: f7-badge
            config:
              style:
                border-radius: 0px
                background: var(--paradox-background-color)
                height: 55px
                position: absolute
                top: 5%
                width: 60%
          - component: oh-link
            config:
              large: true
              raised: true
              style:
                font-weight: 700
                background: var(--paradox-background-color)
                color: var(--paradox-font-color)
                position: absolute
                top: 5.5%
                width: 60%
              text: Select Partition

Which seems to insert a big space at the top and then make the block overrun the page?

Any idea why the big margin at the top?

JustinG · December 9, 2022, 10:18pm

There are several things going on here:

I can’t see the rest of your widget, but the block is probably extending beyond the bottom of the screen because you have set it’s height to 100%. That’s 100% of the height of it’s parent and it’s parent is probably the height of the screen. But the block is not starting at the very top of the parent container so it winds up stretching past the bottom of the parent container (which is the edge of the screen). Unless there’s a reason you want the block to go to exactly the bottom of the screen, it’s better to just let it calculate its own height from the child elements, once you’ve got them squared away.

top is not a valid value for align-items Even if it were, it’s not what you want here. You’re trying to stack your items in a column now, so 1) you have to tell the block that the flex-direction you want, and 2) then you secondary axis (which align-items impacts) is left to right.

If you want a column of child elements to start at the top of a flex container then justify-content needs to be set to flex-start

Mark_VG:

          - component: f7-badge
            config:
              style:
                border-radius: 0px
                background: var(--paradox-background-color)
                height: 55px
                position: absolute

Mark_VG:

          - component: oh-link
            config:
              large: true
              raised: true
              style:
                font-weight: 700
                background: var(--paradox-background-color)
                color: var(--paradox-font-color)
                position: absolute

You have to pick one or the other. In this case because you have additional position and location styling in each of the child elements, you are overriding the flex-box directive from the container. If you want to do this with the block and flex-box you need to remove all the tops, lefts, positions, etc. from the child elements.

Mark_VG · December 10, 2022, 5:32pm

Good Point. Sorry about that.

I have tried to simplify as much as possible to get back to basics, so have changed my f7-blcok to an f7-card so that I can see the dimensions. So the code:

uid: paradox_evo_colour_test_a
tags: []
props:
  parameterGroups: []
timestamp: Dec 10, 2022, 7:12:06 PM
component: f7-page
config:
  style:
    --paradox-font-color: rgba(6,192,232,255)
    --paradox-background-color: rgba(39,26,226,255)
    --f7-bars-translucent-blur: none
    --f7-bars-translucent-opacity: none
    --f7-card-margin-horizontal: 0px
    --f7-navbar-bg-color: transparent
    --f7-navbar-border-color: transparent
    --f7-navbar-font-size: 15px
    --f7-navbar-height: 35px
    --f7-navbar-link-color: white
    --f7-navbar-shadow-image: none
    --f7-navbar-text-color: white
    --f7-popup-tablet-width: 40px
    background-color: rgba(239,239,239,255)
    border-radius: 20px
    height: 720px
    left: 0px
    text-overflow: ellipsis
    top: 0px
    width: 360px
slots:
  default:
    - component: f7-card
      config:
        style:
          width: 100%
          height: 100%
          display: flex
          align-items: flex-start
          justify-content: center
          top: 0%
      slots:
        default:
          - component: Label
            config:
              style:
                color: white
                font-size: 25px
                text-shadow: -1px 1px 1px hsl(0,0%,66%)
              text: ="P▲R▲DOX"

produces:

With the large “margin” between the top of the f7-page and the top of the f7-card/block.

If I use the Label component directly on the f7-page this “margin” is not there:

uid: paradox_evo_colour_test_a
tags: []
props:
  parameterGroups: []
timestamp: Dec 10, 2022, 7:27:55 PM
component: f7-page
config:
  style:
    --paradox-font-color: rgba(6,192,232,255)
    --paradox-background-color: rgba(39,26,226,255)
    --f7-bars-translucent-blur: none
    --f7-bars-translucent-opacity: none
    --f7-card-margin-horizontal: 0px
    --f7-navbar-bg-color: transparent
    --f7-navbar-border-color: transparent
    --f7-navbar-font-size: 15px
    --f7-navbar-height: 35px
    --f7-navbar-link-color: white
    --f7-navbar-shadow-image: none
    --f7-navbar-text-color: white
    --f7-popup-tablet-width: 40px
    background-color: rgba(239,239,239,255)
    border-radius: 20px
    height: 720px
    left: 0px
    text-overflow: ellipsis
    top: 0px
    width: 360px
slots:
  default:
    - component: Label
      config:
        style:
          color: white
          display: flex
          align-items: center
          justify-content: right
          font-size: 25px
          left: 30%
          overflow: hidden
          position: absolute
          text-overflow: ellipsis
          text-shadow: -1px 1px 1px hsl(0,0%,66%)
          top: 0%
          white-space: nowrap
        text: ="P▲R▲DOX"

Any advise would be appreciated.

I am thinking of moving back to non responsive layout. And then will just have to calculate the locations manually.

JustinG · December 10, 2022, 6:37pm

You’re greatly over-complicating this all still. The use of the f7-page as your base element is part of where the large margin at the top is coming from. When you use an f7-page it automatically inserts an additional page-content element with large top and bottom margins. Your f7-card and Label are responding differently to that margin because you still have extraneous position styles defined for both of them and they’re different. The absolute position of the Label sets the origin for the label’s position at the edge of the entire element, while the relative position of the card respects the large margin from the page-content element.

Really, the flex-box, responsive solution is bare-bones. That’s the point of flex-box; you don’t need to configure every element, just the parent that holds them all. To do most of what you are looking for, you need only the flex definitions in the container and nothing else…

uid: demo:position
tags: []
props:
  parameterGroups: []
component: f7-block
config:
  style:
    display: flex
    flex-direction: column
    align-items: center
    justify-content: flex-start
    --paradox-font-color: rgba(6,192,232,255)
    --paradox-background-color: rgba(39,26,226,255)
slots:
  default:
    - component: Label
      config:
        style:
          color: white
          font-size: 25px
          text-overflow: ellipsis
          text-shadow: -1px 1px 1px hsl(0,0%,66%)
          white-space: nowrap
        text: ="P▲R▲DOX"
    - component: oh-link
      config:
        large: true
        raised: true
        style:
          font-weight: 700
          background: var(--paradox-background-color)
          color: var(--paradox-font-color)
        text: Select Partition

If you want the widget to be a card, just change the block to a card (and add a little bottom padding for good measure):

uid: demo:position
tags: []
props:
  parameterGroups: []
component: f7-card
config:
  style:
    display: flex
    flex-direction: column
    align-items: center
    justify-content: flex-start
    padding-bottom: 10px
    --paradox-font-color: rgba(6,192,232,255)
    --paradox-background-color: rgba(39,26,226,255)
slots:
  default:
    - component: Label
      config:
        style:
          color: white
          font-size: 25px
          text-overflow: ellipsis
          text-shadow: -1px 1px 1px hsl(0,0%,66%)
          white-space: nowrap
        text: ="P▲R▲DOX"
    - component: oh-link
      config:
        large: true
        raised: true
        style:
          font-weight: 700
          background: var(--paradox-background-color)
          color: var(--paradox-font-color)
        text: Select Partition

Mark_VG · December 11, 2022, 11:56am

Thanks for all the details input Justin. I really appreciate it.
I have reverted to the non-responsive model I used before.

Setting the widget size and using a sized popup that you helped with etc.

Current WIP:

Still need to add the keypad buttons etc.