Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

navigation bar and app bar are not fixed #280

Open
dfguerrerom opened this issue Oct 5, 2023 · 3 comments
Open

navigation bar and app bar are not fixed #280

dfguerrerom opened this issue Oct 5, 2023 · 3 comments

Comments

@dfguerrerom
Copy link

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.

@mariobuikhuizen
Copy link
Collaborator

I just ran this code in Voila v0.4.3 and that style doesn't seem to be there anymore:
Screenshot 2023-11-21 at 12 22 30

@dfguerrerom
Copy link
Author

I'm actually running voila==0.5.4

@michal-kocon
Copy link

@mariobuikhuizen any plans to make it work with voila>=0.5.0 ?

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants