Forum Academy Marketplace Showcase Pricing Features

Responsive "ghost" region

Need help Responsiveness
#1

I’m trying to understand what’s causing the large white space between elements when the browser size changes. I’ve set elements within a group to hide as the group shrinks with the size of the browser window but the group is shrinking before the element to the right even gets close.

In the gif below I’ve set the group’s border to red so I can see when the group shrinks. Its clear that the group on the right never gets close before the red border starts shrinking and moving away. This is causing the elements to hide well before they need to.

ShareX-01_08_21_12_03_52
ShareX-01_08_21_12_03_52938×279 2.9 MB

#2

Great watch… lengthy but worthwhile

1 Like
#3

With only this gif to go by it is very difficult to asses what the issue is. Not knowing if you have those elements in the YR set into their own groups, as well as how you have them set in terms of fixed width.

From what I see in the gif, this is my assessment.

Your setup in the group with the red border has a set of groups that you have created to be used as the table. These may be contained within a repeating group of a single column structure so that you can add what looks like up to 11 groups to represent your year columns…or perhaps it is not a repeating group but just a regular group with 11 groups contained within.

Either way, your groups you are using as the columns for 11 years have hiding rules set on them so they are hidden and their widths are collapsed from inside of their container.

The main problem, is that these 11 groups used as columns are set to fixed width and are not set up properly to have them expand their widths when the extra space becomes available.

To imagine this with numbers. You have 11 groups all of which are 100px in width and contained inside of a group that is 1100px in width. You hide one group when the container goes beyond 1100px, so now you have 10 groups each with 100px so a total of 1000px, but the container is 1050px…that extra 50px your container has is that white space.

If you make it so that those 11 groups you use as columns are not set to fixed width you will fix the issue…put the min width to 99 and let the max width be unset so that the 11 column groups will expand to fill the entire container after each one is hidden with the hiding rules you have set on them.

#4

Very much appreciate the response…you are perceptive in that I had individual groups used as columns of data. There are actually 14, and the 2 pairs of them in yellow and green are grouped together. This is visible in the newest gif below.

After making all the groups NOT fixed and set to 99, the yellow and green groups expanded far more compared to the others, so I set them back to fixed however, even before returning the colored columns back to fixed, the problem with the ghost region still occurred.

Also, these non-fixed groups introduced a visible gaps that I would like to prevent.

The visual problem this method introduces is the gaps in the bottom borders of certain rows that are introduced as the page expands. , Although the groups do expand to fill the container completely until the next column can become visible, as you said they would, the borders don’t and it leaves gaps in the bottom border of these rows where Totals are calculated in the fields below. I had originally used a 1px shape/line across these rows to create this but I didn’t know of a way to grow or shrink this line as groups disappeared or came back so it never looked right.

I can live with the gaps if I could just eliminate the phantom region.

ShareX-01_10_21_01_59_20
ShareX-01_10_21_01_59_20843×234 1.63 MB

#5

Thanks cmarchan, the video was extremely helpful and well presented…and it also just put me back a bunch of hours as I am now reviewing all the work I’ve done already…so thanks for that (lol).

I still cannot find the source of the ghost region…so, I’m duplicating the page and removing everything until I find it…or until the page is blank. It’s a single page design with over 15 hidden “pages” or groups.

1 Like
#6

if you share the editor I can take a quick look to find the problem.

Also, the method I provided in terms of not fixed width works, it just needs to have the other elements working in combination with them…so the color groups containing the columns, they need to expand as well, and all of the columns should be contained in the same group so not to expand further than you wish.

Without seeing a video demonstration of what you experienced when you implemented the suggested changes it is impossible to assess what was done incorrectly to not achieve the desired results.

Feel free to PM with a link to the editor so I could take a peek to assess what to do.

#7

We have all been there :+1:

#8

Ultimately, the solution was to extend the group that my columns are in all the way to the right up to the edge of the page. The issue seems to be that the gap between the right edge of a group and the right edge of the page squeezes the group despite the fact that the right edge of the page is nowhere near the right edge of the group. At some point, this gap, or “ghost” region, becomes a ramrod to squeeze the group well before the edge of the page gets there. Extending the group out to the right leaves no gap to squish into my columns because the group and page shorten together making the page behave as I would expect it to.