#104185
jqwidgetsdev
Participant

Hi,

Here goes.

DOM
.smart-window .smart-content-container
height: 100% <===== is the culprit

When I disable height the splitter appears as normal.

Here is my template

<template>
  <div class="vue-root">
    <smart-window ref="window" opened maximized label="">
      <Menu />
      <smart-splitter>
        <smart-splitter-item collapsible size="300">
          <NavigationBar />
        </smart-splitter-item>
        <smart-splitter-item collapsible>
          <TabsMain />
        </smart-splitter-item>
      </smart-splitter>
    </smart-window>
  </div>
</template>

CSS

<style scoped>
.smart-splitter {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 700px) {
  .smart-window {
    width: 90% !important;
    left: 5% !important;
    top: 5px !important;
  }
}
</style>