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; } } }

Widget container (icons in control bar) are not centered since I upgraded to 2.4

AlisonPage

Does anyone know which file controls the position of the actual group of widget icons in the control bar? I've looked all through the HeaderControl widget and WidgetContainer widget mxml files. Since I upgraded from viewer 2.3.1 to 2.4 the group of icons has moved far to the right instead of being centered.
Thanks,
Alison

Vind meer berichten getagd met

Accepted answers

All comments

AshleyPeters

Robert,

Screenshot is attached. Let me know if you need other information.

Thanks!

Ashley

FW_Screenshot.JPG

rscheitlin

Ashley,

Can you attach a screen shot of what your header controller looks like?

AshleyPeters

Robert,

That's correct. Using horizontalAlign="left" the icons moved slightly to the left, but they are still on the right side of the screen. No where near center. Any suggestions on improving their layout?

Thanks in advance!

Ashley

rscheitlin

Ashley,

So you set the horizontalAlign="Left" and that did not work?

AshleyPeters

Alison,

In the HeaderControllerWidget try changing the HorizontalAlign to left instead of center:

<s:HGroup id="widgetBox"
                          width="100%"
                          horizontalAlign="center">
                    <HeaderController:WidgetItemDataGroup id="widgetItemDG"
                                                          dataProvider="{widgetItemArrCol}"
                                                          widgetItemClick="widgetItemDG_widgetItemClickHandler(event)"
                                                          widgetItemMouseOut="widgetItemDG_widgetItemMouseOutHandler(event)"
                                                          widgetItemMouseOver="widgetItemDG_widgetItemMouseOverHandler(event)">
                        <HeaderController:layout>
                            <s:HorizontalLayout gap="12"
                                                useVirtualLayout="true"
                                                verticalAlign="middle"/>
                        </HeaderController:layout>
                    </HeaderController:WidgetItemDataGroup>
                </s:HGroup>

Robert,

I made this change in my code, but the tray still stays to the right side of viewer, though it did move to the left some. Is there a way to move it further to the left?

Thanks in advance!

Ashley

RossBrewer

Would it be possible to make the same alignment adjustment to the widget container icons by editing the HeaderControllerWidget.xml?

AlisonPage

That worked!
Thanks again,
Alison

AlisonPage

Thanks.. sorry I misread it, had a lot going on lately.
Thanks again,
Alison

PetrTrefil

Alison,

You missed where I said to change center to left instead.

You will find it on row n.340 in "HeaderControllerWidget.mxml", which is under
wigdets/HeaderController

rscheitlin

Alison,

You missed where I said to change center to left instead.

AlisonPage

Hi Robert,

The horizontal align is already set to center in my mxml yet my icons are off to the right. Is there a way to add a margin or anything so I can just play with positioning it until it's "more centered". I work more in HTML/CSS than MXML so I'm not sure of how/if margins can be added.

Thank you,
Alison

rscheitlin

Alison,

In the HeaderControllerWidget try changing the HorizontalAlign to left instead of center:

<s:HGroup id="widgetBox"
                          width="100%"
                          horizontalAlign="center">
                    <HeaderController:WidgetItemDataGroup id="widgetItemDG"
                                                          dataProvider="{widgetItemArrCol}"
                                                          widgetItemClick="widgetItemDG_widgetItemClickHandler(event)"
                                                          widgetItemMouseOut="widgetItemDG_widgetItemMouseOutHandler(event)"
                                                          widgetItemMouseOver="widgetItemDG_widgetItemMouseOverHandler(event)">
                        <HeaderController:layout>
                            <s:HorizontalLayout gap="12"
                                                useVirtualLayout="true"
                                                verticalAlign="middle"/>
                        </HeaderController:layout>
                    </HeaderController:WidgetItemDataGroup>
                </s:HGroup>

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

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