Hallo,
was muss ich tun, damit ich die Checkbox rechts neben den Text ausrichten kann?
Siehe 093B3829-1B03-4F16-865B-CC1C7C35E904.jpeg
Danke
Hallo,
was muss ich tun, damit ich die Checkbox rechts neben den Text ausrichten kann?
Siehe 093B3829-1B03-4F16-865B-CC1C7C35E904.jpeg
Danke
Mit css festlegen, dass die Elemente z.B. gefloatet werden oder Flexbox bzw. css-grid verwenden. Unter Umständen funktioniert auch display: inline.
Konkret kann man nur mit einem Link etwas empfehlen.
Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
Unterstütze bitte das Contao-Projekt (Button Links)
Weitere Spendenmöglichkeiten
------------------------------------------------------------------------------------------------------
Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
Contao-Online-Video-Kurse: Contao Academy
Funktionalität erweitern: Contao-Erweiterungen
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
Hier der Link:Zitat von mlweb
https://boulderrausch.de/kontakt-bouldern.html
Ich weiß nicht welche Contao-Version Du verwendest, aber mir sind die vielen fieldsets im Code etwas suspekt. Die stören beim stylen. Ist das ein Originaltemplate oder wurde dort etwas angepasst?
Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
Unterstütze bitte das Contao-Projekt (Button Links)
Weitere Spendenmöglichkeiten
------------------------------------------------------------------------------------------------------
Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
Contao-Online-Video-Kurse: Contao Academy
Funktionalität erweitern: Contao-Erweiterungen
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
Standardmäßig ist der Text immer rechts neben der Checkbox, zumindest in Contao 4. Erst folgt das input-Tag, danach das label-Tag. Ein legend-Tag gibt es meines Wissens in C4 nicht mehr. Außerdem hast Du bei Dir das Label auf font-size:0 gesetzt, weswegen der Text Datenschutz rechts neben der Checkbox nicht zu sehen ist.
Meine Variante:
Ergänzung: Im BE habe ich dem Feld datenschutz keine Feldbezeichnung gegeben. Bei den Optionen steht bei Wert das "value" und bei Bezeichnung das "label" für das Formular. Ursprünglich hatte ich bei Wert/Bezeichnung dasselbe zu stehen. Das funktioniert aber nicht, weil im Wert-Feld keine HTML-Tags stehen dürfen. Deshalb gibt es ein verkürztes Wert-Feld.HTML-Code:<div class="widget widget-checkbox mandatory"> <fieldset id="ctrl_223" class="checkbox_container mandatory"> <input name="datenschutz" value="" type="hidden"> <span> <input name="datenschutz" id="opt_223_0" class="checkbox" value="Ich erkenne die Datenschutzerklärung des xxx an." required="" type="checkbox"> <label id="lbl_223_0" for="opt_223_0">Ich willige ein, dass der xxx die von mir übermittelten Informationen und Kontaktdaten dazu verwendet um mit mir in Verbindung zu treten, hierüber zu kommunizieren und meine Anfrage abzuwickeln. Dies gilt insbesondere für die Verwendung der E-Mail-Adresse zum vorgenannten Zweck. Ich bin damit einverstanden, dass die Daten meiner Anfrage dauerhaft gespeichert werden. Die Datenschutzerklärung kann <a href="datenschutzerklaerung.html">hier</a> eingesehen werden.</label> </span> </fieldset> </div>
Geändert von Samson1964 (17.05.2018 um 05:37 Uhr)
Viele Grüße
Frank
Seit Mai 2013 Fan von Contao
Webmaster vom Deutschen Schachbund und Berliner Schachverband
Mein Blog: Schachbulle
Meine Erweiterungen bei GitHub
Meine Videos auf YouTube: Playlist zur Contao-Programmierung/Einrichtung
Übernehme doch einfach den Vorschlag aus meiner Ergänzung. Sollte in 3.5 nicht anders sein. Das label-Tag folgt in Deinem/meinem Formular nach dem input-Tag.
Viele Grüße
Frank
Seit Mai 2013 Fan von Contao
Webmaster vom Deutschen Schachbund und Berliner Schachverband
Mein Blog: Schachbulle
Meine Erweiterungen bei GitHub
Meine Videos auf YouTube: Playlist zur Contao-Programmierung/Einrichtung
Du arbeitest noch nicht lange mit Contao?! Gehe unter Inhalte -> Formulargenerator und bearbeite dort das Checkbox-Menü Deines Kontaktformulars. So sieht die Eingabemaske in 3.5 aus, ergänzt mit Beispielen aus meiner Ergänzung:
Edit: Ganz vergessen. Natürlich ein Häkchen bei Pflichtfeld rein.
Viele Grüße
Frank
Seit Mai 2013 Fan von Contao
Webmaster vom Deutschen Schachbund und Berliner Schachverband
Mein Blog: Schachbulle
Meine Erweiterungen bei GitHub
Meine Videos auf YouTube: Playlist zur Contao-Programmierung/Einrichtung
Ich bin der Endkunde, nicht der Ersteller dieser Webseite und kleine Änderungen versuche ich selbst durchzuführen.
Ich weiß wo das Formular im BE zu finden ist.
Was ich aber nicht weiß, wo kann ich den HTML-Code anpassen, nicht das Formular.
Wenn ich das im BE so umsetze, wie du schreibst, dann passiert gar nichts. Auf der Webseite wird weder die Checkbox, noch der Text angezeigt.
Ich hatte mich ja schon weiter oben etwas über den erzeugten Code (verschachtelte fieldsets) gewundert. Wenn dort angepasste Templates im Einsatz sind, ist in dem Fall der Ersteller der Website vielleicht doch der geeignete Ansprechpartner.
Wenn ich @Samson1964 richtig verstanden habe (getestet habe ichs gerade nicht), dann ist das was er beschreibt der Originalcode den Contao erzeugt, wenn keine angepassten Templates im Einsatz sind.
Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
Unterstütze bitte das Contao-Projekt (Button Links)
Weitere Spendenmöglichkeiten
------------------------------------------------------------------------------------------------------
Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
Contao-Online-Video-Kurse: Contao Academy
Funktionalität erweitern: Contao-Erweiterungen
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
An das HTML mußt Du ja gar nicht ran. Das CSS reicht ja.
Aktuell sehe ich was auf Deiner Seite. Ist aber das legend-Feld. Das Label wird bei Dir deswegen nicht angezeigt:
Breite, Höhe, Schriftgröße - alles 0...HTML-Code:.ce_form label { width: 0; height: 0; font-size: 0; position: absolute; overflow: hidden; }
Viele Grüße
Frank
Seit Mai 2013 Fan von Contao
Webmaster vom Deutschen Schachbund und Berliner Schachverband
Mein Blog: Schachbulle
Meine Erweiterungen bei GitHub
Meine Videos auf YouTube: Playlist zur Contao-Programmierung/Einrichtung
Also heißt das im Klartext, ich benutze ein angepasstes Template und dadurch wird das Formular nicht richtig angelegt.
Denn was Samson1964 schreibt, wird bei mir ja nicht sauber umgesetzt, da die Checkbox und der Text nicht angezeigt wird.
Obwohl das Formular ja richtig dargestellt wird, eben nur nicht die nachträglich hinzugefügte Checkbox+Text.
Auf was bezieht sich eigentlich "Standard" und "Gruppe"?
Kann sein. Mußt Du unter Layout -> Templates schauen. Dein Formular sieht aber nicht viel anders als das Standardformular aus.
Ich zitierte ja schon Dein CSS, welches das Anzeigen des Textes verhindert. Das hat nichts mit dem Template zu tun.
Standard ist soweit ich mich erinnere: Checkbox ist angehakt.
Gruppe: Checkboxen werden zu einer Gruppe zusammengefaßt und man kann nur eine oder eine bestimmte Anzahl dieser Gruppe aktivieren.
Viele Grüße
Frank
Seit Mai 2013 Fan von Contao
Webmaster vom Deutschen Schachbund und Berliner Schachverband
Mein Blog: Schachbulle
Meine Erweiterungen bei GitHub
Meine Videos auf YouTube: Playlist zur Contao-Programmierung/Einrichtung
Mit rechter Maustaste im Browser (an der richtigen Stelle) und "Element untersuchen" im Kontextmenü kannst Du temporär am CSS herumexperimentieren. Ich würde alles rauswerfen bei .ce_form label oder höchstens noch ein display:inline dazusetzen. Wenn Du mit Experimentieren fertig bist, kannst Du die Änderungen in der entsprechenden CSS-Datei (oder wo immer das auch verwaltet wird, vielleicht unter Themes -> CSS) verewigen.
Viele Grüße
Frank
Seit Mai 2013 Fan von Contao
Webmaster vom Deutschen Schachbund und Berliner Schachverband
Mein Blog: Schachbulle
Meine Erweiterungen bei GitHub
Meine Videos auf YouTube: Playlist zur Contao-Programmierung/Einrichtung
Komme leider nicht weiter.
Ich möchte ja nur das hier, wie im Anhang dargestellt.
Das normale Formular erzeugt leider keine Checkbox+Text.
Das Formularfeld mit Checkbox im Bild, wie wurde das denn erzeugt?
BC7AD4C3-3CED-4834-A691-1483600058F7.jpeg
VG Maik
Schaue Dir mit "Element suchen" aus dem Kontextmenü das CSS von der Checkbox des Kontaktformulars an. Das kannst Du dann sicher übernehmen. Das HTML sollte gleich aufgebaut sein.
Viele Grüße
Frank
Seit Mai 2013 Fan von Contao
Webmaster vom Deutschen Schachbund und Berliner Schachverband
Mein Blog: Schachbulle
Meine Erweiterungen bei GitHub
Meine Videos auf YouTube: Playlist zur Contao-Programmierung/Einrichtung
Anscheinend wurden doch die labels per css ausgeblendet. Ich würde im Formulargenerator jetzt einfach mal die Feldbezeichnungen rausnehmen und das
mal auskommentieren oder rausnehmen.HTML-Code:.ce_form label { width: 0; height: 0; font-size: 0; position: absolute; overflow: hidden; }
Du möchtest doch ein Formular was die Platzhalter nutzt um die einzelnen Eingabefelder zu bezeichnen, richtig?
Nebenbei bemerkt halte ich eine Ckeckbox bei diesem einfachen Formular für unnötig - dazu gibt es aber anscheinend andere Auflassungen - warum auch immer.
Viele Grüße
Frank
Seit Mai 2013 Fan von Contao
Webmaster vom Deutschen Schachbund und Berliner Schachverband
Mein Blog: Schachbulle
Meine Erweiterungen bei GitHub
Meine Videos auf YouTube: Playlist zur Contao-Programmierung/Einrichtung
Doch sind sie, sieht man ja im Quelltext.
Du bist aber nicht versehentlich in einem anderen Formular?
@Frank
es ist nicht nur ein css Problem, denn die labels sind ja gesetzt sollen sie aber doch anscheinend nicht, sonst hätte man ja nicht diesen Weg des Ausblendens gewählt , oder??
Geändert von Bennie (17.05.2018 um 15:01 Uhr)
Genau daran scheitert es gerade, da ich im Contao gerade mal das BE nutze.
Es gab aber auch mal ein Leben vor Contao und da habe ich alles selber machen müssen,können.
Abschließend, dass CSS verhindert momentan die richtige Darstellung im Formular???
Das ist der generierte Code.
Code:<div class="widget widget-checkbox mandatory"> <fieldset id="ctrl_12" class="checkbox_container mandatory"> <input type="hidden" name="Datenschutz" value=""> <span><input type="checkbox" name="Datenschutz" id="opt_12_0" class="checkbox" value="test" checked required> <label id="lbl_12_0" for="opt_12_0">test test</label></span> </fieldset> </div>
Genau. Der damalige Ersteller der Website hat sich gedacht, den label-Tag mit CSS unsichtbar zu machen. Warum auch immer.
Jetzt mußt Du herausfinden, wo das CSS gespeichert wird. Und dort kannst Du die Regel für ".ce_form label" einfach löschen. Danach steht das Label/Bezeichnung wieder rechts neben der Checkbox.
Viele Grüße
Frank
Seit Mai 2013 Fan von Contao
Webmaster vom Deutschen Schachbund und Berliner Schachverband
Mein Blog: Schachbulle
Meine Erweiterungen bei GitHub
Meine Videos auf YouTube: Playlist zur Contao-Programmierung/Einrichtung
Aber auch über den anderen Feldern - das war ja anscheinend ursprünglich nicht gewollt aus DesigngründenDanach steht das Label/Bezeichnung wieder rechts neben der Checkbox
“Feldbezeichnung” ist leer.
638121C4-A17A-4F8C-AD2E-65A98AF41C3D.jpeg
01865DB9-6787-4F1C-BA59-071DD08432A0.jpeg
Ja aber die Feldbezeichnungen der anderen EIngabefeldern sind gesetzt. Das meinte ich, nicht Deine Checkbox.
Der Grund für diese css Angabe war wohl dass man das Label zwar eingerichtet aber nicht sichtbar haben wollte - das stört jetzt dein Vorhaben. Im Grunde ein kleines Problem.
Kommst DU nicht über die Dateiverwaltung an das css?
Dann wäre das Hinzufügen von
eine Lösung. Das muß nach dem ".ce_form label" kommen!HTML-Code:.ce_form .widget-checkbox label { width: 100%; height: auto; font-size: 12px; position: static; }
Mit Quelltext ist übrigens die Quelltextansicht Deiner Webseite gemeint, nicht die Einstellungen im BE.
Viele Grüße
Frank
Seit Mai 2013 Fan von Contao
Webmaster vom Deutschen Schachbund und Berliner Schachverband
Mein Blog: Schachbulle
Meine Erweiterungen bei GitHub
Meine Videos auf YouTube: Playlist zur Contao-Programmierung/Einrichtung
Aber auch da muss er ja ans css . Das ist doch anscheinend das eigentliche Problem.
Danke für den Codeschnipsel.
Das CSS liegt wohl hier: <link rel="stylesheet" href="assets/css/cb94d64546cf.css"> und da komme ich nur über FTP von Zuhause dran.
Werde später mal nachschauen, ob ich den Code einbauern kann.
Das css file ist das was Contao ausgibt, das Ursprungs CSS liegt irgendwo im "files" Ordner - da musst Du schauen!!
Das was Du da bearbeiten willst bringt nichts da das immer wieder neu erstellt wird - wie gesagt in "files" nachsehen
Habe das jetzt erfolgreich umsetzen können. Danke dafür.
Was mich jetzt noch stört, ist die Formatierung, siehe Bild.
Der Text ist nicht auf gleicher Höhe wie die Checkbox und der Sendenbutton müsste weiter nach unter, sodass ein Abstand vorhanden ist.
Unbenannt.png
Schau an. Jetzt sind auch die verschachtelten fieldsets weg.
Für den Abstand zum Asenden-Button musst Du der checkbox bzw. dem Button einen Abstand per css geben, z.B.
Für den Versatz reicht eventuell schonCode:.widget-checkbox {margin-bottom: 10px;}
Falls die Elemente noch an anderer Stelle verwendet werden,muss man ggf. im css spezifischer werden.Code:.checkbox {vertical-align: baseline;}
Geändert von mlweb (18.05.2018 um 13:19 Uhr)
Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
Unterstütze bitte das Contao-Projekt (Button Links)
Weitere Spendenmöglichkeiten
------------------------------------------------------------------------------------------------------
Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
Contao-Online-Video-Kurse: Contao Academy
Funktionalität erweitern: Contao-Erweiterungen
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
Hab es oben geändert.
Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
Unterstütze bitte das Contao-Projekt (Button Links)
Weitere Spendenmöglichkeiten
------------------------------------------------------------------------------------------------------
Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
Contao-Online-Video-Kurse: Contao Academy
Funktionalität erweitern: Contao-Erweiterungen
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
Lesezeichen