Responsive behavior

I have a page that, do to the type of data, has a number of elements and groups that are set to fixed width. In the responsive editor, these groups of numbers are all set exactly the same as are all the groups they are in. The problem that I’m experiencing is that ONE of the groups seems to wrap but ONLY when the page width changes…no matter how wide the page is to start with or how small the amount I shrink or grow it.

In the gif below, I’ve stretched my browser out across multiple monitors. The number of pixels is displayed, starting at over 4,000. At this point, there should be no need for any element to wrap, especially one that is not set to allow for wrapping, nor when the width is made larger.

The moment I shorten or grow the screen width the column wraps, even when the amount is as little as a single pixel. After a refresh of the site at the new, smaller or larger screen width, this element shows that it is not wrapped, so the screen size isn’t causing the wrap, just the changing of the screen size causes it.

There are no conditional settings on the individual elements within that group or on that group itself or any parent groups all the way out to the page. Any idea what causes an element to wrap just due to a screen width change?

I apologize for the long wait times between refreshes in the gif, this page has many hidden groups all with loads of data.

Here is the responsive editor settings for the groups shown. The yellow parent group is 144px wide and the x-position is 166. That puts the right side of that group at 310. The green parent group’s x-position is 310. The two groups inside the yellow parent are both 72px wide, and sit at x-positions 0 and 72. As far as I can tell there are no overlapping elements:

Sounds like it’s from a groups margin settings. I recommend playing with the margins and seeing if you get a different result.

Have you tried setting the parent group to left aligned with the 2nd container groups center aligned, and the text element center aligned within those container?

Setting the text element responsiveness to center aligned while aligning the text itself to the left might make a difference.

Thank you, I’ve just tried setting the yellow and green parent group’s alignments to left, center and right. I’ve tried going through all these same settings for the parent of these groups as well with no change in behavior.

As for text alignment, these are dollar amounts so aligning the text itself to the left doesn’t make for good design in a financial app…but not to let a good suggestion go to waste, I tried it and it didn’t work either.

Can you share your editor so I can take a look?

Yes, via private message

1 Like

The issue seems to be related to the particular browser in use. I use MS Edge for a lot of my editing, but I also have MS Edge Canary (one of their Insider beta editions) along with Google Chrome and the Brave browser. I don’t have a problem when using these other browsers.

I also tested this behavior with MS Edge and Safari on the Mac and neither of them experience this issue either.

This problem only seems to be an issue when using the released PC version of MS Edge. Even after a complete restart of MS Edge, the problem continues.