Strange layout issues on reusable component

[kblock111]

I have a reusable navbar element. There are 2 buttons that non-auth users see and one widget that authed users see. (Ignore the green, it’s for debugging the container)
Layout seems to be correct when I’m editing /looking at the reusable component. But the layout is broken when I drop it on to a page.

Issues:

1. When I drop the widget onto a page, the non-auth buttons stack vertically and the avatar button does not show (presumably the preview is non-authed, so that’s presumably fine)
2. In the widget, there is no max w or h. But when I drop the widget on to a page, the width is set to min 100px and max 80px, which is obviously an issue.

I can manually correct 2) but am bothered about why it’s happening. And since #1 is an issue, maybe it’s related.

If you need any other panel inspector screenshots, please let me know.

Thanks in advance.

[boston85719]

@kblock111

1. In the widget, there is no max w or h. But when I drop the widget on to a page, the width is set to min 100px and max 80px, which is obviously an issue.

Looks like it is not the width but the height, and this may be because it is backwards (ie: 100 is greater than 80 so 80 should be min and not max and 100 should be max and not min)

[kblock111]

I got this sorted though it sure had me going.
I figured out where the 100-80px height was coming from
I think the biggest part of the problem is that the builder default was 1400px. Thus things looked ok at runtime though i’m still tracking down new issues.
Thanks Boston!