Spring Roo
  1. Spring Roo
  2. ROO-3344

Adding a scroll bar to the JSF dialog

    Details

    • Type: Improvement Improvement
    • Status: Resolved
    • Priority: Minor Minor
    • Resolution: Works as Designed
    • Affects Version/s: 1.2.3.RELEASE
    • Fix Version/s: None
    • Component/s: @ ROO SHELL, JSF
    • Labels:
    • Environment:
      All Platforms

      Description

      Beans that have more than a few fields are not edit-able through the JSF default dialog (popup) because the dialog is longer than can be viewed on the screen. Please add a scroll-bar to the dialog.

      1. complaintJsfJira.roo
        3 kB
        Gary Gerber
      1. desktop1.JPG
        121 kB
      2. desktop2.JPG
        159 kB
      3. desktop3.JPG
        136 kB
      4. jsf.png
        675 kB
      5. jsf2.png
        463 kB

        Activity

        Hide
        Gary Gerber added a comment -

        Here is the project file that I was using when I found the problem.

        Show
        Gary Gerber added a comment - Here is the project file that I was using when I found the problem.
        Hide
        Alan Stewart added a comment -

        The create, edit and view dialogs are actually scrollable. Although your dialog is large, you can first drag the top of the dialog to resize it and you will then see the scroll bar. I did try a height of 600 to force the display of the vertical scroll bar, but then this would be visually unacceptable for smaller dialogs and there is no one value that I could use to suit all use cases.
        Let me know if you can't resize your dialogs, but I was able to resize it in my browser.

        Show
        Alan Stewart added a comment - The create, edit and view dialogs are actually scrollable. Although your dialog is large, you can first drag the top of the dialog to resize it and you will then see the scroll bar. I did try a height of 600 to force the display of the vertical scroll bar, but then this would be visually unacceptable for smaller dialogs and there is no one value that I could use to suit all use cases. Let me know if you can't resize your dialogs, but I was able to resize it in my browser.
        Hide
        Gary Gerber added a comment -

        Alan, no. My experience with the dialog is not going like you describe. When I drag the top, the scrollbar shows up, but when I release it, the top of the dialog moves upward out of view - I can't get it back into view.

        I have rewritten the application with manually configured pages that access the bean. I know that the work to have a configurable component/page available in web jsf setup is not trivial, but it is completely necessary to have a functional jsf application.

        I appreciate your work, and maybe when I have the experience, I can help develop the feature. Until then, I will spend the time to do things manually.

        Thanks for your efforts.

        Show
        Gary Gerber added a comment - Alan, no. My experience with the dialog is not going like you describe. When I drag the top, the scrollbar shows up, but when I release it, the top of the dialog moves upward out of view - I can't get it back into view. I have rewritten the application with manually configured pages that access the bean. I know that the work to have a configurable component/page available in web jsf setup is not trivial, but it is completely necessary to have a functional jsf application. I appreciate your work, and maybe when I have the experience, I can help develop the feature. Until then, I will spend the time to do things manually. Thanks for your efforts.
        Hide
        Alan Stewart added a comment -

        Gary, I am able to resize the dialog and the scroll bar enables all the fields and buttons to be viewed OK. See attached Chrome screenshot (right side) Also works in Firefox as well. All I did was drag the the dialog down in size from the top and then moved the dialog box a bit lower. Perhaps you can attach a screenshot of what you're observing. But everything appears to work for me out of the box - no changes to the page at all

        Show
        Alan Stewart added a comment - Gary, I am able to resize the dialog and the scroll bar enables all the fields and buttons to be viewed OK. See attached Chrome screenshot (right side) Also works in Firefox as well. All I did was drag the the dialog down in size from the top and then moved the dialog box a bit lower. Perhaps you can attach a screenshot of what you're observing. But everything appears to work for me out of the box - no changes to the page at all
        Hide
        Gary Gerber added a comment - - edited

        after resizing the dialog, the top positions itself far out of reach upwards. I can not do anything to get it back without navigating away from the page, which does not save the bean. I am using chrome Version 23.0.1271.97 m on Window 7 Professional SP 1 on an HP EliteBook with an external monitor and Roo 1.2.3

        Show
        Gary Gerber added a comment - - edited after resizing the dialog, the top positions itself far out of reach upwards. I can not do anything to get it back without navigating away from the page, which does not save the bean. I am using chrome Version 23.0.1271.97 m on Window 7 Professional SP 1 on an HP EliteBook with an external monitor and Roo 1.2.3
        Hide
        Gary Gerber added a comment -

        The scrollbar does show up, just not every time. This does not matter, because the top fields are completely unviewable. Thoughts?

        Show
        Gary Gerber added a comment - The scrollbar does show up, just not every time. This does not matter, because the top fields are completely unviewable. Thoughts?
        Hide
        Alan Stewart added a comment -

        I can actually reproduce what you see on Windows 7 and Chrome. But, it only happens when I attempt to drag the dialog with the double cross-hairs are visible on the border of the dialog. By double cross-hairs, I mean Windows' mouse pointer that has a cross of arrows pointing up, down, left, and right. With this, I also observe the dialog positioned far out of reach upwards.

        However if you position the mouse on the top border so that the mouse pointer changes to just the up/down arrow pointer and then drag it all works OK as I see in Linux (see attached Windows 7 jsf2.png). The scroll bar appears every time.

        Try it out. I don't think there is anything I can do in the jsf add-on to fix this apart from adding a height attribute to the dialog, but you are welcome to add this manually yourself, as Roo won't override the pages.

        Show
        Alan Stewart added a comment - I can actually reproduce what you see on Windows 7 and Chrome. But, it only happens when I attempt to drag the dialog with the double cross-hairs are visible on the border of the dialog. By double cross-hairs, I mean Windows' mouse pointer that has a cross of arrows pointing up, down, left, and right. With this, I also observe the dialog positioned far out of reach upwards. However if you position the mouse on the top border so that the mouse pointer changes to just the up/down arrow pointer and then drag it all works OK as I see in Linux (see attached Windows 7 jsf2.png). The scroll bar appears every time. Try it out. I don't think there is anything I can do in the jsf add-on to fix this apart from adding a height attribute to the dialog, but you are welcome to add this manually yourself, as Roo won't override the pages.
        Hide
        Gary Gerber added a comment -

        Thanks Alan! Well, adding the height attribute is actually a workable solution! It took me a second to wrap my head around it, so thank you for your patience. I am quite happy with the way it works now as I can simply wire the attribute for each entity and be on my way.

        Clarity for others, maybe, will be to know that I added the height attribute to the roo generated .xhtml page (in this case ~\pages\complaint.xhtml) within the dialog:

        <p:dialog id="createDialog" header="#

        {messages.label_create}

        Complaint" modal="true" widgetVar="createDialogWidget" dynamic="true" visible="#

        {complaintBean.createDialogVisible}

        " resizable="true" maximizable="true" showEffect="fade" hideEffect="explode" height="300">

        Thanks again Alan!

        Show
        Gary Gerber added a comment - Thanks Alan! Well, adding the height attribute is actually a workable solution! It took me a second to wrap my head around it, so thank you for your patience. I am quite happy with the way it works now as I can simply wire the attribute for each entity and be on my way. Clarity for others, maybe, will be to know that I added the height attribute to the roo generated .xhtml page (in this case ~\pages\complaint.xhtml) within the dialog: <p:dialog id="createDialog" header="# {messages.label_create} Complaint" modal="true" widgetVar="createDialogWidget" dynamic="true" visible="# {complaintBean.createDialogVisible} " resizable="true" maximizable="true" showEffect="fade" hideEffect="explode" height="300"> Thanks again Alan!

          People

          • Assignee:
            Alan Stewart
            Reporter:
            Gary Gerber
          • Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: