mikrocontroller.net

Forum: PC-Programmierung Bootstrap: Tabs in Full Page Layout


Autor: Jens (Gast)
Datum:
Angehängte Dateien:

Bewertung
0 lesenswert
nicht lesenswert
Hallo Leute,
baut hier jemand Webseiten mit Bootstrap? Ich fange damit gerade erst an 
und bräuchte einen schnellen Tip, wie ich auf einer Seite mit Tabs den 
Tab Content so groß mache, dass er exakt die gesamte verfügbare Fläche 
einnimmt.

Meinen Versuch könnt ihr hier bewundern: https://jsfiddle.net/zqj0yfqx/

Wie ihr dort oder im angehängten Bild1 seht, wird am rechten Rand eine 
unerwünschte Scrollbar erzeugt. Denn anscheinend nimmt der Tab Content 
(auf height:100% gesetzt) nicht die verfügbare Fläche unter den 
nav-tabs ein, sondern die Fläche, die einschließlich der nav-tabs 
verfügbar wäre.

Wenn ich dagegen für den Tab Content "height: calc(100% - 50px)" setze, 
wie im Fiddle auskommentiert, ergibt sich das angehängte Bild2: Die 
Scrollbar ist zwar weg, doch die 50px sind nur ein Schätzwert für den 
Platz, der für die nav-tabs reserviert werden muss. Dieser Wert ändert 
sich je nach Schriftgröße, Browser usw., mit der Folge dass der Content 
nicht immer bis zum unteren Rand reicht, oder dass die Scrollbar doch 
wieder eingeblendet wird.

Wahrscheinlich könnte ich mit Javascript irgendwie die Höhe der nav-tabs 
abfragen und damit jeweils die gewünschte Höhe des Tab Contents 
berechnen und setzen. Ich hoffe aber auf eine reine CSS-Lösung.

Danke
Jens

Autor: Joachim S. (oyo)
Datum:

Bewertung
0 lesenswert
nicht lesenswert
Eine Möglichkeit, das zu lösen, wäre vielleicht, dass Du zu dem
<ul class="nav nav-tabs">
noch die CSS-Klasse "navbar-fixed-top" hinzufügst; und dann im CSS am 
Ende des "body"-Bereiches noch "padding-top: 41px" hinzufügst.
Ist halt auch suboptimal, weil Du auch bei dieser Lösung dann wieder 
einen festen Wert wie "41px" eintragen musst - aber die 
bootstrap-Dokumentation sagt, dass man das so machen soll:

> Body padding required
>
> The fixed navbar will overlay your other content, unless you add padding
> to the top of the <body>. Try out your own values or use our snippet below.

https://getbootstrap.com/docs/3.3/components/#navb...

Ansonsten hättest Du auch z.B. die Möglichkeit, im CSS des 
Body-Bereiches "overflow: hidden" anzugeben, um die Scrollbar 
auszublenden.

Autor: Jens (Gast)
Datum:

Bewertung
0 lesenswert
nicht lesenswert
Joachim S. schrieb:
> Eine Möglichkeit, das zu lösen, wäre vielleicht, dass Du zu dem<ul
> class="nav nav-tabs">
> noch die CSS-Klasse "navbar-fixed-top" hinzufügst; und dann im CSS am
> Ende des "body"-Bereiches noch "padding-top: 41px" hinzufügst.

Danke, aber diese Tabs sollen nicht am oberen Rand fixiert sein, sondern 
das Beispiel im Fiddle wird später in weiteren <div>s geschachtelt sein.

> Ist halt auch suboptimal, weil Du auch bei dieser Lösung dann wieder
> einen festen Wert wie "41px" eintragen musst

Genau, das löst leider überhaupt nichts.

> aber die
> bootstrap-Dokumentation sagt, dass man das so machen soll:
>
>> Body padding required
>>
>> The fixed navbar will overlay your other content, unless you add padding
>> to the top of the <body>. Try out your own values or use our snippet below.

Soll das heißen, Bootstrap hat keine Lösung für den Fall? Dort wird ja 
auch nur die Defaultgröße angegeben. Ich dachte, Bootstrap soll 
responsive sein. Da kann man sich nun mal nicht auf eine default 
Schriftgröße verlassen.

> Ansonsten hättest Du auch z.B. die Möglichkeit, im CSS des
> Body-Bereiches "overflow: hidden" anzugeben, um die Scrollbar
> auszublenden.

Geht auch nicht, denn der Content muss vollständig sichtbar sein, da 
darf nichts am unteren Rand versteckt sein.

Sag mal, weißt du zufällig welches der beste Weg ist, Bootstrap-Benutzer 
zu erreichen, deren täglich Brot solche Designs sind? Bootstrap nennt 
einen IRC-channel. Ich dachte das gäbs seit 1-2 Jahrtausenden schon 
nicht mehr. Ist das deren Ernst, und lohnt es sich, IRC noch 
einzurichten?

Danke
Jens

Autor: Joachim S. (oyo)
Datum:

Bewertung
0 lesenswert
nicht lesenswert
Jens schrieb:
> Geht auch nicht, denn der Content muss vollständig sichtbar sein, da
> darf nichts am unteren Rand versteckt sein.

Aber versteckt wäre doch auch nur dann etwas am unteren Rand, wenn der 
Inhalt eh nicht komplett auf eine Seite passt - und in diesem Fall 
bleiben doch eh nur die beiden Möglichkeiten, entweder eine Scrollbar 
einzublenden oder einen Teil am Ende der Seite schlicht nicht sehen zu 
können?

Anyway, was möglicherweise noch eine Option wäre:
Im CSS im body-Bereich "display: flex; flex-direction: column;" angeben. 
Zumindest bei Deinem jsfiddle-Beispiel scheint das den gewünschten 
Effekt zu haben.

> Sag mal, weißt du zufällig welches der beste Weg ist, Bootstrap-Benutzer
> zu erreichen, deren täglich Brot solche Designs sind? Bootstrap nennt
> einen IRC-channel. Ich dachte das gäbs seit 1-2 Jahrtausenden schon
> nicht mehr. Ist das deren Ernst, und lohnt es sich, IRC noch
> einzurichten?

Ich würde mal bei stackoverflow anfragen. Da findet man ja eigentlich 
immer sehr schnell kompetente Hilfe, und letztlich ist das Ganze ja 
vermutlich eh eher ein allgemeines CSS-Problem, als speziell ein 
bootstrap-Problem.

Autor: Jens (Gast)
Datum:

Bewertung
0 lesenswert
nicht lesenswert
Joachim S. schrieb:
> Jens schrieb:
>> Geht auch nicht, denn der Content muss vollständig sichtbar sein, da
>> darf nichts am unteren Rand versteckt sein.
>
> Aber versteckt wäre doch auch nur dann etwas am unteren Rand, wenn der
> Inhalt eh nicht komplett auf eine Seite passt - und in diesem Fall
> bleiben doch eh nur die beiden Möglichkeiten, entweder eine Scrollbar
> einzublenden oder einen Teil am Ende der Seite schlicht nicht sehen zu
> können?

Nein, im Tab Content werde ich Children hinzufügen, die sich an das 
umgebende Element (=Tab Content) anpassen, so dass dieses immer 
ausgefüllt ist. Wenn aber der Tab Content schon aus der Seite 
herausragt, merken die Children davon nichts und können sich nicht 
entsprechend richtig anpassen.
>
> Anyway, was möglicherweise noch eine Option wäre:
> Im CSS im body-Bereich "display: flex; flex-direction: column;" angeben.
> Zumindest bei Deinem jsfiddle-Beispiel scheint das den gewünschten
> Effekt zu haben.

Du meinst, deine Ergänzung in .body { ... } einfügen? Das habe ich hier 
gemacht: https://jsfiddle.net/Ls4tvupL/
Dennoch sehe ich den Scrollbalken wie vorher. Könntest du das Fiddle 
sonst einmal mit den vorgeschlagenen Änderungen forken und den Link 
posten?

> Ich würde mal bei stackoverflow anfragen. Da findet man ja eigentlich
> immer sehr schnell kompetente Hilfe, und letztlich ist das Ganze ja
> vermutlich eh eher ein allgemeines CSS-Problem, als speziell ein
> bootstrap-Problem.

Danke, das versuche ich mal. Wenn allerdings Bootstrap so gebaut ist, 
dass das Beispiel nur mit Javascript-Callbacks allgemeingültig gelöst 
werden kann, sehe ich dies eher als Problem des Boostrap-Designs, das 
evtl. generelle CSS-Lösungen ausschließt.

Danke
Jens

Autor: Joachim S. (oyo)
Datum:

Bewertung
0 lesenswert
nicht lesenswert
Jens schrieb:
>> Anyway, was möglicherweise noch eine Option wäre:
>> Im CSS im body-Bereich "display: flex; flex-direction: column;" angeben.
>> Zumindest bei Deinem jsfiddle-Beispiel scheint das den gewünschten
>> Effekt zu haben.
>
> Du meinst, deine Ergänzung in .body { ... } einfügen? Das habe ich hier
> gemacht: https://jsfiddle.net/Ls4tvupL/
> Dennoch sehe ich den Scrollbalken wie vorher. Könntest du das Fiddle
> sonst einmal mit den vorgeschlagenen Änderungen forken und den Link
> posten?

Genau so meinte ich das, ja; und bei mir (Firefox v57) funktioniert 
dieses Fiddle ohne Änderung bereits jetzt: der Tab-Inhalt mit seinem 
rotem/blauem Hintergrund erstreckt sich bis über den gesamten 
gewünschten Bereich, ohne dass Scrollbars angezeigt werden.

Dürfte also am Browser zu liegen. Offenbar muss display: flex etc. bei 
manchen Browsern noch geprefixt werden: "display: flex; display: 
-webkit-flex; display: -ms-flexbox; flex-direction: column; 
-ms-flex-direction: column; -webkit-flex-firection: column;"
https://jsfiddle.net/vahrqk62/

Autor: Jens (Gast)
Datum:

Bewertung
0 lesenswert
nicht lesenswert
Tatsache, mit Firefox klappt es, wie ich es mir vorstelle.
Mit Chrome bleibt die Scrollbar da.

Immerhin habe ich nun einen Anhaltspunkt, von dem aus ich weiter 
recherchieren kann. Vielen Dank!

Jens

Antwort schreiben

Die Angabe einer E-Mail-Adresse ist freiwillig. Wenn Sie automatisch per E-Mail über Antworten auf Ihren Beitrag informiert werden möchten, melden Sie sich bitte an.

Wichtige Regeln - erst lesen, dann posten!

  • Groß- und Kleinschreibung verwenden
  • Längeren Sourcecode nicht im Text einfügen, sondern als Dateianhang

Formatierung (mehr Informationen...)

  • [c]C-Code[/c]
  • [avrasm]AVR-Assembler-Code[/avrasm]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] - Link zu Artikel
  • Verweis auf anderen Beitrag einfügen: Rechtsklick auf Beitragstitel,
    "Adresse kopieren", und in den Text einfügen




Bild automatisch verkleinern, falls nötig
Bitte das JPG-Format nur für Fotos und Scans verwenden!
Zeichnungen und Screenshots im PNG- oder
GIF-Format hochladen. Siehe Bildformate.

Mit dem Abschicken bestätigst du, die Nutzungsbedingungen anzuerkennen.