Flex containers act differently in firefox and edge

Ignition
,
1

I have noticed from a college that uses firefox that a view i made look weird for him, but I for me it looked as it should.

I have made a quick sketch to how it looks in both browsers, where i have 2 flex containers at the top, the right one has another flex container, with 3 components, with the basis set to AUTO, grow and shrink is 0. I then have a toggle switch that toggles the display of a label, and here the container should change size depending on how many components are shown.

This is in edge and this is how it should look like:
toggle off

image
image966×249 6.22 KB

Toggle On

image
image971×244 7.69 KB

How it shouldn’t look like in firefox:
toggle off

image
image1159×245 2.49 KB

toggle on

image
image1037×238 2.5 KB

As you can see in edge the container with the components are shown, where as in firefox the container doesn’t change in size realy.
I know these two browsers has different engines, which have something to do with it, but Im not a CSS expert and Im look for some advise for how i should design view for all browsers

2

You may try have fixed width binded to the width property of the flex container

Step-by-step

  1. Select your Flex Container
  2. Go to:

props.style.width

  1. Add a binding (Expression) like this:

if({path/to/yourSwitch.props.selected}, "300px", "80px")

Example:

  • Switch ON → 300px (expanded)
  • Switch OFF → 80px (collapsed)
3

that seems to be a nice an simple solution.
Thanks

1 Like