Using the default installation I noticed that there is a bug with the display of the App component, both, the navigation and the app bar are not fixed to their position, causing a bad-looking display:
import ipyvuetify as v
# Create a base App component based on the following one
text = """
<!-- App.vue -->
<v-app>
<v-navigation-drawer app>
<!-- -->
</v-navigation-drawer>
<v-app-bar app>
<!-- -->
</v-app-bar>
<!-- Sizes your content based upon application components -->
<v-main>
<!-- Provides the application the proper gutter -->
<v-container fluid>
<!-- If using vue-router -->
<router-view></router-view>
</v-container>
</v-main>
<v-footer app>
<!-- -->
</v-footer>
</v-app>
"""
v.App(
children = [
v.NavigationDrawer(
app=True,
disable_resize_watcher = True
),
v.AppBar(
app=True,
),
v.Content(
children = [
v.Container(
children = [
v.Card(
children = [
v.CardTitle(
children = [
v.Html(tag='h1', children=['Hello World'])
]
),
v.CardText(
children = [
text * 30
]
)
]
)
]
)
]
)
]
)
I tried to find the culprit and turns out that is the rendered_cells div which has the property: contain: strict;, if I change it by another, it will work as expected.
Using the default installation I noticed that there is a bug with the display of the
App
component, both, the navigation and the app bar are not fixed to their position, causing a bad-looking display:screen-capture (1).webm
To Reproduce
I tried to find the culprit and turns out that is the
rendered_cells
div which has the property:contain: strict;
, if I change it by another, it will work as expected.