White bar under viewport when using inset preview

Beta
#1

I was testing inset preview option to see if fits me better, but I noticed an odd behavior when I resize the viewport. A white bar shows up between the viewport and the ruler:

image
image1571×149 11.8 KB

I inspected it and found an easy fix to this problem with CSS:

.tco-preview-iframe {

box-shadow: none;

}

.tco-preview-iframe-container {

background-color: transparent;

}

Are you able to fix this on your side? I’ve been struggling to find a solution that will apply this fix “globally” in all sites that I’ve made (and future ones). Maybe you can give me directions to do this while it isn’t fixed? I’m not used to work with hooks or child themes, which is where I think the solution path will lead to.

I usually make a template to use as a starting path for all of the sites that I build, so if there’s a solution that I can apply in my template to use in my future websites that would be good.

#2

That caused an error for me where the resize handles (the blue highlighted lines) started to look off. I’ll have to take a deeper look as to how we can get the frame to not have this empty white area. Thanks

1 Like
#3

Did you fix that? It seems to work as expected now, I can’t reproduce this any more (now that I remembered that we have UI CSS and was going to apply the CSS on my end).

EDIT: I managed to reproduce the error again, the “fix” that I’ve applied on my end (to anyone that is searching for a solution) is the following:

  1. Activate Dev Toolkit in Cornerstone > Preferences > Functionality > Dev Toolkit
  2. Go to Dev Toolkit last tab “Tools” and edit “UI CSS”
  3. Add the following CSS:

    /* VIEWPORT BREAKPOINT INSET WHITE SPACE FIX */

    .tco-preview {
    height: 100% !important;
    }

    .tco-preview-iframe {
    box-shadow: none !important;
    }

    .has-ui .tco-resize {
    height: calc(100% - 30px) !important;
    }

    .has-ui .tco-preview-iframe-container {
    background-color: transparent !important;
    }

    .tco-preview-iframe-container iframe {
    box-shadow: var(–bs-iframe);
    }

That should fix the unexpected behaviour while keeping the original box shadow and the height size of blue handlebars at the lateral edge of the viewport (at least for me, as the theme works with lots of CSS vars that may be attached to a more complex JS behind).

#4

I appreciate those notes. Let me run through this some more, but I think we’ll get this into Pro 6.5. Thanks have a great day.