jQuery UI Widgets Forums Angular How to use jqxPanel with large widgets

This topic contains 1 reply, has 1 voice, and was last updated by  jqwidgetuser 1 month, 2 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • jqwidgetuser
    Participant

    Two forms constraint by jqxPanel

    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:

    https://i.imgur.com/CwA7ten.png


    jqwidgetuser
    Participant

    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

    https://i.imgur.com/LVM5Fl7.png

    • This reply was modified 1 month, 2 weeks ago by  jqwidgetuser.
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.