Setting the width of an on-screen custom widget

2702
2
Jump to solution
12-03-2015 05:32 AM
MajdiTurkman1
New Contributor III

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?

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

      },

View solution in original post

0 Kudos
2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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

      },

View solution in original post

0 Kudos
MajdiTurkman1
New Contributor III

Hello Robert,

It works !

Many thanks for your answer.

0 Kudos