widgetti / widgetti/ipyvuetify
navigation bar and app bar are not fixed
Nobody has claimed this yet.
- Dominant language
- Python
- Stars
- 355
- Forks
- 61
- PR merge metrics
- No merged PRs in 30d
Description
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:
To Reproduce
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.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the provided Python reproduction and inspect the App rendering around the rendered_cells div, focusing on its contain: strict property. Confirm the navigation drawer and app bar behavior with the long content example; done means both remain fixed in their expected positions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- python
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100