Mehrzeilige Tableiste CSS Code

  • Ich hätte eine Frage bezüglich dieses Scripts:

    In Post 1 steht, das Script ist für Leute, die sich nicht mit CSS auseinander setzen wollen. Und ich glaube, dieses Projekt wurde früher nur mit CSS umgesetzt und später dann mit javascript gemacht, oder ? Weil ich wäre mit CSS sehr zufrieden.

    Weil wenn ich mir das Script anschaue, sind das schon seeeehr viele Zeilen. Und ich will eig. nur 2 Reihen an Tabs haben, mehr nicht. Keine speziellen Zusatzfunktionen wie scrollen oder sowas. Daher frage ich mich: Ist das nicht etwas "schlanker" möglich ? Also eben nur mit CSS scripts?

    Ich bin mir nicht ganz sicher, ob ich das hier fragen soll oder eine eigene Frage auchmachen soll.

  • oder eine eigene Frage auchmachen soll.

    In diesem Fall wäre das besser gewesen.

    Darum mache ich das jetzt mal.


    Nachteil bei einem CSS Code, die Tabs können nicht beliebig verschoben werden.

    Mit freundlichem Gruß
    Andreas
    Mein Laptop  Meine Add-ons

    Einmal editiert, zuletzt von 2002Andreas (10. Juli 2023 um 12:50) aus folgendem Grund: Ein Beitrag von 2002Andreas mit diesem Beitrag zusammengefügt.

  • Danke für die Antwort und sorry, manchmal ist man sich nicht sicher, wo das hingehört.

    Was meinst du denn damit, dass die Tabs nicht "beliebig" verschoben werden können? Kann ich dann die Tabs nicht mehr verschieben?

  • Oder von hier ein Skript nehmen:

    Hier habe ich mal eins etwas verändert:

  • Danke für die Mühe.

    Ist das jetzt quasi so eine Art "schlanke Version" ?

    Ich habe kurz bevor du den CSS-Code gepostet hast noch bei github einen code für CSS gefunden (Eig. mehr oder weniger das selbe wie bei deinem oben, nur da hats noch andere Dinge drinn, die z.B die Tabs unter die Adresszeile schieben und ich wollte mir die Arbeit ersparen, die ganzen Zusatzdinge rauszulöschen). Es funktionieren aber beide Codes.

    Ich nutze jetzt diesen code (das mit den mehreren Tabreihen geht ab Zeile 53 los):

    Soweit funktioniert alles, bis auf etwas: Manchmal, wenn ich die Tabs schliesse in einer Reihe, fällt die Ansicht nach unten. Das Problem ist jetzt, dass diese "scrollbox" höher ist, wie die Tabreihen selbst. D.h es fällt dann ganz nach unten und dort ist "freier Platz", also bei mir schwarzer Hintergrund.

    D.h, ich will eig., dass die Scrollbox immer genau! so hoch ist, wie die Tabs (also bei 2 Reihen, soll sie genau so hoch sein wie 2 Tabs, bei 3 Reihen so hoch wie 3 usw).

    Im Grunde will ich also gar keine vertikale Scrollfunktion haben. Ich will einfach eine Box haben, die so hoch ist, wie eben die Tabs (natürlich soll sich die Box automatisch vergrössern/verkleinern, wenn mehr Tab-Reihen entstehen).

    Geht das irgendwie? Ich blicke da nicht ganz durch.

    Also ich denke dieser code sollte die Scrollbox genau so hoch machen, wie es meine Tabreihen sind (tut er aber nicht):

    Code
    max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin,0px)) * var(--multirow-n-rows))

    Ich verstehen nur nicht, was ich da jetzt quasi für Werte eingeben muss bzw. wo ich diese variabel-Werte finde (also z.B --multirow-n-rows). Das einzige, was ich weiss ist --tab-min-heigth, denn das habe ich selber schon auf 21px gestellt in meinem code ganz oben.

    Einmal editiert, zuletzt von Platos (10. Juli 2023 um 15:18)

  • Also ich denke dieser code sollte die Scrollbox genau so hoch machen, wie es meine Tabreihen sind (tut er aber nicht):

    So sieht das z.B. mit dem CSS Code und 3 Reihen aus:

    Bei nur einer Reihe so:

    Und im Skript ist das auch nicht anders.

    Ab der 3. Reihe wird die Scrollbox erst angezeigt, steht so auch im CSS Code bzw. im Skript:

    Code
    max-height: calc(var(--tab-min-height) * 3); /* Anzahl der Tabzeilen = 3 Zeilen */
  • Hmm, naja bei mir eben schon ab der 2. Reihe und wenn ich rechts die Scrollbar-Leiste mit der Maus (linksklick) bewege, geht das auch schon mit nur einer Tabreihe.

    Da der CSS Code von #2 noch einige andere Anpassungen hat und ich nicht weiss, was genau alles da jetzt für die Tabreihe gebraucht wird, habe ich wie gesagt das von github genommen.

    Aber auch wenn ich bei "max-height:" das aus #9 nehme, ist das immer noch gleich.

    Also wie gesagt: Ich kann mit dem Mausrad scrollen und unterhalb der letzten Tabreihe hat es noch freien Platz, der eben schwarz ist. Dann sehe ich leeren Freiraum. Und manchmal beim löschen von Tabs oder ganzen Tabreihen rutscht mir diese Scrollbox automatisch nach ganz unten (wo eben freier, leerer schwarzer Bereich ist). Dann sehe ich die Tabreihen nicht mehr vollständig.

  • Erstmal solltest du dir überlegen, wo die Tableiste sein soll. Oben oder unten?

    Ich nutze jetzt diesen code

    Warum, ich habe dir doch einen genannt der auch funktioniert.

    Ich blicke da nicht ganz durch.

    Dann nimm doch den von mir :/

    noch bei github einen code für CSS gefunden

    Der funktioniert hier auch nicht.

    So sieht das hier mit Tabs oben aus:

  • Zitat

    Dann nimm doch den von mir :/

    Ja aber da hat es viel Code drinn, der noch andere Dinge verändert und ich weiss nicht, welche Dinge ich nur für das mit den mehreren Tabreihen brauche und welche nicht.

    Denn einiges davon gerät in Konflikt mit dem Design, das ich habe, so dass bei mir alles verschoben wird.

    Der neue Code von dir (sowie der alte) hat bei mir aber genau das gleiche Problem, wie der von github. Also auch bei dem von dir ist die Scrollbox höher, wie die Tabreihen selber.

    Es liegt eig. nicht am Github-Code. Wenn ich nur diese nverwende, funktioniert es. Aber in kombination mit dem Code, den ich sonst noch nutze (alles vor Zeile 53 im Post #8), funktioniert es nicht. Ich weiss nur nicht, warum.

  • Denn einiges davon gerät in Konflikt mit dem Design, das ich habe, so dass bei mir alles verschoben wird.

    Dann musst du in deinen anderen CSS Codes mal nachsehen, warum das so ist.

    Und dort evtl. etwas anpassen.

    da dieser mit meinem sontigen Design nicht in Konflikt gerät

    Da ich deine anderen Codes nicht kenne, und auch dein Design nicht, kann ich dir dazu nichts weiter sagen.

    Hier funktionieren meine CSS Codes und die Skripte einwandfrei.

  • von Zeile 1-52 ist bezüglich des Designs.

    Dort sind teilweise die gleichen Einträge enthalten wie in den Skripten bzw. den CSS Codes von mir.

    Das kann dann auch nicht funktionieren.

    Also musst du dort mal alles rausnehmen, was mit den Tabs zu tun hat.

    Ansonsten wird das nie etwas.

    Oder kompl. deaktivieren, und dann nur wieder das nehmen, was du noch zusätzlich brauchst.

  • Ok, ich habe jetzt jeweils einzelne Codeteile rausgelöscht und geschaut, ob sich das Problem in Luft auflöst. Konnte dann das Problem mit dem leeren Platz lösen und musste dann dafür aber noch an anderen Stellen anpassungen machen. Jetzt ist aber alles perfekt soweit.

    Also danke für die ganzen Hinweise und so. Manchmal brauchts bisschen Input von aussen :D

    Hier der Code, falls jemand Interesse hat:

    Also hier noch ein Bild, wie es jetzt aussieht, für Interessierte:

  • Ok, update: Es geht doch nicht xD

    Irgendwas, nach Post #8 hat dazu geführt, dass ich jetzt die Tabs nicht mehr frei bewegen kann. Irgendwas geht nicht mehr.

    Und zu min-width: Ja aber, das muss ich zuerst aktivieren, indem ich da ein Wert ändere. Da steht in der Beschreibung, es seien dann fixe Tabbreiten, habs noch nicht ausprobiert.

    Aber muss zuerst das andere Problem lösen :D

    Denkt man, man hats und schon kommt das nächste Problem^^