[Bug-16011]8.0.8 Perspective - Margins missing in styles

I installed 8.0.8 release this morning, and I am noticing that all of my styles no longer have margin options and the option is removed from the editor. Is this intentional? If so, what is the best way to add spacing between items in a flex repeater now?

You can still manually add margin as a style property, but my understanding is that the margin property caused issues in some containers which resulted in confusion. Coordinate containers for example display coordinates for a component in one location, but large margins actually render it somewhere else.

We haven’t stopped supporting margins, nor have we prevented users from using margins, but due to the problems margins caused some users the decision was made to hide the option.

1 Like

I can definitely understand that, but it seems to have automatically removed that option from all my styles that used it. I had a few styles that had margins built in so that a drop shadow could be visible.

Is removing it from existing styles the plan? Or just a side effect?

This could cause problems with projects that are using styles that have shadows.

I have a project that we’re going to be updating to 8.08 probably tomorrow that uses margins to avoid shadows getting cropped from our flex containers. I’m a little concerned the visual elements are going to break when we upgrade the project.

That definitely isn’t something we planned and would be a side-effect. Let me see if I can replicate on my end.

I failed to replicate your issue with the following steps:

  1. Install 8.0.7
  2. Create View (Flex root)
  3. Place Icon in root
  4. Apply margin property to style (10px)
  5. Apply boxShadow property to style (5px 10px #999999)
  6. Save project.
  7. Close Designer.
  8. Upgrade Gateway to 8.0.8 (stable)
  9. Open Project.

Result:
Icon maintained margin property, and boxShadow appears as expected.

If you could provide some more information @grietveld, I could perhaps try additional scenarios, but it sounded like what I just described was your situation.

@Steve_Laubach I always recommend that before updating a live Gateway that you export a project and try it out on a different environment which is running the updated version.

I would have to downgrade and load the backup to find out exactly where I set it, but it was either on the 'elementStyle' for a flex repeater or in an stylesheet, not necessarily configured on the component.

Everything else aligns with the steps I took.

Adding it back in manually was fairly simple, but I don't think I can add it back into my style class, so it will be managed at a component level going forward I guess.

Yes, Style classes were identified as an area where margin could not be applied after the changes were introduced. We did not experience or identify existing Style classes losing applied margins after an update, however. I will try that and see what I find.

We lost all of our margins on all styles. This is definitely broken in 8.0.8. Padding still works though.

We were able to replicate this internally and have opened an issue to track it.

1 Like

Same issue here. All margins disappeared on all styles.

We’ve run into this in the stable release of 8.0.8. Multiple developers in our office are affected.

Not only were margins removed from the editor, they were also removed from the style classes that already had existing margin settings on upgrade. We will now need to go back and update all of our styles classes manually.

I’m really sad to see such a heavy-handed “fix” if the only bug/problem was with only coordinate containers. Margins are integral to the design process with all other container types, the container types that are the preferred design method to coordinate containers.

1 Like

The next nightly posted should contain a re-introduction of Margin and Padding. We’ve also introduced a new layout for visualizing how margin and padding behave on a component and how the border fits into everything.

In the following screenshot, I’ve supplied values for margin and padding. The UI will display placeholders in the more-specific inputs so that you can more easily see where margin and padding settings are applied. I have also supplied a value in the margin-top input (note it is black, instead of the grey placeholder text).
04%20PM

4 Likes

I liked your post. But just wanted to give extra props to whoever created this display for the style class editor. Its really going to help those new and experienced with CSS alike.

2 Likes