Support » Plugins » Caldera Forms Radio Buttons unterschiedlich groß in Auswahl Feldern

Caldera Forms Radio Buttons unterschiedlich groß in Auswahl Feldern

  • JochenBinaer

    (@jochenbinaer)


    vor 7 Jahren, 7 Monaten

    Hallo zusammen.

    Ich habe ein Formular mit Caldera Forms erstellt.
    Die Antworten stuft man mittels 6 Radio Buttons an.
    Problem ist bei ALLEN Fragen das selbe:
    Es gibt innerhalb jeder Frage drei unterschiedliche Größen Radiobuttons im IE und in Chrome. Keine der drei Größen ist dabei die richtige. Alle sind zu klein.

    Firefox zeigt alle sauber an.

    Hier mal der Quellcode einer Antwort – wie ihr seht ist da kein Unterschied:

    <div class=“radio“>
<label data-label=“1″ for=“fld_1435703_1_opt2066938″><input type=“radio“ id=“fld_1435703_1_opt2066938″ data-field=“fld_1435703″ class=“fld_1435703_1″ name=“fld_1435703″ value=“1″ > 1</label> 
</div>
<div class=“radio“>
<label data-label=“2″ for=“fld_1435703_1_opt2085797″><input type=“radio“ id=“fld_1435703_1_opt2085797″ data-field=“fld_1435703″ class=“fld_1435703_1″ name=“fld_1435703″ value=“2″ > 2</label> 
</div>
<div class=“radio“>
<label data-label=“3″ for=“fld_1435703_1_opt1299735″><input type=“radio“ id=“fld_1435703_1_opt1299735″ data-field=“fld_1435703″ class=“fld_1435703_1″ name=“fld_1435703″ value=“3″ > 3</label> 
</div>
<div class=“radio“>
<label data-label=“4″ for=“fld_1435703_1_opt1866348″><input type=“radio“ id=“fld_1435703_1_opt1866348″ data-field=“fld_1435703″ class=“fld_1435703_1″ name=“fld_1435703″ value=“4″ > 4</label> 
</div>
<div class=“radio“>
<label data-label=“5″ for=“fld_1435703_1_opt2075519″><input type=“radio“ id=“fld_1435703_1_opt2075519″ data-field=“fld_1435703″ class=“fld_1435703_1″ name=“fld_1435703″ value=“5″ > 5</label> 
</div>
<div class=“radio“>
<label data-label=“6″ for=“fld_1435703_1_opt1494411″><input type=“radio“ id=“fld_1435703_1_opt1494411″ data-field=“fld_1435703″ class=“fld_1435703_1″ name=“fld_1435703″ value=“6″ > 6</label> 
</div>

    Mit der Bitte um Hilfe.
    Gruß
    Jochen

    Moderationshinweis: Code-Formatierung korrigiert. Benutz doch bitte demnächst den im Editor angebotenen [Code]-Button. Dadurch wird der Beitrag besser lesbar. Vielen Dank, Bego

    • Dieses Thema wurde geändert vor 7 Jahren, 7 Monaten von JochenBinaer.
    • Dieses Thema wurde geändert vor 7 Jahren, 7 Monaten von Bego Mario Garde. Grund: Code-Formatierung korrigiert
Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Moderator Bego Mario Garde

    (@pixolin)

    vor 7 Jahren, 7 Monaten

    Wahrscheinlich kommt die unterschiedliche Darstellung auch nicht aus dem HTML-Code sondern aus CSS-Regeln. Die können wir hier aber nicht sehen. Gibt es auch einen Link zu der Seite mit dem Formular?

    (Bitte verwende für langen Code-Abschnitte Dienste wie Pastebin.com oder GitHub, da die Threads sonst völlig unlesbar werden. Besser ist aber eine URL, weil wir uns dann alles selbst anschauen können.)

    Thread-Starter JochenBinaer

    (@jochenbinaer)

    vor 7 Jahren, 7 Monaten

    Sehr gerne.
    Der Link:
    http://wp.sr-globalconsult.de/entscheidungs-matrix/

    (Danke auch für den Hinweis für die Codeschnipsel!)

    Moderator Bego Mario Garde

    (@pixolin)

    vor 7 Jahren, 7 Monaten

    Ich hab jetzt gerade mit Caldera Forms und dem Theme Twenty Sixteen ein Formular mit Radio-Buttons erzeugt und erhalte ebenfalls eine Anzeige, bei der der Radio-Button des ersten Elements kleiner dargestellt wird als der Rest. Was mich irritiert: Deaktiviert man den Font Merriweather, werden Radiobutton und Beschriftung korrekt angezeigt.

    Verstanden habe ich das ehrlich gesagt nicht.

    Workaround: Formular mit anderen Schriftart ausgeben.

    Thread-Starter JochenBinaer

    (@jochenbinaer)

    vor 7 Jahren, 7 Monaten

    Hi Bego.

    Danke für den tipp. Bin damit sogar noch weiter gekommen:
    Als ich für das Element die Schriftart abschalten wollte bin ich auf einen Randabstand -20px gestoßen. Den habe ich ausdokumentiert und jetzt geht es.
    Scheinbar wurden die Zellen dadurch gequetscht und das hatte diese verkleinerte Darstellung der Listenpunkte zur Folge.

    Der funktionierende Workaround im Caldera-forms.css sieht jetzt so aus:

    .caldera-grid .radio-inline input[type=radio],
.caldera-grid .checkbox input[type=checkbox],
.caldera-grid .checkbox-inline input[type=checkbox] {
//*margin-left:-20px*//
}
    Moderator Bego Mario Garde

    (@pixolin)

    vor 7 Jahren, 7 Monaten

    Glückwunsch! Das muss ich völlig übersehen haben.
    Toll, dass das Formular jetzt korrekt ausgegeben wird (gerade nochmal angeschaut).

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Das Thema „Caldera Forms Radio Buttons unterschiedlich groß in Auswahl Feldern“ ist für neue Antworten geschlossen.

Themen-Schlagwörter

Ansichten