How to use jqxPanel with large widgets

[jqwidgetuserParticipant]

There are two forms on a page. Both forms are larger than the enclosed jqxPanels that contain them.

The top jqxPanel displays the scroll bars because the form that it contains is too large for it.
Unfortunately, the scrolling bars only help to reveal a part of the form and some of the elements couldn’t be scrolled to. The button at the bottom of the form is not reachable at all.
The user is not able to scroll to it to reveal the button that is located at the bottom of the form.

The lower form was created with the template. The jqxPanel that encloses it fails to realize that the form is too large. This jqxPanel does not show the scroll bars at all. The user is not able to access this form.

How to fix both of these issues? Here is the link to the Stackblitz project:

https://stackblitz.com/edit/github-vrcxln-vl1mjj?file=src%2Fapp%2Fapp.component.html

For your reference, below is the image showing both forms without the enclosed jqxPanel widget:

[jqwidgetuserParticipant]

To solve both of these problems the jqxPanel attribute [autoUpdate] needs to be set to true:

  <jqxPanel [autoUpdate]="true" [width]="300" [height]="150">
    <jqxForm #myForm 
      [width]="'auto'"
      [height]="'auto'"
      [template]='template'
      [value]='sampleValue'>
    </jqxForm>
  </jqxPanel>

I have updated the Stackblitz project to make the jqxPanel be able to scroll across entire widget it encloses:

https://stackblitz.com/edit/github-vrcxln-vl1mjj?file=src%2Fapp%2Fapp.component.html

[Author]

Posts