nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

PanelBox WidgetOutline

IsaiahAguilera

Hello,
I am customizing the widget container PanelBox. I know that the colors are set using the VerticalPanelBoxButtonSkin and HorizontalPanelBoxButtonSkin as well as the PanelBox.as. My issue is the border placed around the widgets. If you go into the WidgetTemplateSkin and take out all borders and open them in a float container they indeed have no borders. But if you place that widget into a panel container it gives each widget a border on the right and bottom sides (see attached image). What I am trying to do is get rid of these borders for a more blended look. I'm not sure what I am missing here but can't seem to find any reference to this border in the above mentioned files. Any help would be greatly appreciated.

Thanks,

Capture.PNG

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Isaiah,

There are several things I would look at:
In the WidgetManager.mxml

positionPanelContainers function,

vPanelBox.setStyle("dividerThickness", 10);

loadNextContainer function,
```
leftContainer.gap = 2;
```

Also in the src\com\esri\viewer\utils\PanelBox.as there is this:

_button.width = getStyle("dividerThickness") + 1;

which leads me to believe that even if you set the dividerThickness to 0 it will always be 1.

All comments

IsaiahAguilera

Robert,
I had tried that after reading your first post, but I learned that control actually sets the thickness of the expand/retract button. I am starting to think its not related to the divider at all because if I switch the panel box to the right side, the white line stays on right side of the widget and not near the divider bar. I might just leave it on the right because the white line isn't as bad on the outer edge.

Capture.PNG

RobertScheitlin__GISP

Isaiah,

Comment out the +1 I was talking about earlier (both instances).

getStyle("dividerThickness");// + 1;

IsaiahAguilera

Thanks Robert,
I was able to get rid of part of it by adjusting the gap:

rightContainer.gap = -1;

This got rid of the line between widgets.

Still trying to track down the border for the outer edges the code, must be hidden really well. The white line in the image is still on the right side and the bottom(can't see bottom in image).

Capture.PNG

RobertScheitlin__GISP

Isaiah,

There are several things I would look at:
In the WidgetManager.mxml

positionPanelContainers function,

vPanelBox.setStyle("dividerThickness", 10);

loadNextContainer function,
```
leftContainer.gap = 2;
```

Also in the src\com\esri\viewer\utils\PanelBox.as there is this:

_button.width = getStyle("dividerThickness") + 1;

which leads me to believe that even if you set the dividerThickness to 0 it will always be 1.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.