cyber-knut
Beiträge: 5
Registriert: 21. Jan 2016, 18:22

do form! 5: Quellcode der Ausgabe auf responsive ändern?

3. Jun 2016, 14:24

Hallo alle miteiander.

Ich nutze do form! 5 classic, was auch alles prima funktioniert.

Nun baue ich gerade an einer Seite, die responsive sein muss und dafür müssen die Formularfelder der Modul-Ausgabe
a. sowohl in der CSS-Definition, als auch
b. vom Aufbau im Sourcecode angepasst werden.

Die Ausgabe wirft ja Code aus in der Form:

Code: Alles auswählen

<div class="fieldblock ">
     <label  for="el_0" >Firma</label>
         <input type="text"  class="formtext ftext" title="Firma" name="FORM[doform5314][el_0]" id="el_0" value=""  /><br />
</div>
Ich benötige aber eine Codeausgabe in dieser Form:

Code: Alles auswählen

<div class="row">
       <div class="col-md-6">
         <div class="form-group">
            <label for="el_0">Firma <strong class="formreq">*</strong></label>
            <input type="text" class="form-control" title="Firma" name="FORM[doform5314][el_0]" id="el_0" value=""  required />
         </div>
       </div>
       <div class="col-md-6">
         <div class="form-group">
            <label  for="el_1" >Ort</label>
            <input type="text" class="form-control" title="Ort" name="FORM[doform5314][el_1]" id="el_1" value=""  />
         </div>
      </div>
</div>
Jetzt habe ich schon direkt das Problem, dass ich die Definitionen zu den vorhandenen Styles nirgends finde. Entweder ich bin völlig blind, oder ich habe ne Denksperre...

Wo finde ich z.B. den Style für die Klasse "fieldblock"? Oder ist die gar überhaupt noch nirgends definiert und wartet auf meine Anweisungen?

Kann jemand Licht in meinen Tunnel bringen? Danke vorab!

Viele Grüße
Knut

UPDATE: habe jetzt rausgefunden, dass ich die Styles offenbar selbst erstmal definieren muss. :) Sollte ggf. bei dem Modul im Downloadbereich nochmal drauf hingewiesen werden. Früher gab's da eine Beispiel-CSS dazu, oder?

Bleibt nun noch der grundsätzliche Aufbau der Ausgabe, der geändert werden müsste.
Jemand da ne Idee, wie ich am besten vorgehe?

Benutzeravatar
Thomas.Skerbis
Beiträge: 1315
Registriert: 4. Aug 2006, 14:06
Wohnort: Rheinberg
Kontaktdaten: Website AOL

Re: do form! 5: Quellcode der Ausgabe auf responsive ändern?

4. Jun 2016, 22:49

Hi.
Was Du möchtest ist eine Ausgabe für Bootstrap. Das ist in do form! nicht vorgesehen.
Es ist relativ einfach die Ausgabe von do form! per css responsive zu definieren.
Ich habe die Demo CSS entfernt, da diese zu oft 1:1 übernommen wurde, obwohl diese absichtlich hässlich gestaltet war.
um deinen eigenen Wrapper um die Felder zu legen such mal im Code überall nach

Code: Alles auswählen

<div class="fieldblock
Weitere Infos in der Wiki https://github.com/skerbis/do-form-5/wiki
Thomas Skerbis

Bild | KLXM Crossmedia / Werbeagentur in Moers | https://klxm.de

Tricks zu REDAXO
https://friendsofredaxo.github.io/tricks/

cyber-knut
Beiträge: 5
Registriert: 21. Jan 2016, 18:22

Re: do form! 5: Quellcode der Ausgabe auf responsive ändern?

6. Jun 2016, 10:10

Hi.

Danke für deine Antwort. Ja, in der Tat steht Bootstrap auf dem Plan. War mir nicht klar, dass das Modul damit nicht klappt. Die Funktionalität ist einfach klasse und gut handelbar, nur die Ausgabe ist dann jetzt mein Flaschenhals. Schade.

Hast Du denn (neben Wrapper um das Konstrukt zu bauen) ggf. noch nen Tipp, inwieweit ich die Ausgabe so weit nutzen kann, dass ich nur die input-Felder aus der Eingabe in mein Bootstrap-Konstrukt integriere?

Also quasi die Eingabe nutze wie vorgesehen, dann die Ausgabe so lassen und die Seite dann live schalten. Anschließend den Quellcode der Seite anzeigen und nur die Teile aus dem Quellcode der generierten HTML-Ausgabe nehme, die ich brauche? Die id und Bezeichnungen müssten doch passen, da sie ja aus der Eingabe kommen. Ginge das überhaupt oder denke ich da jetzt zu simpel?

Danke für weiteren Input.

Benutzeravatar
Thomas.Skerbis
Beiträge: 1315
Registriert: 4. Aug 2006, 14:06
Wohnort: Rheinberg
Kontaktdaten: Website AOL

Re: do form! 5: Quellcode der Ausgabe auf responsive ändern?

6. Jun 2016, 16:13

Am besten du packst das do form in einen Boostrap-Container (Wrapper) oder so.
Und nutzt dann CSS die zu do form passen.
Alternativ nehme xform mit Bootstraptemplate.

Hier ein CSS zum spielen (nicht vollständig)

Code: Alles auswählen


/******************************* do form! CSS DEMO 2 *******************************/

 .formgen {
    
    display: block;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    text-align: left;
    
    
}

.formgendiv {display: block;
float: left;
width: 50%;}

.formsubmit {
    clear: both;
}

.formgendiv2 {display: block;
float: left;
width: 50%;
padding-left: 25px;}
.formgen .formheadline {color: #2B84C6; font-weight: 300; font-size: 1.5em; margin-bottom: 0.5em;}
.formgen .formhinweis {color: #2B84C6; font-weight: 600; font-size: 1em; margin-bottom: 0.5em;}
.formgen .radioblock {margin-top: 1.5em;
margin-bottom: 1.5em;}

.formgen .radiofield {float: left;
width: 25%;
box-sizing: border-box;
padding: 10px;
color: #2B84C6;
border-box;
text-align: center;

}


.radiofield input[type="radio"] {
    display:none;
}

.radiofield label {
    display:block;
    text-align: center;
    padding:4px 11px;
    font-size:16px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	 -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.radiofield input[type="radio"]:checked + label, .radiofield label:hover {
   background-color: #eee;
	border-radius: 10px;
	color: #000;
}



.formgen .radioblock  label {  font-size: 1em; margin-bottom: 1em; border-bottom: 2px solid #2B84C6;padding-bottom: 10px; }

.formgen .radiofield  label { float: left; font-size: 1.5em; border: none ;}

.formgen .textradio .radiofield label { font-size: 0.9em; text-align: center; border: 1px solid #eee; border-radius: 10px;} 


.formgen .formtext {
    border: 1px solid #eee;
    background-color: #fff;
    color: #000;
    height: 30px;
    padding: 0;
    width: 100%;
    margin-bottom: 15px;
    clear: both;
    font-size: 18px;
    font-weight: 300;
    -moz-box-shadow: inset 0 0 2px #666;
    -webkit-box-shadow: inset 0 0 2px #666;
    box-shadow: inset 0 0 2px #666;
}

.formgen .formselect {
    border: 1px solid #8694A1;
    background-color: #fff;
    color: #000;
    height: 30px;
    padding: 0;
    width: 100%;
    margin-bottom: 15px;
    clear: both;
    font-size: 18px;
    font-weight: 300;

}

.forminfo {
    color: #900;
    font-size: 1.2em;
    display: block;
    padding-bottom: 15px;
}

.formgen textarea {
    border: 1px solid #ccc;
    background-color: #fff;
    color: #000;
    width: 100%;
    margin-bottom: 20px;
    font-size: 18px;
    clear: both;


}

.formgen label {margin-right: 20px;
font-size: 1em;
margin-bottom: 0.5em;


clear: both;
display: block;
}

.formgen label.formerror {
    color: #900;

}

.formgen label span {
    color: #414550;
}

.formgen input[type="text"]:focus, .formgen input[type="text"]:hover, .formgen textarea:focus, .formgen textarea:hover, .formgen input[type="text"]:focus, .formgen input[type="text"]:hover, .formgen textarea:focus, .formgen textarea:hover {
    background-color: #FFF;
}

.formgen input[type="submit"] {
    border: none;
    padding: 8px;
    font-size: 1.2em;
    text-transform: uppercase;
    color: #FFF;
    margin-bottom: 10px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #000;
}

.formgen input[type="submit"]:hover {
    color: #000;
    background-color: #fff;
}




/*//////////////////////////////////////////////////////////////////////////////*
/* Ende der Formulardefinition */



Thomas Skerbis

Bild | KLXM Crossmedia / Werbeagentur in Moers | https://klxm.de

Tricks zu REDAXO
https://friendsofredaxo.github.io/tricks/

cyber-knut
Beiträge: 5
Registriert: 21. Jan 2016, 18:22

Re: do form! 5: Quellcode der Ausgabe auf responsive ändern?

8. Jun 2016, 09:53

Hi.

Danke für deine Stylesheets. Die haben mir schon weitergeholfen.
Ich denke, ich schlau mich dann noch in XForm ein, vielleicht gelingt es damit ein wenig einfacher.
Ist halt schon eine rechte Fummelei :roll:

Aber dennoch: tolles Modul!!

Benutzeravatar
Thomas.Skerbis
Beiträge: 1315
Registriert: 4. Aug 2006, 14:06
Wohnort: Rheinberg
Kontaktdaten: Website AOL

Re: do form! 5: Quellcode der Ausgabe auf responsive ändern?

8. Jun 2016, 11:23

Danke.
Das Modul ist halt historisch so gewachsen, damals gab es kein Bootstrap.
Mit dem CSS sollte es aber in einer Bootstrapumgebung klappen.
Thomas Skerbis

Bild | KLXM Crossmedia / Werbeagentur in Moers | https://klxm.de

Tricks zu REDAXO
https://friendsofredaxo.github.io/tricks/

Zurück zu „Module/Aktionen [R4]“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 4 Gäste