topic Re: Allocating more space in TAB theme groups in Web AppBuilder Custom Widgets Questions

Allocating more space in TAB theme groups

RodWoodfordOld — Thu, 28 Apr 2016 06:12:16 GMT

Hi,

Is it possible to allocate more space for grouped widgets in the TAB Theme? I would like to give 75% more space to the eSearch widget and 25% to the addlayer widget. At the moment it's split 50/50. If this is possible can anyone advice on how to do this? See screen short below.

cheers

Rod

Re: Allocating more space in TAB theme groups

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:04:57 GMT

Rod,

This code is not flexible, it is specific to your exact scenario of wanting the first widget in the group to have 75% and the second to have 25%

In the [install dir]\server\apps\[app#]\themes\TabTheme\panels\TabPanel\Panel.js change the _setFrameSize function.

_setFrameSize: function(frame) {
        var count = this.getChildren().length + 1;
        var hPrecent;
        if(count === 1){
          query('.tab-widget-frame', this.containerNode).style('height','75%');
          html.setStyle(frame.domNode, 'height', '75%');
        }else if(count === 2){
          query('.tab-widget-frame', this.containerNode).forEach(function(node, index){
            if (index === 0){
              hPrecent = 75;
            }else{
              hPrecent = 25;
            }
            html.setStyle(node, 'height', hPrecent + '%');
          });
          html.setStyle(frame.domNode, 'height', '25%');
        }else{
          hPrecent = 1 / count * 100;
          query('.tab-widget-frame', this.containerNode).style('height', hPrecent + '%');
          html.setStyle(frame.domNode, 'height', hPrecent + '%');
        }
      }

Re: Allocating more space in TAB theme groups

RodWoodfordOld — Sat, 30 Apr 2016 07:03:27 GMT

Thanks Robert,

I'll give this ago and get back to you re answered.

cheers

Rod

Re: Allocating more space in TAB theme groups

RodWoodfordOld — Mon, 02 May 2016 01:21:02 GMT

Hi Robert,

Works beautifully. Thanks for your help. See link below when you can.

Bayswater Maps

I did make one change to prevent other tabs from reducing in size. If count is 1 then set height to 100%

if(count === 1){

query('.tab-widget-frame', this.containerNode).style('height','100%');

html.setStyle(frame.domNode, 'height', '100%');

cheers

Rod