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
    1. <div id="startDatePicker" class="input-group date date-border datepicker-inline">
    2. <input type="text" class=" datepicker">
    3. <span class="input-group-addon">
    4. <div>
    5. <i class="fa fa-calendar"></i>
    6. </div>
    7. </span>
    8. </div>


    Ich habe auch schon diverse Versuche mit css unternommen:

    Code
    1. .image-inline {
    2. position: relative;
    3. top: 1px;
    4. display: inline-block;
    5. background-color: red;
    6. }


    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 musste drei Kleinigkeiten ändern, um das Icon rechts neben das Eingabefeld zu bekommen:

    1. inline-flex damit der Container nur die Breite entspr. des Inhaltes einnimmt.
    2. Absolute Breite deaktivieren.
    3. width: 100%; deaktivieren, ebenfalls damit der Container nur die Breite entspr. Inhalte einnimmt.

    datepicker-icon.png

  • 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
    1. .input-group.datepicker-inline {
    2. width: auto;
    3. }

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

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

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von Sempervivum ()

  • Code
    1. .import-group {
    2. width: unset !important;
    3. background-color: red !important;
    4. }

    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

  • Gern geschehen! Ja, leider findet man viele Infos im Netz, die unbrauchbar sind. Weitere Beispiele:

    • Layout mit float
    • Anleitungen für Lightboxes aus dritter Hand, die dann häufig veraltet sind