Skip to content
New issue

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

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

Already on GitHub? Sign in 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 ?

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

No branches or pull requests

3 participants