UserPanel und Suche in eine Zeile

Fu55el · December 7, 2017 at 8:32 PM

Ist es möglich dich Suche und das UserPanel so anzuordnen , oder kennt jemand schon den Code dazu ?

Fu55el · December 8, 2017 at 4:40 PM

Hat niemand eine Idee ?

norse · December 8, 2017 at 5:29 PM

Eigentlich weiß ich nicht so wirklich, was Du möchtest. Im Standardstil (von dem Du doch vermutlich ausgehst) befinden sich die genannten Elemente ohnehin auf einer Ebene. Insofern weiß wohl niemand, welche Art von Hinweis Du erwartest.

Gruß norse

Fu55el · December 8, 2017 at 5:32 PM

Ah ok, das mag es erklären. Sinn der Nachfrage ist, das die Suche dauerhaft angezeigt werden soll und das genau an der Position, ohne das es überlagert und das die Suche sich in den nicht sichbaren bereich verschiebt, das mir immer wieder Passiert ....

Gino Zantarelli · December 8, 2017 at 6:26 PM

Wo befindet sich denn das Main Menu ? So wird man das nicht anpassen können ohne das Main Menu anders zu positionieren...

Fu55el · December 8, 2017 at 6:33 PM

kannst du dir hier ansehen bin noch dran also das menü ist linksseitig angelegt. Nicht über den freien Platz rechts wundern, da möchte ich später die Freundesliste anzeigen lassen.

Gino Zantarelli · December 8, 2017 at 6:46 PM

Das sollte dir schon mal etwas weiterhelfen:

Code

.userPanel > ul {
    display: flex;
    justify-content: flex-start;
    left: 0px;
    height: 70px;
    position: relative;
}
.userPanel li.jsOnly {
    flex: 1 100%;
    justify-content: flex-end;
}
.pageHeaderPanel > .layoutBoundary {
    padding: 0px;
    display: inherit;
}

Display More

Fu55el · December 8, 2017 at 6:59 PM

Ok damit wurde der Button verschoben, das erstmal viel wert danke, wenn ich das nicht so hinbekomme wie ich das gern hätte bleibt das einfach so

Gino Zantarelli · December 8, 2017 at 7:00 PM

Mir ist noch was aufgefallen: Das pointer event müsste auch noch angepasst werden:

Code

.userPanel li.jsOnly {
    flex: 1 100%;
    justify-content: flex-end;
    pointer-events: none;
}
#userPanelSearchButton {
    pointer-events: all;
}

Fu55el · December 8, 2017 at 7:21 PM

meine idee war es eigentlich das ganze mit

Quote

.pageHeaderSearch {

display: block;

position: fixed;

right: 70px;

}

li #userPanelSearchButton {

display:none

}

Display More

zu erledigen aber wenn der code so drin haut das alles nicht so wirklich hin

Fu55el · December 8, 2017 at 8:02 PM

mit dem Code sieht es so aus wie ich es eigentlich haben wollte aber wenn man dann die Seite auf 120% zoom hat funktioniert die Such leiste nicht mehr ...

Code

#pageHeaderPanel {
    left: 281px;
    position: fixed;
    right: 542px;
    top: 0;
    z-index: 300;
    margin: 0 auto;
}

.pageHeaderSearch {
    display: block;
    position: fixed;
    right: 70px;
    top: 0px;
    background-color: #325c84;
    padding: 0 20px;
}

li #userPanelSearchButton {
  display:none
}

.pageHeaderSearchInputContainer {
    display: flex;
    height: 70px;
}
#pageHeaderSearchInput {
    height: 70px;
}

Display More

Participate now!