Kuali Rice Development
  1. Kuali Rice Development
  2. KULRICE-12028

Lightbox with embedded page in it renders less than perfectly

    Details

    • Type: Bug Fix Bug Fix
    • Status: Closed Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 2.4
    • Component/s: Development
    • Security Level: Public (Public: Anyone can view)
    • Labels:
      None
    • Similar issues:
      KULRICE-7668Ajax Rendering of Lightbox doesn't block page
      KULRICE-10609Disable 'show x entries' and paging controls for grids with results less than 10
      KULRICE-11044KRAD PoC - Problems with refreshId when used in a lightbox.
      KULRICE-13147Inefficiencies in view lifecycle and rendering
      KULRICE-8362Dialog: Progressive Render doesn't work when lightbox is opened for second time
      KULRICE-7070Multi-row tables not rendering correctly
      KULRICE-9941Global application header appears in lightbox
      KULRICE-10548Freemarker rendering phase extension
      KULRICE-13092AFT Failure LabsValidationAft Value must be greater than 2 displayed instead of value must be less than 50
      KULRICE-7997Quickfinder lightbox too small
    • Sprint:
      2.4.0-rc1 Sprint 4, 2.4.0-rc1 Sprint 5
    • KAI Review Status:
      Not Required
    • KTI Review Status:
      Not Required
    • Code Review Status:
      Not Required
    • Include in Release Notes?:
      Yes

      Description

      KRAD Sample app -> Library -> Containers -> Dialog group -> lightbox from a url

      The lightbox renders and at first glance appears to be empty. The lightbox is scrollable, and scrolling reveals the content, this seems like it should not be happening, and the content should be visible when the lightbox first appears.

        Issue Links

          Activity

          Hide
          Claus Niesen added a comment -

          This used to work fine and didn't had a double scrollbar issue. See http://demo.rice.kuali.org/kr-krad/dialog-configuration-test?viewId=DialogTestView

          Probably something with CSS, maybe even with our bootstrap layout?

          Show
          Claus Niesen added a comment - This used to work fine and didn't had a double scrollbar issue. See http://demo.rice.kuali.org/kr-krad/dialog-configuration-test?viewId=DialogTestView Probably something with CSS, maybe even with our bootstrap layout?
          Hide
          Steve Manning (Inactive) added a comment -

          I also see that the Library - Elements - Link - Link using lightbox example seems to work correctly (tested in CDT), just making a note of this here so I don't forget, could be useful to compare how these separate examples are set up.

          Show
          Steve Manning (Inactive) added a comment - I also see that the Library - Elements - Link - Link using lightbox example seems to work correctly (tested in CDT), just making a note of this here so I don't forget, could be useful to compare how these separate examples are set up.
          Hide
          Steve Manning (Inactive) added a comment -

          Have isolated this to a javascript problem, the krad.utility.js function setupLightboxForm has an issue where when the jQuery wrap function is used with the URL example, the iframe is appended to the form tag, rather than the form tag wrapping the iframe.

          Show
          Steve Manning (Inactive) added a comment - Have isolated this to a javascript problem, the krad.utility.js function setupLightboxForm has an issue where when the jQuery wrap function is used with the URL example, the iframe is appended to the form tag, rather than the form tag wrapping the iframe.
          Hide
          Steve Manning (Inactive) added a comment -

          Determined that this problem is being caused by the iframe being rendered asynchronously. The jQuery(".fancybox-inner").children().wrap("<form style='margin:0; padding:0; overflow:auto;' id='kualiLightboxForm'>") call occurs when the DOM hasn't had the iframe imbedded in it, and as a result, the <form> tag is prepended rather than wrapped. This results in the rendering problem.

          Show
          Steve Manning (Inactive) added a comment - Determined that this problem is being caused by the iframe being rendered asynchronously. The jQuery(".fancybox-inner").children().wrap("<form style='margin:0; padding:0; overflow:auto;' id='kualiLightboxForm'>") call occurs when the DOM hasn't had the iframe imbedded in it, and as a result, the <form> tag is prepended rather than wrapped. This results in the rendering problem.
          Hide
          Steve Manning (Inactive) added a comment -

          Attempted fixes:

          Creation of custom "wrap" variable (used by jQuery fancybox) to include the <form> tag.

          Creation of callbacks using both the "afterLoad" variable and the _appendCallbackFunctions() js function, using both the predefined setupLightbox() function and anonymous functions replicating its functionality.

          Show
          Steve Manning (Inactive) added a comment - Attempted fixes: Creation of custom "wrap" variable (used by jQuery fancybox) to include the <form> tag. Creation of callbacks using both the "afterLoad" variable and the _appendCallbackFunctions() js function, using both the predefined setupLightbox() function and anonymous functions replicating its functionality.
          Hide
          Steve Manning (Inactive) added a comment -

          After some peering with Claus, an easier and much more straightforward way to fix this issue was identified. Since the javascript function krad.utility#showLightboxURL() is used for external content and opens this content in a lightbox, there is never a need to have client-side validation applied to it. The fix stops the attempt to wrap the lightbox with the kualiForm tag.

          Show
          Steve Manning (Inactive) added a comment - After some peering with Claus, an easier and much more straightforward way to fix this issue was identified. Since the javascript function krad.utility#showLightboxURL() is used for external content and opens this content in a lightbox, there is never a need to have client-side validation applied to it. The fix stops the attempt to wrap the lightbox with the kualiForm tag.

            People

            • Assignee:
              Steve Manning (Inactive)
              Reporter:
              Steve Manning (Inactive)
            • Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Time Tracking

                Estimated:
                Original Estimate - 4 hours
                4h
                Remaining:
                Remaining Estimate - 4 hours
                4h
                Logged:
                Time Spent - Not Specified
                Not Specified

                  Agile

                    Structure Helper Panel