[BUG] Perspective flex "auto" not behaving as expected with icon and svg

v8.1.5

Maybe this is already fixed, but I’m having an issue with using ‘auto’ basis in a flex container.

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

What if you let the label grow with grow:1?

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

In width, yes. Isn’t that what you need?

How it looks when it behaves as expected?

The section underlined by Red in my screenshot shouldn’t be there, the width should be up to the length of the label

Doesnt a flex container always stretch things to fit its width?

Not if it’s set to auto

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

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 :laughing:

image

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 :confused:

BUG_PerspectiveFlexAutoBasisDodgy_TooWideAndNarrow.zip (36.8 KB)

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.

It’s also an issue for coordinate containers as well which are embedded into flex containers.

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?

Nope, I’ve just been using a static basis setting :confused: it’s a bit dodgy…

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

image

The view itself:
image

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
image
adding a width to the embedded container with the icon works too for the “too wide” thing
image
in flex repeater with wrap, which was what you wanted?:

@richardNZ15 it probably should work for you too

5 Likes

Sweeeet! :ok_hand: Thanks as always. I didn’t even know there was a width style prop :slight_smile:

1 Like

It is not listed in ignition, but it works as any css does.

1 Like

Fantastic, thank you! That did the trick.

1 Like

Turns out this fix works for embedded SVGs but it doesn’t work for SVGs saved to the image library :frowning:
Wait, I don’t know if it works for SVGs at all, it does work for icons though. Testing in 8.1.20

1 Like

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.

1 Like