topic Re: Modifying panel height results in incorrect position on mobile devices in Web AppBuilder Custom Widgets Questions

Modifying panel height results in incorrect position on mobile devices

MaximeDemers — Thu, 29 Aug 2019 14:39:31 GMT

Hi,

I want to reduce the height of a widget panel. I did so using a css like

#My_Widget_panel {

height: 290px !important;

}

However, when I open the app on a mobile, the panel is not positioned a the the bottom of the screen.

Is there a way to position the panel correctly on mobile device?

Re: Modifying panel height results in incorrect position on mobile devices

RobertScheitlin__GISP — Thu, 29 Aug 2019 14:52:03 GMT

Maxime,

Don't adjust the panels height using css. Instead do the height adjustment in code.

Re: Modifying panel height results in incorrect position on mobile devices

MaximeDemers — Thu, 29 Aug 2019 15:00:37 GMT

I have found another of your answers that use the following code in the startup:

      var panel = this.getPanel();
      var pos = panel.position;
      pos.height = 290;
      panel.setPosition(pos);
      panel.panelManager.normalizePanel(panel);

But there is no effect in my app. I also tryed using the resize method

var panel = this.getPanel();

panel.resize(290, 290);

But no effect neither. Any suggestion? Thank you

Re: Modifying panel height results in incorrect position on mobile devices

RobertScheitlin__GISP — Thu, 29 Aug 2019 15:03:30 GMT

Maxime,

Does this.getPanel() return an object or is it null?

Re: Modifying panel height results in incorrect position on mobile devices

MaximeDemers — Thu, 29 Aug 2019 15:12:30 GMT

Yes, it returns the widget panel object.

I don't know if it's related to my problem, but the widget is not a widgetOnScreen, it's a widget with a button embedded in the header, so in the config.json, it is in the widgetPool property.

Re: Modifying panel height results in incorrect position on mobile devices

MaximeDemers — Thu, 29 Aug 2019 15:31:09 GMT

It's a "themes/FoldableTheme/panels/FoldablePanel/Panel"

It seems the only position that affect the height is the bottom position. Height and width have not effect.

Re: Modifying panel height results in incorrect position on mobile devices

RobertScheitlin__GISP — Thu, 29 Aug 2019 15:37:18 GMT

Maxime,

OK, looking at the Panel.js code yes the height position is ignored. So you would have to change the code in the Panel.js file to fix that.