Setting the width of an on-screen custom widget

[MajdiTurkman1]

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?

[RobertScheitlin__GISP · Accepted solution]

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);
      },

[MajdiTurkman1]

Hello Robert,

It works !

Many thanks for your answer.