Problem with popupView UI component


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 …

After a value is entered and the pop up is redrawn.

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

After entering data and tabbing, the popup is redrawn …

Here is the test project. I removed the deploy directory before zipping the project. (219.3 KB)

Regards, Tony.

1 Like

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.



Thank you for the test project, I’ve reproduced the error and created the issue We will try to figure out what is wrong and how to fix it

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.

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

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;