widgetti / ipyvuetify

Jupyter widgets based on vuetify UI components
MIT License
338 stars 59 forks source link

navigation bar and app bar are not fixed #280

Open dfguerrerom opened 9 months ago

dfguerrerom commented 9 months ago

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 commented 8 months ago

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 commented 8 months ago

I'm actually running voila==0.5.4

KylarStern7 commented 4 months ago

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