# \[BUG?\] Button text alignment not respected inside flex repeater **URL:** \ **Category:** Ignition\ **Tags:** ignition81, perspective\ **Created:** [November 10, 2022, 7:21pm UTC](https://forum.inductiveautomation.com/t/bug-button-text-alignment-not-respected-inside-flex-repeater/66362 "2022-11-10T19:21:33Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![Alex\_Porter](https://avatars.discourse-cdn.com/v4/letter/a/6bbea6/32.png) [@Alex\_Porter](https://forum.inductiveautomation.com/u/Alex_Porter)\ **Post date:** [November 10, 2022, 7:21pm UTC](https://forum.inductiveautomation.com/t/bug-button-text-alignment-not-respected-inside-flex-repeater/66362/1 "2022-11-10T19:21:33Z")
I have a button within a base flex container that has the text aligned vertically and horizontally. This view is called ButtonView. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/b/6b95f704ab4f17d3d7256485425e35617bdd6b90.png) 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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/8/2869bb8c783e17d06974b5736d8fe0ef232b73ab.png) 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](https://forum.inductiveautomation.com/t/bug-14598-perspective-component-image-style-textalign-center-not-respected-in-carousel-component/27015) ---
**Author:** ![Alex\_Porter](https://avatars.discourse-cdn.com/v4/letter/a/6bbea6/32.png) [@Alex\_Porter](https://forum.inductiveautomation.com/u/Alex_Porter)\ **Post date:** [November 10, 2022, 7:25pm UTC](https://forum.inductiveautomation.com/t/bug-button-text-alignment-not-respected-inside-flex-repeater/66362/2 "2022-11-10T19:25:43Z")
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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/9/5940a1f01bdec418d395467c9d2af37633c2a034.png) Maybe these issues are related. I don't know. ---
**Author:** ![zacht](https://avatars.discourse-cdn.com/v4/letter/z/ea5d25/32.png) [@zacht](https://forum.inductiveautomation.com/u/zacht)\ **Post date:** [November 10, 2022, 7:56pm UTC](https://forum.inductiveautomation.com/t/bug-button-text-alignment-not-respected-inside-flex-repeater/66362/3 "2022-11-10T19:56:46Z")
What happens if you uncheck `useDefaultViewHeight` on the flex repeater? What is the value of `style.overflow` on your flex repeater? ---
**Author:** ![Alex\_Porter](https://avatars.discourse-cdn.com/v4/letter/a/6bbea6/32.png) [@Alex\_Porter](https://forum.inductiveautomation.com/u/Alex_Porter)\ **Post date:** [November 10, 2022, 8:09pm UTC](https://forum.inductiveautomation.com/t/bug-button-text-alignment-not-respected-inside-flex-repeater/66362/4 "2022-11-10T20:09:36Z")
Unchecking `useDefaultViewHeight` has no effect. `style.overflow` is set to auto. Changing that also has no effect. ---
**Author:** ![zacht](https://avatars.discourse-cdn.com/v4/letter/z/ea5d25/32.png) [@zacht](https://forum.inductiveautomation.com/u/zacht)\ **Post date:** [November 10, 2022, 9:16pm UTC](https://forum.inductiveautomation.com/t/bug-button-text-alignment-not-respected-inside-flex-repeater/66362/5 "2022-11-10T21:16:54Z")
Interesting. [flex.zip](https://forum.inductiveautomation.com/uploads/short-url/mFVRqu0dWUniS2wgPb3NC6pwSSD.zip) (5.0 KB) That seems to be what you're trying to accomplish and it works for me. ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [November 11, 2022, 12:12am UTC](https://forum.inductiveautomation.com/t/bug-button-text-alignment-not-respected-inside-flex-repeater/66362/6 "2022-11-11T00:12:50Z")
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. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [November 11, 2022, 3:39am UTC](https://forum.inductiveautomation.com/t/bug-button-text-alignment-not-respected-inside-flex-repeater/66362/7 "2022-11-11T03:39:17Z")
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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/6/2633c5a9de8e78ed38a35ed5348b72a5f7b89570.png) This is my button ```auto [ { "type": "ia.input.button", "version": 0, "props": { "style": { "textAlign": "center" } }, "meta": { "name": "Button" }, "position": { "shrink": 0, "basis": "42px" }, "custom": {} } ] ``` This is the flex ```auto [ { "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": {} } ] } ] ``` ---
**Author:** ![Alex\_Porter](https://avatars.discourse-cdn.com/v4/letter/a/6bbea6/32.png) [@Alex\_Porter](https://forum.inductiveautomation.com/u/Alex_Porter)\ **Post date:** [November 11, 2022, 1:10pm UTC](https://forum.inductiveautomation.com/t/bug-button-text-alignment-not-respected-inside-flex-repeater/66362/8 "2022-11-11T13:10:51Z")
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.