Zurb-foundation: Verwendung von divs innerhalb eines Label-Tags - zurb-foundation

ich benutze Stiftung für mein erstes Projekt jetzt und ich liebe die Funktionalität, die es aus der Box bietet, aber Ich habe Probleme mit meinen benutzerdefinierten Radioboxen.

Die Idee ist, nicht nur Text innerhalb der Radioknöpfe Beschriftung, sondern auch ein Bild und einige Fettschrift. Sobald ich anfange, entweder ein img oder ein Fett gedruckt Etikett innerhalb des Etiketts, ist die Auswahl der Optionsfeld über den Etiketten Text gebrochen.

Der Code, den ich verwende, ist dies

<label for="radio2">
<img src="/images/img/nho_musicians_flute.png">
<input name="radio2" type="radio" id="radio2" style="display:none;" CHECKED>
<span class="custom radio checked"></span>
<b>Radio</b> Button 1
</label>

Damit kann nur ein Radio ausgewählt werdenWenn Sie DIREKT klicken, wenn Sie auf den Text oder das Bild klicken, führt dies zu unregelmäßigen Auswahlen. Es scheint, dass die Basis-JS-Selektoren nicht für zusätzliche Tags innerhalb eines Labels verantwortlich waren.

Gibt es eine Möglichkeit, dies mit Foundation zu arbeiten, oder muss ich auf Workarounds zurückgreifen (den gesamten Text fett formatieren und das Bild außerhalb des Labels platzieren)?

Antworten:

1 für die Antwort № 1

Gute Frage, ich hatte dieselben Probleme wie Sie, als ich benutzerdefinierte Formulare über die benutzerdefinierten Formularimplementierungen von F4 erstellen musste.

Wenn Sie in der Implementierung (custom.forms.scss) nachsehen, können Sie sehen, dass sie :before und content: "" um dies zu erreichen. Ich vermute, dass "s, warum Sie keine Tags nach der hinzufügen können <span class="custom radio"></span>

Nun, was Sie als Workaround tun können, ist, Ihre benutzerdefinierten Elemente usw. innerhalb der <span> Element. Dies wird gut funktionieren, wird aber seltsam aussehen, da die Breite und Höhe sehr klein ist. Aber von da an ist es nur eine Frage des Styling, bis Sie es so aussehen wie Sie wollen. Hier ist ein wirklich einfaches Beispiel mit absoluter Positionierung:

<span class="custom radio">
<span style="position: absolute; top: 0; left: 0; width: 500px; margin-left: 30px;">
<b>test</b> foo
</span>
</span> &nbsp;