Ankündigung

Einklappen
Keine Ankündigung bisher.

Glyphicon und dropdown menu. Zeile verrutscht

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Glyphicon und dropdown menu. Zeile verrutscht

    Guten Abend,

    ich habe ein Problem. Und zwar möchte ich ein dropdown menu haben, dass sich öffnet, wenn man auf "löschen" drückt um danach auszuwählen ob man sich sicher ist den beitrag zu löschen.

    meine Ausgabe sieht wie folgt aus:
    PHP-Code:
            echo      '<div style="color:darkred;cursor:pointer" class="glyphicon glyphicon-remove">'
                    
    '<div type="button" data-toggle="dropdown">l&ouml;schen</div>'
                    
    '<ul class="dropdown-menu">'
                    
    '<li>Sicher?</li>'

                    
    '<li>'
                    
    '<form action="" method="post">'
                    
    '<a style="word-spacing: 5px;"  href=""><button style="background:none;border:none;" type="delete" name ="'.$choicyID.'">Ja!</button></a>'
                    
    '</form>'
                    
    '</li>'

                    
    '<li>'
                    
    '<a>Nein!</a>'
                    
    '</form>'
                    
    '</li>'
                    
    '</ul>'
                    
    '</div>' 
    Es funktioniert auch ohne probleme. jQuery etc ist eingebunden. Das Glyphicon wird jedoch leider eine Zeile höher als "löschen" angegeben.( so wie im Anhang zu sehen)

    Nehme ich das div weg mit dem glyphicon, dann steht dort natürlich nur noch "löschen" doch das dropdown funktioniert nicht mehr..??
    Baue ich es so um, dass der div, der hier auch als button fungiert das glyphicon mit einbezieht, dann öffnet sich das dropdown irgendwo weit weg am bildschirmrand?
    Das spricht alles irgendwie gehen meine logik.. kann mir jemand helfen?


    LG

  • #2
    Das ist kein Javascript Problem sondern eher HTML in Grundlagen und CSS.

    Bezogen auf HTML machst du aus
    HTML-Code:
    <div style="color:darkred;cursor:pointer" class="glyphicon glyphicon-remove">
    <div type="button" data-toggle="dropdown">l&ouml;schen</div>
    ein
    HTML-Code:
    <button type="button" data-toggle="dropdown">
        <i class="glyphicon glyphicon-remove"></i>
        löschen
    </button>
    *ungetestest

    Die Stil-Angaben zu dem Glyphicon fügst du der CSS Klasse glyphicon-remove zu.
    und wenn du alles in UTF-8 abspeicherst so wie es das W3C vorschreibt dann kannst du auch "löschen" schreiben anstatt die HTML-Entität für das ö zu verwenden.

    Den gesamten HTML-Code durch den PHP-Parser zu jagen um dann mit dem Befehl echo wieder HTML auszugeben ist auch nicht durchdacht.
    Das Element i habe ich jetzt mal willkürlich gewählt, da Bootstrap das auch so verwendet, aber es wäre auch jedes andere Inline-Element ohne besondere Eigenschaft denkbar, wie das b oder span.

    Du solltest dir noch mal ansehen welche Elemente es in HTML gibt, damit du nicht immer eine DIV-Suppe kreierst.

    Kommentar


    • #3
      [MOD: verschoben von Javascript]
      Competence-Center -> Enjoy the Informatrix
      PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

      Kommentar

      Lädt...
      X