Moving search window to left of HeaderController widgets in foldable theme

712
3
08-30-2017 09:50 AM
TraceyVan_Gundy2
New Contributor II

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

0 Kudos
3 Replies
RobertScheitlin__GISP
MVP Emeritus

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.

TraceyVan_Gundy2
New Contributor II

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!

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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