Radio Buttons verschoben

Hallo.
Ich hab auf ein Template, basierend auf Bootstrap 3, gewechselt.
Jetzt werden, unter anderem, die Radiobuttons total vermurkst angezeigt.
Also habe ich die die Subscription gekauft, weil diese damit klar kommen soll.
Das ist Leider bei mir nicht der Fall. Auch wenn das Formular Layout auf Bootstrap 3 eingestellt ist habe ich da immer noch Chaos drin.



Da ich von css mal so gar keinen Plan habe, hoffe ich hier auf Hilfe.

Link zum Formular:
rifugio-canalba.de/index.php?Itemid=348

Hallo,

Visforms liefert das HTML aus, das mit dem Standard Bootstrap 3 CSS korrekt zur Anzeige gebracht wird. Leider ist es so, dass viele Templates sich als Bootstrap 3 Templates bezeichnen, das Bootstrap 3 CSS aber nicht ganz korrekt mitliefern. Insbesondere im Bereich des Bootstrap 3 CSS, das Formulare betrifft, kommt es leider immer mal zu Abweichungen.

Ich vermute das liegt daran, dass Joomla! selbst eigentlich mit dem Boostrap 2 komplatibel ist und Joomla! selbst ja auch Formularelemente hat (Login). Scheinbar biegen manche Templates dann das Boootstrap 3 CSS um, so dass es mit dem Joomla! Formularelementen zusammenpasst und das wirkt sich dann negativ auf eine Formularkomponente aus, die wirklich korrektes Bootstrap 3 HTML liefert.

Die Lösung für dein Problem ist, dass du mit etwas individuellem CSS nachbessern musst.

Hinsichtlich der Inline- Radio Button/Checkboxgruppen sollte folgendes CSS helfen

.visform.bt3default .radio input[type="radio"],
.visform.bt3default .radio-inline input[type="radio"],
.visform.bt3default .checkbox input[type="checkbox"],
.visform.bt3default .checkbox-inline input[type="checkbox"] {
position: relative;
margin-left: -20px;
float: left;
display: block;
height: auto !important;
}

Du kannst dieses entweder über Visforms selbst hinzufügen (Wie in der Dokumentation beschrieben: www.vi-solutions.de/de/support/dokumenta...out-mit-css-anpassen )
Oder oft bieten die Templates selbst auch die Möglichkeit an eigenes CSS hinzuzufügen. Da könntest du das CSS auch reinschreiben.

Ein weitere Stelle, an der dein Template das Bootstrap 3 CSS nicht sauber impelementiert hat ist bei der Breite der Eingabefelder. Im Standard Boostrap 3 Layout gehen alle Inputs, Selects und die Textarea immer über die gesamte Breite. Dein Template hat hier ebenfalls eingegriffen und die Breite auf großen Bildschirmen verringert, aber vergessen auch die Input-Group, die für das Datumsfeld verwendet wird, entsprechend anzupassen. Deshalb ragt das Datumsfeld so weit heraus. Normalerweise müssten alle Felder so breit sein wie das Datumsfeld.

Der korrekte Boostrap 3 Standard sollte sich mit folgendem CSS wieder herstellen lassen

.visform.bt3default select,
.visform.bt3default textarea,
.visform.bt3default input[type="text"],
.visform.bt3default input[type="date"],
.visform.bt3default input[type="number"],
.visform.bt3default input[type="email"],
.visform.bt3default input[type="url"] {
width: 100% !important;
}

Gruß,
Aicha

Vielen dank für die schnelle Hilfe.
Jetzt ist alles wie es sein soll.

Danke für die Rückmeldung.
Gruß,
Aicha