widgetti / widgetti/ipyvuetify

navigation bar and app bar are not fixed

Open
#280 3 comments 0 reactions 0 assignees View on GitHub

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:

screen-capture (1).webm

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.