Skip to main content

Page jumps to the top when opening submenus

Question​

> I have embedded the configurator via Web Component. When I select a submenu (e.g. color or accessories), the page always automatically jumps to the top. The configurator is also displayed differently on the cell phone - you only see the 3D model and have to scroll a long way to see the selection options.

Answer​

This behavior is related to the CSS styles of your website - in particular the CSS property contain: paint on the main element.

Solution 1: deactivate contain:paint​

Insert the following into your CSS file (or a style block on the page):

main {
  contain: none !important;
}

This prevents the browser from "cutting off" the area and behaving incorrectly when opening submenus.

Solution 2: Adjust mobile height in the layout​

To make the configurator easier to use on mobile devices and avoid having to scroll so far, adjust the layout in K3:

  1. Open the layout editor: In the editor of your configurator, click on the pencil icon at the top of the desktop icon.

  2. Select template: Click on "Use as template" to make the layout editable.

  3. Add CSS: Add the following rule in the appropriate place:

@container (max-width: 700px) {
  .k3-layout-paginated-right {
    height: 100vh;
  }
}

Why is this happening?​

The CSS property contain: paint is used by some website themes to improve rendering performance. However, it can cause drop-down menus and overlays within the configurator to be cut off or trigger unexpected scrolling behavior.

integrate :::tip Web Component correctly The standard embedding via Web Component looks like this:

<k3-view lang="de" app="IHRE-APP-ID"></k3-view>
<script type="module" src="https://k3.objectcode.de/app/index.js"></script>

:::

Further information​

  • CSS conflicts with website themes
  • Responsive display on mobile devices
  • Scrolling problems with IFrame/Web Component