splitter not aligned to top

[jqwidgetsdev]

Hi,

For this exampple https://www.htmlelements.com/vue/demos/splitter/events/ I am noticing the splitter appears halfway down the screen and not aligned to top.

Can you whip up an example on how to resolve this?

Thanks.

[svetoslav_borislavov]

Hi,

The positioning of the element is done with CSS, what do you mean by halfway down the screen?
The example demonstrates the events of the splitter.

Please, explain further your problem

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[jqwidgetsdev]

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>

[jqwidgetsdev]

Can you please share an example with a window and a splitter?

Thank you.

[svetoslav_borislavov]

Hi,

Here is a very simple demo of Smart.Splitter in a Smart.Window:
https://codepen.io/svetoslavb04/pen/OJwmPdZ

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts