jqxSplitter width of second panel 100% of total

[revenParticipant]

Hi,

I’m using a fairly basic jqxsplitter, its nested deep down in other parts of the app, but the splitter itself is pretty basic.

Theres an outer div with say a width of 1000px. The splitter width is set to 100% (even tried 1000 value). There are two panels one with min:300, not collapsible, another collapsible without the width set (so it should take up the remaining width).

However, both panels width are set to basically 100% of the area (I have them printing out their actual element widths). This is messing up my panel content as it needs to be sized at 100% width, but this is over extending.

However, as soon as I resize the panels via the splitbar, the width is correctly set and the content takes up the correct width.

`<div #container style=”width:100%;height:100%;display:block;position:relative”>
<jqxSplitter #usermatchingSplitter [panels]=”[{ min:300},{ collapsible: true}]” [height]=”‘100%'” [width]=”‘100%'”
[orientation]=”‘vertical'” [theme]=”‘default'” [splitBarSize]=”5″>

<div #panel1>width: {{getWidth()</div>
<div #panel2>width2: {{getWidth2()}}</div>
</jqxSplitter>
</div>

how can i get it so, panel2 width is set to 100% of the remaining space???

[revenParticipant]

managed to get it to work with
[panels]=”[{ min: 150, size: ‘70%’, collapsible:false}, { min: paneSize, size:paneSize, collapsed:true }]”
paneSize I set in code via

ngOnInit(){
    this.calcPaneSize();
  }

  paneSize: number;
  calcPaneSize():void {
    let width = this.container.nativeElement.clientWidth - 300;
    if(isNaN(width) || width < 650) width = 650;
    else if(width > 1000) width = 1000;
    this.paneSize = width;
  }
  @HostListener('window:resize', ['$event'])
  onResize(event) {
      this.calcPaneSize();
  }

just incase anyone has a similar issue.

[MartinParticipant]

Hello reven,

Thank you for this update!

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts