Formular Butler anpassen

Deutsches Forum
1

Hallo zusammen,

ich nutze zur Zeit den Formular Butler von Eric Jankowfsky.

In dem Demoshop sieht das Modul folgendermaßen aus:

Bei mir leider so:

Was ich ändern möchte:
[ol]
[li]Die Auswahlbox soll nicht das Eingabefeld der PLZ verdecken, sondern wie im Demoshop darunter liegen[/li][li]Der Scrollbalken soll verschwinden[/li][li]Die Höhe des Feldes soll sich an die Schrift anpassen und nicht soviel Freiraum lassen[/li][/ol]

In der oxid.css habe ich folgende Einträge gemacht:

body .ejPlzPreview li:hover, body .ejHighlight {background-color:#EC6105;color:#fff;}

#plzpreview, #plzpreview2, #blzpreview, #namepreview {
	background-color: #FFFFFF;
    margin: 0;
    position: absolute;
    width: 350px;
    z-index: 10;
	font-size: 11px;
}

.ejPlzPreview {
    list-style: none outside none;
    margin: 0;
    max-height: 150px;
    overflow: auto;
    padding: 0;
}
.ejPlzPreview li:hover, .ejHighlight {
    background-color: #0000FF;
    color: #FFFFFF;
    cursor: pointer;
}
2

Hallo mocca,

wir benutzen in unserem 4.5 Shop folgenden CSS Code:

#page #plzpreview ul, #page #plzpreview2 ul, #page #blzpreview ul, #page #namepreview ul {
    -moz-border-radius: 2px 2px 2px 2px;
    background-color: #FFFFFF;
    border: 1px solid #8C8989;
    left: 150px;
    margin: 0;
    position: absolute;
    top: 20px;
    width: 400px;
    z-index: 10;
}
#page .ejHighlight, #page .ejPlzPreview li:hover {
	background: -moz-linear-gradient(center top , #FF8604, #EB6005) repeat scroll 0 0 transparent;
}
#page .ejPlzPreview  {max-height: 134px;}
	#page .ejPlzPreview li {width: auto;padding: 5px;}
	
#wrongKtoOrBlz , #wrongGenderInv {
    clear: both;
    color: #FF0000;
    font-size: 11px;
    line-height: 14px;
    margin: 0;
    padding: 5px 0 5px 150px;
}
.err {color:#f00;}

Vielleicht benutzt du den als Grundlage und passt ihn dann dementsprechend an.

Viele Grüße
Benny

3

@mocca: bist du hier schon weiter gekommen? Deine Lösung würde mich interessieren.

4

Versuch mal, hinter jede eigene Formatierung in oxid.css ein “!important” zu setzen, ich erinnere dunkel, dass der Butler CSS-codes inline mitgibt, die man nur so überschreiben kann.

Bsp: padding-left:22px!important;

Gruß,
Achim

5

Also bei mir siehts jetzt genau so aus wie ich es oben haben wollte.
Box unterhalb des Feldes, orange, kein Scrollbalken, etc.