Problem with popupView UI component

Support
#1

Hi,

I am having an issue with using the popupView component. When the popupView is displayed (opened up) the components are all overlayed on top of one another. If I enter something into a textfield then tab to the next text field, then the redraw of the screen shows everything correctly. The behaviour does vary slightly by browser.

  • In Mac OSX Safari 11.0.3, all components in the popup view are overlayed.
  • In Mac OSX Chrome 64.0.3282.167, the components are overlayed or crammed together vertically.
  • In WIndows IE I’ve seen both of the above.

My project is currently using 6.7.10 framework. However, the same issue exists in 6.8.2. I have created a minimal test project that exhibits the behaviour.

Is there any work around for this issue? Any assistance is greatly appreciated. Thank you!

Popup first opened …
safari-1

After a value is entered and the pop up is redrawn.
safari-2

Here is another example … I opened up the billing contact popup and this is what is first show.
safari-3

After entering data and tabbing, the popup is redrawn …
safari-4

Here is the test project. I removed the deploy directory before zipping the project.
popup-view-tester.zip (219.3 KB)

Regards, Tony.

1 Like
#2

More info … The more I test this behaviour the more I find the initial open visual state of the popupView to be pseudo-random. I thought I saw a pattern with different browsers, but that is not correct. However, the screens shots in my original post are representative.

Thanks!

#3

Hi,

Thank you for the test project, I’ve reproduced the error and created the issue https://youtrack.cuba-platform.com/issue/PL-10448 We will try to figure out what is wrong and how to fix it

#4

Hi Yuriy, many thanks for looking into this.

In the short term I have decided to change my database model and use one to one composition (as opposed to the embedded entities) and have a separate dialog edit. That seems to be a good workaround for my application.

Regards, Tony.

#5

2 posts were split to a new topic: How to implement static popover

#8

I had the exact same problem. I traced the culprit to the fade-in/out CSS animation. Added the following SCSS overrides to my theme and the problem went away. Note fade-in/out is set to 0ms.

// Work around for popupview layout problem.  With animation enabled the layout of popupview contents
// is messed up.
@mixin valo-popupview-override($primary-stylename: v-popupview) {
  .#{$primary-stylename} {
    @include valo-link-style;
  }

  .#{$primary-stylename}-popup {
    @include valo-overlay-style($animate-in: v-popupview-animate-in 0ms, $animate-out: (valo-animate-out-fade 0ms));

    .popupContent {
      @include valo-panel-adjust-content-margins;
    }
  }

  .#{$primary-stylename}-loading {
    margin: $v-layout-spacing-vertical $v-layout-spacing-horizontal;
    @include valo-spinner;
  }
}