Select to view content in your preferred language

PanelBox WidgetOutline

1057
4
Jump to solution
04-10-2013 07:33 AM
IsaiahAguilera
Frequent Contributor
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,
Tags (2)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus
Isaiah,

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

  1. positionPanelContainers function,
    vPanelBox.setStyle("dividerThickness", 10);

  2. 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.

View solution in original post

0 Kudos
4 Replies
RobertScheitlin__GISP
MVP Emeritus
Isaiah,

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

  1. positionPanelContainers function,
    vPanelBox.setStyle("dividerThickness", 10);

  2. 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.
0 Kudos
IsaiahAguilera
Frequent Contributor
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).
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
Isaiah,

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

getStyle("dividerThickness");// + 1;
0 Kudos
IsaiahAguilera
Frequent Contributor
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.
0 Kudos