Wie kann ich die beseitigen die grauen Rahmen um Jupyter/ipython-notebooks in meinem browser?

Lese ich in dieser thread so ändern Sie die Zelle Breite für Jupyter notebooks (ich habe die zweite Antwort zu tun, also dynamisch). Diese Methode eliminiert die Links-rechts-Grau Grenzen.

Jedoch, dieser lässt noch einen grauen Rand am oben und unten des Dokuments. Wie kann ich auch entfernen, so dass die Zellen liegen auf einer sauberen Weste?

  • meinst du die Antwort mit 1 Stimme oder 99 Stimmen? du kannst die url, die Antwort durch Klick auf teilen unter die Antwort… eine Antwort-url kommen wird, die Sie kopieren können
  • Vielen Dank, aktualisiert sich die Frage, mit link.
  • bearbeitet Antworten..
  • das Sternchen (*) wird auf alle Elemente, ids und Klassen..
  • hier ist ein link zu erklären, die Sternchen markieren Sie alle w3schools.com/cssref/sel_all.asp
InformationsquelleAutor Luke Davis | 2017-06-01



3 Replies
  1. 9

    Update 2019/02/18:
    Anstatt das zu tun, die unten ist, empfehle ich die Installation jupyterthemes. Diese notebook-Designs sind genial und hübsch und einfach zu bedienen, und Sie beseitigen die grauen Rahmen.


    Original-Beitrag:

    So, nachdem mit „Element Untersuchen“ auf einem notebook und lernen ein jota von CSS, es scheint, die folgenden arbeiten

    from IPython.core.display import display, HTML
    display(HTML("<style>"
        + "#notebook { padding-top:0px !important; } " 
        + ".container { width:100% !important; } "
        + ".end_space { min-height:0px !important; } "
        + "</style>"))

    wo die oberste Zeile entfernt den grauen Rand an der oberen, der mittleren Linie entfernt die Seitenränder, und die untere Zeile entfernt den grauen Rand an der Unterseite. Die Inhalte, die in-zwischen <style>, </style> können natürlich auch Hinzugefügt werden, um die custom.css Datei in ~/.jupyter/custom/ folgenden dieser thread; meine Datei enthält die Zeilen

    /* Modifications to notebook format  */
    #notebook { padding-top:0px !important; } /* eliminate top gray */
    .container { width:100% !important; } /* eliminate side gray */
    .end_space { min-height:0px !important; } /* eliminate bottom gray */
    • Bravo! Funktionierte gut genug für mich – win-10 + chrome
  2. 0

    Ich würde fügen Sie den folgenden, um meine css –

    *{margin:0;
      padding:0;
    }
    
    html, body, .container{
       margin:0!important;
       padding:0!important;
    }

    und sollte loszuwerden, die zusätzlichen Platz oben und unten sowie den Seiten. Wenn es eine Linie, die Sie bedeuten, durch einen Rahmen, man könnte hinzufügen border:0; in die html -, body css

    Update nach der Besichtigung Kommentar:

    Aus deiner gegebenen Lösung, man kann auch gleich mit der Höhe ( height:100%;!important ), aber in meiner Erfahrung die Einstellung 100%, um die height-Eigenschaft ist nicht so effektiv wie mit der Breite (da die Höhe mehr Dynamik) Versuchen, die html/Körper zuerst.

    Beispiel von inline-style-mit html/body-Attribute:

    from IPython.core.display import display, HTML
    display(HTML("<style> *{margin:0; padding:0;} html, body, .container{margin:0;!important padding:0;!important} .container { width:100% !important;}</style>"))
    • Sie können die html-und body-css in den inline-style auch , aber die css-stylesheets sind vorzuziehen inline-style.
    • Scheint nicht für mich arbeiten; es bleibt immer noch die oberen/unteren Rand. Ich weiß wirklich nicht, HTML/CSS, aber ich verwendet, Element Untersuchen und fand, dass .end_space { min-height:0px !important; } entledigt sich der Unterseite – Marge. Nicht sicher, wie Sie Sie, um loszuwerden, der oberen Rand. Hat deine Lösung funktioniert für Sie?
    • in der container-und der div, setze margin und padding auf !wichtig. Sie können die Höhe Ding
    • Noch nicht für mich arbeiten, aus irgendeinem Grund.
    • Klingt wie Sie haben mehr CSS drin. Setzen Sie einen Stern vor margin, padding, wie diese *{margin:0; padding:0;} ohne html-oder body-bevor es nur steckte es in wie dass
    • Fügen Sie ihn und fügen Sie den html-Körper .container mit den ! wichtig ist, nach es. Nicht wichtig in der ersten.
    • Lassen Sie mich wissen, wie das geht
    • Sie sollten beachten, dass die REIHENFOLGE wichtig ist im CSS/style – das *{margin:0; padding:0;} sollte am ganz oben in Ihrem Stil
    • Das hat nicht funktioniert, mit der richtigen Reihenfolge. Aber ich dachte, es mit element untersuchen und lernen, dass # Referenzen ids . Verweise Klasse Namen. Habe versucht, Ihre volle editiert Antwort. Wird die post bald Antworten.

  3. 0

    Experimentieren mit einigen der Anregungen und der Bereitstellung von firebug, hier sind die änderungen, die ich gemacht, um zu maximieren den Raum. Mit width css-Attribut hat nicht funktioniert für mich, da ich gelegentlich verwenden, die table of contents plugin und Einstellung width patzt Dinge.

    Notebook-css überschreibt

    Fügen Sie den folgenden css ~/.jupyter/custom/custom.css:

    /* Modifications to notebook layout to maximize working space */
    
    /* maximize working space */
    #notebook {
        padding: 5px 0 5px 0 !important;
    }
    
    /* eliminate most of bottom gray */
    .end_space {
        min-height: 5px !important;
    }
    
    /* reduce white padding on the outside of the notebook */
    #notebook-container {
        padding: 5px;
    }
    
    /* less padding in sub-cells on the left with In[] */
    .run_this_cell {
        padding-left: 0px;
        padding-right: 0px;
    }

    Natürlich, wenn Sie bereits etwas in die Datei, die Sie benötigen, um zu verschmelzen die vorherigen Einstellungen mit diesem.

    Müssen Sie möglicherweise neu starten jupyter wenn ich nicht schon hatte custom.css im Ort.

    Minimierung der Auswirkungen der Inhaltsverzeichnis-plugin.

    Im moment des Schreibens dieses plugin zwingt einen dicken grauen Rand auf beiden Seiten des Mains notebook-Körper. Ich bat um die Marge variabel konfigurierbar. Bis dies umgesetzt wird (wenn überhaupt), hab ich:

    cd ~/.local/share/jupyter/nbextensions
    patch -p0 < margin-width.patch

    wo margin-width.patch enthält:

    --- toc2/toc2.js        2018-07-06 15:00:27.139881888 -0700
    +++ toc2/toc2.js.fixed  2018-07-06 15:00:36.359743263 -0700
    @@ -224,7 +224,7 @@
         }
    
         function setNotebookWidth(cfg, st) {
    -        var margin = 20;
    +        var margin = 5;
             var nb_inner = $('#notebook-container');
             var nb_wrap_w = $('#notebook').width();
             var sidebar = $('#toc-wrapper');

    Brauchen Sie nicht neu zu starten, jupyter für diese änderung wirksam wird.

    Ergebnis

    Jetzt bekomme ich alle der verfügbare Platz gut ausgenutzt, ohne dass es zu eng:

    Wie kann ich die beseitigen die grauen Rahmen um Jupyter/ipython-notebooks in meinem browser?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.