Auto hide Sidebar Problemchen

juras

Hallo

Bisher habe ich folgenden CSS Code für 'auto hide sidebar' benutzt.

CSS

/******* Description: Auto-hide sidebar.** Contributor(s): img2tab****************************************************/
/* To right-align the sidebar, replace all occurrences of "left" with "right", and "margin-right" with "margin-left" */

:root                {
                        --hover-width:    1px;
                        --visible-width: 400px;
                    }

#sidebar-box        {
                        position:                            relative !important;
                        overflow-x:                            hidden !important;
                        opacity:                                    0 !important;
                        margin-right:   calc(var(--hover-width) * -1) !important;
                        left:                      var(--hover-width) !important;
                        min-width:                 var(--hover-width) !important;
                        max-width:                 var(--hover-width) !important;
                    }

#sidebar-box:hover    {
                        margin-right: calc(var(--visible-width) * -1) !important;
                        opacity:                                    1 !important;
                        left:                    var(--visible-width) !important;
                        min-width:               var(--visible-width) !important;
                        max-width:               var(--visible-width) !important;
                    }

#sidebar            {
                        opacity: 0 !important;
                    }

#sidebar:hover        {
                        opacity: 1 !important;
                    }

/* #sidebar-header is hidden by default, change "none" to "inherit" to restore it. */

/*#sidebar-header        {
                        display: inherit !important;
                    }

/* #sidebar-splitter styles the divider between the sidebar and the rest of the browser. */

#sidebar-splitter    { display: none !important;
                    }

Alles anzeigen

Da dieser nun nicht mehr funktioniert habe ich hier im Forum folgenden Code dafür gefunden:

CSS

@-moz-document url("chrome://browser/content/places/bookmarksSidebar.xul"),
url("chrome://browser/content/browser.xhtml") {


#menu_bookmarksSidebar {
display: -moz-box !important;
}


#bookmarks-view-children {
margin-top: -100px !important;
margin-left: -15px !important;
}


/*#sidebar-header {
display: none !important;
}*/


.sidebar-placesTreechildren::-moz-tree-separator {
margin: 0px 500px !important;
}


label[persist="value"][flex="1"][crop="end"][control="sidebar"][value="Lesezeichen"] {
display: none !important;
}


#sidebar-box {
display: block !important;
position: fixed !important;
top: 112px;
bottom: 27px !important;
width: 0px !important;
overflow-x: hidden !important;
-moz-appearance: none !important;
z-index: 2 !important;
border: 1px solid transparent !important;
border-left: 0 !important;
opacity: 0 !important;
/*transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;*/
}


#sidebar-box:hover {
width: 255px !important;
opacity: 1 !important;
/*transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;*/
}


#sidebar-splitter {
display: none !important;
}

#sidebar {
display: block !important;
width: 100% !important;
height: 95% !important;
}

Alles anzeigen

Mein Problem ist nun das hier die sidebarbox absolut erstellt wird und somit meine tableiste überdeckt oder bei weniger tabzeilen hier ein Abstand bleibt.

setze ich nun (bin blutiger Anfänger) den Position Parameter auf relative so sitzt die Box immer unter den tabzeilen bloß ist jetzt die Darstellung links Mist.

Wie müßte ich den alten Code (oder auch den neuen) anpassen damit dieser wieder wie gewohnt funktioniert?

grisu2099

Experimentiere mal mit den Werten in Zeile 34 und 35...

juras

grisu2099

Danke - weiß ich schon.

Ich hätte das ganze aber gerne nicht absolut sonder relativ - sprich dynamisch angepaßt je nachdem wieviele tabreihen ich gerade habe.

Wie gesagt setze ich in Zeile 34 'Position' auf relative wird die Box auch entsprechend angepaßt nur daß dann ein schwarzer Kasten im linken Bereich auftaucht. Zudem verschiebt sich der Seiteninhalt etwas nach rechts beim öffnen der Sidebar.

sidebar ausgeblendet -------------------------- sidebar eingeblendet

Die Funktion des alten Scriptes (das obere) hat mir immer gut gepaßt.

Vielleicht kann mir jemand erklären warum das nicht mehr funktioniert und wie ichs wieder hinkriegen kann?

BrokenHeart

Also eine perfekte Lösung habe ich nicht. Ich habe jetzt etwas 'rumgebastelt' und wenn dir hauptsächlich das 'obere Alignment' wichtig ist, dann könntest du diesen CSS-Code versuchen:

Zu beachten ist, dass die Höhe absolut gesetzt wird und somit auch über den unteren Fensterrand reichen kann. Das ganze ist mehr oder weniger mit einem Menu-Popup zu vergleichen. Deswegen habe ich auch einen extra Rahmen vorgesehen.

CSS

:root {
    --visible-height: 800px;    
    --visible-width:  300px;
    --border-width:     1px;
    --hover-width:      2px;
}

#sidebar-header { display:none!important; }

#sidebar {
    min-width: calc( var(--visible-width) - (2 * var(--border-width)) ) !important;
}

#sidebar-box {   
    display:                   flex !important;
    position:                  absolute !important;
    opacity:                   0 !important;
    margin-left:               calc( (var(--visible-width) - var(--hover-width)) * -1 )  !important; 
    z-index:                   2 !important;
    min-width:                 var(--visible-width)!important;
    height:                    var(--visible-height) !important;
}

#sidebar-box:hover {
    margin-left:               0px !important;
    opacity:                   1 !important;
    border:                    var(--border-width) solid black !important;
    filter:                    drop-shadow(4px 3px 2px rgba(0,0,0,0.33)) !important;     
}

#sidebar-splitter    { display: none !important; }

Alles anzeigen

juras

BrokenHeart

Vielen Dank!

Das ist doch schon mal sehr gut

Bei mir sieht es gerade so aus - hätte das Lesezeichen Menü jetzt nur noch gerne oben über der Suchleiste.

BrokenHeart

Oops. Ich habe den 'SidebarHeader' bei mir wegoptimiert:

Könntest du (nur testweise) diesen Eintrag bei dir einfügen und posten, ob es dann bei dir stimmt?

#sidebar-header { display:none!important; }

juras

mit dem code ist er ganz weg

BrokenHeart

Ja, war auch nur ein Test...

Könnte länger dauern mit dem SidebarHeader. Vielleicht hat ja ein anderer User eine Lösung dafür...

Edit: Habe im Code #sidebar-header { display:none!important; } noch eingefügt, weil es mit dem Header nicht richtig funktioniert.

juras

Auf jeden Fall hast du mir schon weiter geholfen

BrokenHeart

Bitte nochmal testen:

Kleine Unschönheit noch: beim Umschalten von z.B.: Lesezeichen auf Chronik usw. verschwindet die Sidebar und man muss wieder an den Rand. Aber die Funktion wird richtig ausgeführt...

CSS

:root {
    --visible-height: 800px;    
    --visible-width:  300px;
    --border-width:     1px;
    --hover-width:      2px;
}

#sidebar-header { 
      display:                   flex !important;
    position:                  absolute !important;
    z-index:                   1 !important;
}

#sidebar {
  display:                    flex !important;
  position:                   absolute !important;
  min-width:                  calc( var(--visible-width) - (2 * var(--border-width)) ) !important;
  padding-top:                40px !important;
}

#sidebar-box {   
      display:                 flex !important;
    position:                  absolute !important;
    opacity:                   0 !important;
    margin-left:               calc( (var(--visible-width) - var(--hover-width)) * -1 )  !important; 
    z-index:                   2 !important;
    min-width:                 var(--visible-width)!important;
    height:                    var(--visible-height) !important;
}

#sidebar-box:hover {
    margin-left:               0px !important;
    opacity:                   1 !important;
    border:                    var(--border-width) solid black !important;      
    filter:                    drop-shadow(4px 3px 2px rgba(0,0,0,0.33)) !important; 
}

#sidebar-splitter    { display: none !important; }

Alles anzeigen

juras

TOP

Vielen Dank!

jetzt paßt es wieder

BrokenHeart

Freut mich, wenn es für dich so passt.