Disable Expand widget responsive

205
2
Jump to solution
10-09-2020 12:22 PM
GregoryBologna
Occasional Contributor

My expand widget height gets too big and looks really bad in responsive mode. For example, when I add a print widget to the expander and the browser width is resized the expanded content increases the height and snaps to the edge of the browser. This makes it difficult to see and even use the print export controls. I am looking for a way to keep the size of the expanded content equal size in either desktop or mobile. Is there CSS I can add to override this? Thanks!

        var printExpand = new Expand({
          content: new Print({
            view: view,
            printServiceUrl: printServiceUrl
          }),
          view: view,
          autoCollapse: true,
          expanded: false,
          expandTooltip: 'Print Map',
          group: "top-right"
        }); 

The expanded content here has good dimensions when not in responsive mode

Responsive mode

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
AnneFitz
Esri Contributor

You can define the expand.mode as "floating" to keep the expand widget from changing based on the browser width.
Expand | ArcGIS API for JavaScript 4.17 

const expand = new Expand({
  content: widget,
  mode: "floating"
});

View solution in original post

0 Kudos
2 Replies
AnneFitz
Esri Contributor

You can define the expand.mode as "floating" to keep the expand widget from changing based on the browser width.
Expand | ArcGIS API for JavaScript 4.17 

const expand = new Expand({
  content: widget,
  mode: "floating"
});

View solution in original post

0 Kudos
GregoryBologna
Occasional Contributor

Exactly what I needed. Thanks!

0 Kudos