Icon inline in bootstrap-datepicker positionieren

Hallo Leute,

ich versuche aktuell einen Datepicker mit einem Icon zu verwenden. Leider ist das nicht so einfach wie ich gedacht habe! 😊 Immerhin bin ich soweit, dass der Kalender als solches funktioniert, nur das Icon für den Picker wird nicht so angezeigt wie ich das erwarte.

Ich wollte diese Komponente verwenden: https://bootstrap-datepicker.readthedocs.io/en/latest/

In meinem Demoprojekt hat das erst auch alles super ausgesehen, aber in meinem Projekt wurde dann das Glyph-Icon nicht angezeigt. Ich habe dann rausgefunden, dass es an meiner verwendeten Bootstrap Version liegt. Bootstarp unterstütz diese Icons nicht mehr: https://getbootstrap.com/docs/4.0/migration/#components

Jetzt versuche ich ein Icon von font-awesom einzubinden. Ich schaffe es aktuell nicht, das Icon inline in dem Picker zu positionieren. Hier mein Code:

            <div id="startDatePicker" class="input-group date date-border datepicker-inline">
                <input type="text" class=" datepicker">
                <span class="input-group-addon">
                    <div>
                        <i class="fa fa-calendar"></i>                       
                    </div>
                </span>
            </div>

Ich habe auch schon diverse Versuche mit css unternommen:

.image-inline  {
    position: relative;
    top: 1px;
    display: inline-block;
    background-color: red;
}

Leider habe ich bisher mit den Versuchen mein Ziel nicht erreicht.

Könnte mir jemand unter die Arme greifen, so dass ich das Icon rechts positioniert bekomme?

Vielen Dank schon mal!

Herzliche Grüße
Christoph

Ich habe mein Demoprojekt auf Github gepostet, dann kann man damit etwas testen: datepicker-demo

Vielen Dank schon mal fürs reinschauen!

Hallo Basti,

das Icon soll nach rechts. Wie du siehst sind es bei mir etwas mehr als 2-3 Pixel. Ich habe das mit Chrome, Edge und FireFox getestet. Wir so eine Position eventuell gecached?

html-seminar.de/woltlab/attachment/2671/

Vielen Dank schon mal für die nette Unterstützng!

Herzliche Grüße
Christoph

Das sieht nicht so aus wie es soll, das Icon befindet sich unter dem Input. Dieser datepicker hat mich bisher echt Nerven gekostet.

Zitat von basti1012

Schau jetzt nochmal.

Zeigen bei dir alle Browser das falsch an ?

Ja, auch am Handy wird es nicht richtig angezeigt. Bei dir funktioniert das wirklich??

Hallo Sempervivum,

da wäre ich alleine nie drauf gekommen! Punkt 1 und 2 konnte ich umsetzten und jetzt sieht das schon viel besser aus. Nur mit Punkt 3 komme ich nicht weiter. .import-group kommt von Bootstrap und damit kann ich ja die Zeile nicht einfach löschen. Mit was kann ich den die width: 100% überschreiben? Wenn ich einen fixen Wert angebe 200px z.B. landet das Icon wieder in der nächsten Zeile.

Vielen Dank schon mal so weit echt super!

.import-group {
   width: unset !important;
   background-color: red !important;
 }

Das habe ich in der bootstrap-datepicker.css eingetragen. Scheibar wird das aber nicht angezogen, bzw. durch bootstrap wieder überschrieben.

Zitat von Sempervivum

.input-group.datepicker-inline {
width: auto;
}

Sorry, ich hatte deine Antwort eben nicht gesehen! Das funktioniert und nun ist es so wie ich es haben wollte! Meine Idee mit important funktioniert mit Edge und FireFox nicht.

Dieses Control hat mich jetzt wirklich viele Stunden beschäftigt. Schade das soviele nicht brauchbare Informationen zu diesem Datepicker im Netz vorkommen. Durch verschiedene Bootstrap Versionen und das nicht weiter unterstütze Glyph-Icon findet man sehr sehr viel unbrauchbares und man merkt es erst nicht das man da auf dem falschen Weg ist.

Vielen Dank für deine nette Unterstützung, das war eine sehr große Hilfe für mich!

Herzliche Grüße
Christoph

Ich habe noch etwas aufgeäumt und das Icon zentriert. Das Demoprojekt habe ich auf GitHub hochgeladen: bootstrap-datepicker-demo Vielleicht hilft das ja auch anderen!

Herzliche Grüße
Christoph