# \[BUG\] Perspective flex "auto" not behaving as expected with icon and svg **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [February 28, 2022, 1:26am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-auto-not-behaving-as-expected-with-icon-and-svg/56604 "2022-02-28T01:26:24Z")\ **Posts on this page:** 20\ **Page:** 1
**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:** [February 28, 2022, 1:26am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-auto-not-behaving-as-expected-with-icon-and-svg/56604/1 "2022-02-28T01:26:24Z")
v8.1.5 Maybe this is already fixed, but I’m having an issue with using ‘auto’ basis in a flex container. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/f/6f986bcc25f8bc85e280b1963c5f303ebc3b23a3.png) I have this view above that has an icon and a label in a row flex set to auto basis. I set the icon (an embedded SVG) to fixed basis and label to auto basis, but the width of the auto basis flex container is miles beyond the end of the width of both components… any ideas? Edit #1: if I remove the icon (embedded SVG) it behaves correctly. Edit #2: if I leave the Label inside of the row flex container and move the SVG into the root row flex, then it also behaves as expected. It seems to only be when and SVG is included within the same flex as other non-flex components. Renamed to BUG ---
**Author:** ![jespinmartin1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jespinmartin1/32/57175_2.png) [@jespinmartin1](https://forum.inductiveautomation.com/u/jespinmartin1)\ **Post date:** [February 28, 2022, 4:32am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-auto-not-behaving-as-expected-with-icon-and-svg/56604/2 "2022-02-28T04:32:08Z")
What if you let the label grow with `grow:1`? ---
**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:** [February 28, 2022, 6:05am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-auto-not-behaving-as-expected-with-icon-and-svg/56604/3 "2022-02-28T06:05:23Z")
then it will grow to the end of the view. What I want is for the view to be as thin as possible as I’m using it in a flex repeater with wrapping, and it was doing strange things before like wrapped columns being much wider than the actual text which would then cause scrollbars to appear which didn’t need to be there ---
**Author:** ![jespinmartin1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jespinmartin1/32/57175_2.png) [@jespinmartin1](https://forum.inductiveautomation.com/u/jespinmartin1)\ **Post date:** [February 28, 2022, 7:16am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-auto-not-behaving-as-expected-with-icon-and-svg/56604/4 "2022-02-28T07:16:12Z")
> [@nminchin](#): > > then it will grow to the end of the view In width, yes. Isn't that what you need? > [@nminchin](#): > > then it also behaves as expected How it looks when it behaves as expected? ---
**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:** [February 28, 2022, 7:35am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-auto-not-behaving-as-expected-with-icon-and-svg/56604/5 "2022-02-28T07:35:45Z")
The section underlined by Red in my screenshot shouldn’t be there, the width should be up to the length of the label ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [February 28, 2022, 7:42am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-auto-not-behaving-as-expected-with-icon-and-svg/56604/6 "2022-02-28T07:42:58Z")
Doesnt a flex container always stretch things to fit its width? ---
**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:** [February 28, 2022, 7:47am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-auto-not-behaving-as-expected-with-icon-and-svg/56604/7 "2022-02-28T07:47:18Z")
Not if it’s set to auto ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [February 28, 2022, 8:03am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-auto-not-behaving-as-expected-with-icon-and-svg/56604/8 "2022-02-28T08:03:59Z")
Looks like normal behaviour to me, i dont use flex containers a lot tho… i dont see any weird css on the them when i add an icon or something. The only reason to use flex is to use it with grow/shrink xd Or for wrapping i suppose, but your flex repeater can handle that too if you use that ---
**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:** [March 7, 2022, 11:04am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-auto-not-behaving-as-expected-with-icon-and-svg/56604/9 "2022-03-07T11:04:46Z")
Ok, well while this isn’t exactly the same issue (too wide), this export shows essentially the same thing, except the embedded views are too narrow when the EV contains an icon if you use `basis: auto` - “Hello World!” is cut off where without the icon it’s not. Look at “Main” EDIT: OK, I can reproduce the too wide version as well. It’s kind of funny… to produce the “too narrow” you add an icon, to produce the “too wide” you add an embedded SVG 😆 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/1/c19fe47c8241e07e12f9187ec57af91389ec82f7.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/4/34fa5ef499e9b3f74a71d6490266219d97cd2737.png) PS. View 3 Label is only added to a flex container as part of my testing I tried adding an SVG _and_ an icon into the same EV but it didn’t meet in the middle and make it work properly 😕 [BUG\_PerspectiveFlexAutoBasisDodgy\_TooWideAndNarrow.zip](https://forum.inductiveautomation.com/uploads/short-url/i9A0hvNbyERtsPgpolHrID3ZM3A.zip) (36.8 KB) ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [March 7, 2022, 1:33pm UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-auto-not-behaving-as-expected-with-icon-and-svg/56604/10 "2022-03-07T13:33:27Z")
And you want to put all that into a flex repeater aswell? xD I dont use flex for things like this, but like i said, perspective isnt doing anything special with the flex css props. So i dont think there is anything that they are doing that would cause this behaviour. ---
**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:** [March 7, 2022, 9:59pm UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-auto-not-behaving-as-expected-with-icon-and-svg/56604/11 "2022-03-07T21:59:22Z")
It’s also an issue for coordinate containers as well which are embedded into flex containers. ---
**Author:** ![richardNZ15](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/richardnz15/32/33373_2.png) [@richardNZ15](https://forum.inductiveautomation.com/u/richardNZ15)\ **Post date:** [March 28, 2022, 5:36am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-auto-not-behaving-as-expected-with-icon-and-svg/56604/12 "2022-03-28T05:36:20Z")
I’m having the same issue, except i want an icon to the right of my text. And when i set text to “Auto” it stretches to fit as required, which is great. Except the icon is pushed some distance away from the end of the text for some reason. I’d expect it to be right next to the label text. Something to do with whitespace padding on text? Did you figure it out? ---
**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:** [March 28, 2022, 6:31am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-auto-not-behaving-as-expected-with-icon-and-svg/56604/13 "2022-03-28T06:31:09Z")
Nope, I’ve just been using a static basis setting 😕 it’s a bit dodgy… ---
**Author:** ![richardNZ15](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/richardnz15/32/33373_2.png) [@richardNZ15](https://forum.inductiveautomation.com/u/richardNZ15)\ **Post date:** [March 28, 2022, 6:47am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-auto-not-behaving-as-expected-with-icon-and-svg/56604/14 "2022-03-28T06:47:26Z")
Damn, I managed to get what i want somehow, but now i’ve broken it with some other change… dammit. Also have you noticed that setting a basis of Auto for a view seems to ignore icons? I’ve got a view with a label and an icon, and i want them to be side by side, but for some reason auto isn’t playing nice. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/c/fc477c0b820e43973545161080c1e45c873c6d81.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/7/c79eb1dea3d2f00c4e83a0d736b6464a18f8f72c.png) The view itself: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/b/bbc5debea65931c09447582536bbfd3a64eab2d0.png) ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [March 28, 2022, 9:04am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-auto-not-behaving-as-expected-with-icon-and-svg/56604/15 "2022-03-28T09:04:18Z")
So i ran against this problem myself the other day, but in a tottaly different situation with one of my custom components. So i put on some javascript to debug and it seems like the svgs are doing weird things with their width in flex containers. This seems to be a browser issue, not ignitions fault. **You can fix it by putting a width in the style of the svg/icon!** @nminchin i just tested it out on the example you once send and it seems to work for this too ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/a/ca61ad822def958c436228315281233a3bbfb2ba.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/9/c903c821719b47d328b6626dd8904427f1f7bf6a.png) adding a width to the embedded container with the icon works too for the “too wide” thing ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/c/6c9168596a63d76fe6a90cc9a8238ca7edf38bc3.png) in flex repeater with wrap, which was what you wanted?: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/e/fe67f9864acaee3f6b71320acf5095024f56a543.png) @richardNZ15 it probably should work for you too ---
**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:** [March 28, 2022, 10:28am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-auto-not-behaving-as-expected-with-icon-and-svg/56604/16 "2022-03-28T10:28:16Z")
Sweeeet! 👌 Thanks as always. I didn’t even know there was a width style prop 🙂 ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [March 28, 2022, 10:49am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-auto-not-behaving-as-expected-with-icon-and-svg/56604/17 "2022-03-28T10:49:55Z")
It is not listed in ignition, but it works as any css does. ---
**Author:** ![richardNZ15](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/richardnz15/32/33373_2.png) [@richardNZ15](https://forum.inductiveautomation.com/u/richardNZ15)\ **Post date:** [March 29, 2022, 1:53am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-auto-not-behaving-as-expected-with-icon-and-svg/56604/18 "2022-03-29T01:53:23Z")
Fantastic, thank you! That did the trick. ---
**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:** [September 13, 2022, 3:48am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-auto-not-behaving-as-expected-with-icon-and-svg/56604/19 "2022-09-13T03:48:35Z")
~~Turns out this fix works for embedded SVGs but it doesn’t work for SVGs saved to the image library ☹~~ Wait, I don’t know if it works for SVGs at all, it does work for icons though. Testing in 8.1.20 ---
**Author:** ![bao.nguyen](https://avatars.discourse-cdn.com/v4/letter/b/8c91f0/32.png) [@bao.nguyen](https://forum.inductiveautomation.com/u/bao.nguyen)\ **Post date:** [October 24, 2022, 3:04am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-auto-not-behaving-as-expected-with-icon-and-svg/56604/20 "2022-10-24T03:04:29Z")
Hi Victor, Thank you very much for the trick! My parent flex container (with basis: auto) does not respect its children's basis settings. Adding 'width' to the children's styles makes the parent grow/shrink properly. Cheers.