topic Moving search window to left of HeaderController widgets in foldable theme in ArcGIS Web AppBuilder Questions

Moving search window to left of HeaderController widgets in foldable theme

TraceyVan_Gundy2 — Wed, 30 Aug 2017 16:50:47 GMT

I'm using the foldable theme, with Layout 4, in which the search window appears to the right of the HeaderControl widgets. I would like to swap places between the HeaderController widgets and the search window.

Essentially, I want to go from this:

To this:

Without doing it by adding paddingRight to the search location, because the "padding" invisibly covers the widget icons so they cannot be selected except from very thin slivers above and below each icon. Basically, how do I do it *right?*

I feel like this should be a fairly simple move, but I'm really new at this. Any suggestions are appreciated.

Thanks!

Tracey

Re: Moving search window to left of HeaderController widgets in foldable theme

RobertScheitlin__GISP — Fri, 10 Dec 2021 20:37:57 GMT

Tracey,

One way is to, In the main config.json for your app just make these changes (lines 10 and 31):

  "widgetOnScreen": {
    "widgets": [
      {
        "uri": "themes/FoldableTheme/widgets/HeaderController/Widget",
        "position": {
          "left": 0,
          "top": 0,
          "right": 0,
          "height": 40,
          "paddingRight": 2,
          "relativeTo": "browser"
        },
        "version": "2.5",
        "id": "themes_FoldableTheme_widgets_HeaderController_Widget_1",
        "name": "HeaderController"
      },
      {
        "uri": "widgets/Scalebar/Widget",
        "position": {
          "left": 288,
          "bottom": 5,
          "relativeTo": "map"
        },
        "version": "2.5",
        "id": "widgets_Scalebar_Widget_2",
        "name": "Scalebar"
      },
      {
        "uri": "widgets/Search/Widget",
        "position": {
          "right": 275,
          "top": 2,
          "relativeTo": "browser",
          "zIndex": 1
        },
        "version": "2.5",
        "id": "widgets_Search_Widget_3",
        "name": "Search"
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The issue with this is the search widget is absolutely positioned so it will not take in to account screen size or number of widgets added to the header controller. So setting the widgets absolute right position will not work for all scenarios. This is the issue with your desired layout.

Re: Moving search window to left of HeaderController widgets in foldable theme

TraceyVan_Gundy2 — Wed, 13 Sep 2017 14:01:58 GMT

Thanks; this works. Granted, if the window is sized too small, the Header Controller widgets (there are a lot of them) tuck themselves behind the search window long before they get pushed into the "More" panel, but the users will only be accessing this app from machines with very large monitors, so I think we are good. I know it would be more robust if we create a custom layout, but that will have to wait for another day.

Thanks for your help!

Re: Moving search window to left of HeaderController widgets in foldable theme

RobertScheitlin__GISP — Wed, 13 Sep 2017 14:29:49 GMT

Glad it worked for you. Don't forget to mark this question as answered.