[BUG?] Button text alignment not respected inside flex repeater

Ignition
,
1

I have a button within a base flex container that has the text aligned vertically and horizontally. This view is called ButtonView.

image
image1855×910 95.4 KB

I have a (row) flex repeater that uses ButtonView as the path. As shown in the image, the text is not aligned in vertical center of the button.

image
image1896×791 98.5 KB

I want to show the text in the horizontal AND vertical center of the button. How can I do this?

I'm using 8.1.19

I read this other post but it was not helpful: [BUG-14598] perspective component Image.style.textAlign "center" not respected in Carousel component

1 Like
2

You may notice that there's a small portion of white space underneath the 'value' button. This is because if I expand it to take up the entire space of the flex container, the text will jump to the top. As shown here, nothing has changed except for the relative size of the button:

image
image1873×657 74.2 KB

Maybe these issues are related. I don't know.

3

What happens if you uncheck useDefaultViewHeight on the flex repeater?
What is the value of style.overflow on your flex repeater?

4

Unchecking useDefaultViewHeight has no effect. style.overflow is set to auto. Changing that also has no effect.

5

Interesting.
flex.zip (5.0 KB)

That seems to be what you're trying to accomplish and it works for me.

6

There does seem to be a bug here, but it stems from a poor approach to configuring the instanced view: instead of setting an extremely high basis, set the basis back to 32px and change the grow property to 1. I'll open an internal ticket to see if we need to do anything about the basis scenario.

1 Like
7

I don't think this applies just to your situation. I'm in 8.1.22 and added a button into a flex container and am seeing the same thing.
EDIT: This appears to only be an issue in the designer; in Chrome it shows up correctly in the centre

(it's more obvious obviously the taller the button)

image
image2096×94 2.12 KB

This is my button

[
  {
    "type": "ia.input.button",
    "version": 0,
    "props": {
      "style": {
        "textAlign": "center"
      }
    },
    "meta": {
      "name": "Button"
    },
    "position": {
      "shrink": 0,
      "basis": "42px"
    },
    "custom": {}
  }
]

This is the flex

[
  {
    "type": "ia.container.flex",
    "version": 0,
    "props": {
      "direction": "column"
    },
    "meta": {
      "name": "FlexContainer"
    },
    "position": {
      "basis": "769px"
    },
    "custom": {},
    "children": [
      {
        "type": "ia.input.button",
        "version": 0,
        "props": {
          "style": {
            "textAlign": "center"
          }
        },
        "meta": {
          "name": "Button"
        },
        "position": {
          "shrink": 0,
          "basis": "42px"
        },
        "custom": {}
      }
    ]
  }
]
1 Like
8

Thanks for all the replies everyone.
Zach, I'm sorry but I'm not going to open that zip file. Perhaps you could describe what you did.
cmallonee, I changed these properties as suggested, it had no effect.
nminchin, I'm marking you as the solution. As long as it looks good when the project is actually in a web page, then I don't really care how it looks in the designer. I didn't even think to actually test it in the right environment and instead spent all my time trying to configure the settings to get it to look right. Lesson learned, test in both environments.

With that said, I still think it's an issue. It just doesn't really matter anymore.