topic Setting the width of an on-screen custom widget in Web AppBuilder Custom Widgets Questions

Setting the width of an on-screen custom widget

MajdiTurkman1 — Sun, 12 Dec 2021 09:15:57 GMT

Hello,

I'm trying to set the width of an on-screen custom widget to be "80%" of the screen. Not to a specific value in config.json file:

"position": {
          "relativeTo": "map",
          "width": 550,
          "height": 450
        },

Anyone have any idea please?

Re: Setting the width of an on-screen custom widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:16:00 GMT

Majdi,

Setting the widgets width by percentage is not currently supported. If you want this ability then you would have to implement it yourself. The starting point for this would be in the OnScreenWidgetPanel.js. Find the _setDesktopPosition function and replace it with the function below:

      _setDesktopPosition: function(position) {
        html.place(this.domNode, jimuConfig.mapId);

        var pos = {
          left: position.left + 'px',
          right: 'auto',
          top: position.top + 'px',
          width: (position.width || this.position.width || this._originalBox.w) + 'px',
          height: (position.height || this.position.height || this._originalBox.h) + 'px'
        };

        if((position.width && position.width.indexOf('%') > -1) || (this.position.width && this.position.width.indexOf('%') > -1)){
          pos.width = (position.width || this.position.width || this._originalBox.w);
        }

        html.setStyle(this.domNode, pos);
      },

Re: Setting the width of an on-screen custom widget

MajdiTurkman1 — Sun, 06 Dec 2015 08:59:18 GMT

Hello Robert,

It works !

Many thanks for your answer.