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

  • Wie sieht es den hier aus

    ** Link entfern, weil nicht mehr erreichbar **

    Das ist dein Code unverÀndert.

    Wenn es so aussieht, wie es soll ,solltest du viel eicht deinen Cache löschen.

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

  • CSS
    .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.

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