jQuery UI + Datepicker + CSS

[Kristine]

Hallo,

hab eine kleine Frage und hoffe dass ihr das schon mal gemacht habt. Ich habe seid heute den Datepicker von http://jqueryui.com/demos/ in meine Seite eingebunden. Der Kalender geht auch. Habe diese Version genommen: http://jqueryui.com/demos/datepicker/icon-trigger.html aber nun meine Frage, wie kann ich das machen, dass der Kalender nicht so an dem Imput Feld hängt? da sind so viele CSS Sachen dabei ich finde das einfach nicht.

Für Hilfe wäre ich sehr dankbar.

Gruß,
Kristine

[Hopsel]

Hi Kristine!

[...] wie kann ich das machen, dass der Kalender nicht so an dem Imput Feld hängt?

Stelle doch einfach einen passenden Abstand ein...

da sind so viele CSS Sachen dabei ich finde das einfach nicht.

Weil kein Abstand definiert wurde.

Oder liegt dein Problem darin, dass du nicht weißt, wie der Datetimepicker per Javascript hinzugefügt wird und welches Markup dabei entsteht?
Dazu empfehle ich dir Firebug, ein Addon für Firefox.

Der erzeugte Code sieht folgendermaßen aus:

<p>  
  Date:  
  <input id="datepicker" class="hasDatepicker" type="text"/>  
  <img class="ui-datepicker-trigger" src="images/calendar.gif" alt="..." title="..."/>  
</p>

Damit sollte es dir ohne weiteres möglich sein, einen entsprechenden Abstand einzustellen.

MfG H☼psel

[Kristine]

Hallo,

Damit sollte es dir ohne weiteres möglich sein, einen entsprechenden Abstand einzustellen.

ich habe das nun mal so gemacht:

  
<span>  
<input name="termin" type="text" class="labeltext" id="datepicker" size="10" />  
</span>  

das CSS sieht wie folgt aus:

  
<style type="text/css">  
<!--  
.ui-datepicker-trigger {  
padding-left:10px;  
padding-top:10px;  
}  
-->  
</style>  

der Kalender bleibt aber immer noch an der gleichen Stelle stehen oder mache ich da was falsch?

Gruß,
Kristine

[Hopsel]

Hi Kristine!

Dein Code funktioniert bei der Demoseite des Datepickers, wenn ich im Firebug live die Änderungen einfüge.

der Kalender bleibt aber immer noch an der gleichen Stelle stehen oder mache ich da was falsch?

Sicherlich.
Kannst du eine Beispielseite online oder zumindest per Copy&Paste zur Verfügung stellen?

MfG H☼psel

[Kristine]

Hallo,

ok hab es hinbekommen:

  
<style type="text/css">  
<!--  
.ui-datepicker-trigger {  
padding-left:5px;  
bottom: -4px;  
position:relative;  
}  
-->  
</style>  

Gruß,
Kristine