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:

    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:

    Code
    .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

  • 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!

  • Du kannst auch einen Selektor in dieser Form verwenden:

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

    Das ist dann recht spezifisch und dürfte sich gegen die Definition von Bootstrap durchsetzen.

    (ohne Leezeichen zwischen .input-group und .datepicker-inline)

  • .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! :thumbup::)


    Herzliche Grüße
    Christoph

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!