JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › General Discussions › splitter not aligned to top › Reply To: splitter not aligned to top
January 9, 2023 at 8:16 pm
#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>