Skip to content

[Bug] Vizseq CSS breaks Jupyter layout #26

Description

@pyfisch

🐛 Bug

Executing vizseq.view_stats breaks the layout of the Jupyter. The menu at the top obscures a majority of the screen and a blank area of ~60px appears at the top of the page.

Screenshot

To reproduce

** Minimal Code/Config snippet to reproduce **

  1. start Jupyter jupyter notebook
  2. view any of the example notebooks e.g. speech_translation
  3. Execute the cells one-by-one.

When the first cell containing vizseq.view_stats is finishes the layout changes and appears broken.

Expected Behavior

The display of tables and graphs by vizseq does not affect the layout of the Jupyter notebook.

System information

  • VizSeq Version: '0.1.11' (clone from master yesterday)
  • Python version: Python 3.8.1 (default, Jan 8 2020, 23:09:20) [GCC 9.2.0] on linux
  • Operating system: Manjaro Linux

Additional context

Cause: The bootstrap.min.css and an inline stylesheet loaded by vizseq break the layout. The inline stylesheet is:

body {
   padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}

The inline stylesheet is responsible for the blank bar at the top while Bootstrap breaks the menu's formatting.

To test this disable both stylesheets in the stylesheet editor included in the developer tools of a browser.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions