Forums

Hi there!

I created a for in which I have build tabs.
In 1 of this tabs user has to make a choice with radio buttons.

Having about 18 choices I want to order this radio buttons in rows and columns to have.

Here you can see how it looks like:


I cutomized the code! I changed the labels of the options into <img src="......" .../>
It functions well. But the ordering on screen is awful.

So the question is how do I manage it to have the options in rows and columns? Or just in rows would be pretty nice too.

Thank you in advance for your help.
Best regards
Michael

Solved myself.

I used a simple "Table"!

Thank you

Hi there!

Unfortunatelly I thought I solved...

How it looks like is ok.....
But the functionality is something wrong. The content of the fellowing TABS's to the mentioned one are shown under the "radio-box"-Table....

Here ist the mentioned site:

http://maksy-clean.de/index.php?option=com_chronoforms5&chronoform=Anfrage-Dachreinigung

Need your help... I do not know where I made the mistake nor what to change to get the result I want to have...

Thank you in advance.
Best regards
Michael

Hi MIchael,

What exactly is the problem?

Bob

The problem is,

"Fotos hinzufügen" (=Add photos) should be shown when you click on the Tab "Objektfotos" only.

But once when you click on the Tab "Objektfotos" is "fotos hinzufügen" shown under the content of the last Tab which was clicked. Even when you click to "objektfotos" again nothing is changed!
You should try yourself on the above site (click on the link).

So I do not know where the mistake I made.

Thank you.

Same with "Senden"-Tab!!!

This is the code of the form I have changed:

<div class="chronoform-container" id="gesant-formular">					
  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#tab-kontaktperson" data-g-toggle="tab">Kontaktperson</a>
    </li>
    <li>
    <a href="#tab-kontaktdaten" data-g-toggle="tab">Kontaktdaten</a>
    </li>
    <li>
    <a href="#tab-objektdaten" data-g-toggle="tab">Objektdaten</a>
    </li>
    <li>
    <a href="#chronoform-container-39" data-g-toggle="tab">Dachform</a>
    </li>
    <li>
    <a href="#tab-objektfotos" data-g-toggle="tab">Objektfotos</a>
    </li>
    <li>
    <a href="#tab-senden" data-g-toggle="tab">Senden</a>
    </li>
  </ul>					
  <div class="tab-content">
    <div id="tab-kontaktperson" class="tab-pane active">
      <div class="form-group gcore-form-row" id="form-row-wganrede">
        <label for="wganrede" class="control-label gcore-label-left">Anrede
        </label>
        <div class="gcore-input gcore-display-table" id="fin-wganrede">
          <select name="Anrede" id="wganrede" size="" class="form-control A" title="" style="" data-load-state="" data-tooltip="">
            <option value="Firma">Firma
            </option>
            <option value="Frau">Frau
            </option>
            <option value="Herr">Herr
            </option>
          </select>
        </div>
      </div>
      <div class="form-group gcore-form-row" id="form-row-firma">
        <label for="firma" class="control-label gcore-label-left">Firma
        </label>
        <div class="gcore-input gcore-display-table" id="fin-firma">
          <input name="Firma" id="firma" value="" placeholder="" class="validate['required'] form-control A" title="" style="" data-inputmask="" data-load-state="hidden_parent" data-tooltip="" type="text" />
        </div>
      </div>
      <div class="form-group gcore-form-row" id="form-row-multi-20">
        <div class="gcore-subinput-container" id="fitem-vorname">
          <label for="vorname" class="control-label gcore-label-left">Vorname Nachname
          </label>
          <div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-vorname">
            <input name="Vorname" id="vorname" value="" placeholder="" class="validate['required'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
            <span class="help-block">Vorname
            </span>
          </div>
        </div>
        <div class="gcore-subinput-container" id="fitem-nachname">
          <div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-nachname">
            <input name="Nachname" id="nachname" value="" placeholder="" class="validate['required'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
            <span class="help-block">Nachname
            </span>
          </div>
        </div>
      </div>
    </div>
    <div id="tab-kontaktdaten" class="tab-pane">
      <div class="form-group gcore-form-row" id="form-row-multi-23">
        <div class="gcore-subinput-container" id="fitem-strasse">
          <label for="strasse" class="control-label gcore-label-left">Strasse, Hs.Nr.
          </label>
          <div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-strasse">
            <input name="Strasse" id="strasse" value="" placeholder="" class="validate['required'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
            <span class="help-block">Strasse
            </span>
          </div>
        </div>
        <div class="gcore-subinput-container" id="fitem-hausnummer">
          <div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-hausnummer">
            <input name="Hausnummer" id="hausnummer" value="" placeholder="" maxlength="10" size="10" class="validate['required'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
            <span class="help-block">Hs.Nr,
            </span>
          </div>
        </div>
      </div>
      <div class="form-group gcore-form-row" id="form-row-multi-25">
        <div class="gcore-subinput-container" id="fitem-postleitzahl">
          <label for="postleitzahl" class="control-label gcore-label-left">PLZ, Ort
          </label>
          <div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-postleitzahl">
            <input name="Postleitzahl" id="postleitzahl" value="" placeholder="" maxlength="10" size="10" class="validate['required'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
            <span class="help-block">PLZ
            </span>
          </div>
        </div>
        <div class="gcore-subinput-container" id="fitem-ort">
          <div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-ort">
            <input name="Ort" id="ort" value="" placeholder="" class="validate['required'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
            <span class="help-block">Ort
            </span>
          </div>
        </div>
      </div>
      <div class="form-group gcore-form-row" id="form-row-multi-27">
        <div class="gcore-subinput-container" id="fitem-telefonnummer">
          <label for="telefonnummer" class="control-label gcore-label-left">Telefon-, Mobilnummer, Email
          </label>
          <div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-telefonnummer">
            <input name="Telefonnummer" id="telefonnummer" value="" placeholder="" class="validate['required','phone'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
            <span class="help-block">Telefonnummer
            </span>
          </div>
        </div>
        <div class="gcore-subinput-container" id="fitem-mobil">
          <div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-mobil">
            <input name="Mobil" id="mobil" value="" placeholder="" class="validate['phone'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
            <span class="help-block">Mobilnummer
            </span>
          </div>
        </div>
        <div class="gcore-subinput-container" id="fitem-email">
          <div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-email">
            <input name="Email" id="email" value="" placeholder="" class="validate['email'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
            <span class="help-block">Email
            </span>
          </div>
        </div>
      </div>
    </div>
    <div id="tab-objektdaten" class="tab-pane">
      <div class="form-group gcore-form-row" id="form-row-objekt">
        <label for="objekt" class="control-label gcore-label-left">Objektanschrift
        </label>
        <div class="gcore-input gcore-display-table" id="fin-objekt">
          <input name="Objekt" id="objekt" value="" placeholder="" size="80" class="validate['required'] form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
        </div>
      </div>
      <div class="form-group gcore-form-row" id="form-row-hoehe">
        <label for="hoehe" class="control-label gcore-label-left">Max Höhe
        </label>
        <div class="gcore-input gcore-display-table" id="fin-hoehe">
          <input name="Hoehe" id="hoehe" value="" placeholder="" class="form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
        </div>
      </div>
      <div class="form-group gcore-form-row" id="form-row-breite">
        <label for="breite" class="control-label gcore-label-left">Breit
        </label>
        <div class="gcore-input gcore-display-table" id="fin-breite">
          <input name="Breite" id="breite" value="" placeholder="" class="form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
        </div>
      </div>
      <div class="form-group gcore-form-row" id="form-row-laenge">
        <label for="laenge" class="control-label gcore-label-left">Länge
        </label>
        <div class="gcore-input gcore-display-table" id="fin-laenge">
          <input name="Laenge" id="laenge" value="" placeholder="" class="form-control A" title="" style="" data-inputmask="" data-load-state="" data-tooltip="Länge" type="text" />
        </div>
      </div>
    </div>
    <div id="chronoform-container-39" class="tab-pane">
      <div class="form-group gcore-form-row" id="form-row-dachform">
        <label for="dachform" class="control-label gcore-label-top gcore-label-checkbox">Dachart wählen
        </label>
        <div class="gcore-input-wide gcore-display-table" id="fin-dachform">
          <div class="gcore-multiple-column" id="fclmn">
<table style="height: 82px; width: 413px;">	                              
              <tbody>		                                  
                <tr>			                 <td>                                         
                    <div class="gcore-radio-item" id="fitem">                                             
                      <input name="Dachform" id="dachform" value="0" class="validate['group:40'] A" title="" style="" data-load-state="" data-tooltip="" type="radio" /></td>			<td>                                         
                    <label class="control-label gcore-label-checkbox" for="dachform">                                             
                      <img src="images/dachreinigung/Doppelgaube.png" alt="Doppelgaube" title="Doppelgaube"/>                                         
                    </label>                     
          </div>          </td>			           <td>                         
            <div class="gcore-radio-item" id="fitem1">                             
              <input name="Dachform" id="dachform1" value="1" class="validate['group:40'] A" title="Fledermausgaube" style="" data-load-state="" data-tooltip="" type="radio" /></td>			<td>                         
            <label class="control-label gcore-label-checkbox" for="dachform1">                             
              <img src="images/dachreinigung/Fledermausgaube.png" alt="Fledermausgaube" title="Fledermausgaube"/>                         
            </label>                 
        </div>        </td>        <td>                     
          <div class="gcore-radio-item" id="fitem2">                         
            <input name="Dachform" id="dachform2" value="2" class="validate['group:40'] A" title="" style="" data-load-state="" data-tooltip="" type="radio" /></td>			<td>                     
          <label class="control-label gcore-label-checkbox" for="dachform2">                         
            <img src="images/dachreinigung/Fusswalmdach.png" alt="Fusswalmdach" title="Fusswalmdach"/>                     
          </label>             
      </div></td>			<td>                 
        <div class="gcore-radio-item" id="fitem3">                     
          <input name="Dachform" id="dachform3" value="3" class="validate['group:40'] A" title="" style="" data-load-state="" data-tooltip="" type="radio" /></td>			<td>                 
        <label class="control-label gcore-label-checkbox" for="dachform3">                     
          <img src="images/dachreinigung/Graben_und_Kreuzdach.png" alt="Graben_und_Kreuzdach" title="Graben- und Kreuzdach"/>                 
        </label>         
    </div></td>			<td>             
      <div class="gcore-radio-item" id="fitem4">                 
        <input name="Dachform" id="dachform4" value="4" class="validate['group:40'] A" title="" style="" data-load-state="" data-tooltip="" type="radio" /></td>			<td>             
      <label class="control-label gcore-label-checkbox" for="dachform4">                 
        <img src="images/dachreinigung/Grabendach.png" alt="Grabendach" title="Grabendach"/>             
      </label>     
  </div></td>			<td>         
    <div class="gcore-radio-item" id="fitem5">             
      <input name="Dachform" id="dachform5" value="5" class="validate['group:40'] A" title="" style="" data-load-state="" data-tooltip="" type="radio" /></td>			<td>         
    <label class="control-label gcore-label-checkbox" for="dachform5">             
      <img src="images/dachreinigung/Hechtgaube.png" alt="Hechtgaube" title="Hechtgaube"/>         
    </label>
</div></td>		  
</tr>		  
<tr>			<td>         
    <div class="gcore-radio-item" id="fitem6">             
      <input name="Dachform" id="dachform6" value="6" class="validate['group:40'] A" title="" style="" data-load-state="" data-tooltip="" type="radio" /></td>			<td>         
    <label class="control-label gcore-label-checkbox" for="dachform6">             
      <img src="images/dachreinigung/Krueppelwalmdach.png" alt="Krüppelwalmdach" title="Krüppelwalmdach"/>         
    </label>         
    </div></td>			<td>         
    <div class="gcore-radio-item" id="fitem7">             
      <input name="Dachform" id="dachform7" value="7" class="validate['group:40'] A" title="" style="" data-load-state="" data-tooltip="" type="radio" /></td>			<td>         
    <label class="control-label gcore-label-checkbox" for="dachform7">             
      <img src="images/dachreinigung/Mansarddach.png" alt="Mansarddach" title="Mansarddach"/>         
    </label>         
    </div></td>			<td>         
    <div class="gcore-radio-item" id="fitem8">             
      <input name="Dachform" id="dachform8" value="8" class="validate['group:40'] A" title="" style="" data-load-state="" data-tooltip="" type="radio" /></td>			<td>         
    <label class="control-label gcore-label-checkbox" for="dachform8">             
      <img src="images/dachreinigung/Mansardendach_mit_Schopf.png" alt="Mansardendach_mit_Schopf" title="Mansardendach mit Schopf"/>         
    </label>         
    </div></td>			<td>         
    <div class="gcore-radio-item" id="fitem9">             
      <input name="Dachform" id="dachform9" value="9" class="validate['group:40'] A" title="" style="" data-load-state="" data-tooltip="" type="radio" /></td>			<td>         
    <label class="control-label gcore-label-checkbox" for="dachform9">             
      <img src="images/dachreinigung/Mansardenwalmdach.png" alt="Mansardenwalmdach" title="Mansardenwalmdach"/>         
    </label>         
    </div></td>			<td>         
    <div class="gcore-radio-item" id="fitem10">             
      <input name="Dachform" id="dachform10" value="10" class="validate['group:40'] A" title="" style="" data-load-state="" data-tooltip="" type="radio" /></td>			<td>         
    <label class="control-label gcore-label-checkbox" for="dachform10">             
      <img src="images/dachreinigung/Paralleldach.png" alt="Paralleldach" title="Paralleldach"/>         
    </label>         
    </div></td>			<td>         
    <div class="gcore-radio-item" id="fitem11">             
      <input name="Dachform" id="dachform11" value="11" class="validate['group:40'] A" title="" style="" data-load-state="" data-tooltip="" type="radio" /></td>			<td>         
    <label class="control-label gcore-label-checkbox" for="dachform11">             
      <img src="images/dachreinigung/Pultdach.png" alt="Pultdach" title="Pultdach"/>         
    </label>         
    </div></td>		  
</tr>		  
<tr>			<td>         
    <div class="gcore-radio-item" id="fitem12">             
      <input name="Dachform" id="dachform12" value="12" class="validate['group:40'] A" title="" style="" data-load-state="" data-tooltip="" type="radio" /></td>			<td>         
    <label class="control-label gcore-label-checkbox" for="dachform12">             
      <img src="images/dachreinigung/Satteldach.png" alt="Satteldach" title="Satteldach"/>         
    </label>         
    </div></td>			<td>         
    <div class="gcore-radio-item" id="fitem13">             
      <input name="Dachform" id="dachform13" value="13" class="validate['group:40'] A" title="" style="" data-load-state="" data-tooltip="" type="radio" /></td>			<td>         
    <label class="control-label gcore-label-checkbox" for="dachform13">             
      <img src="images/dachreinigung/Schleppdach.png" alt="Schleppdach" title="Schleppdach"/>         
    </label>         
    </div></td>			<td>         
    <div class="gcore-radio-item" id="fitem14">             
      <input name="Dachform" id="dachform14" value="14" class="validate['group:40'] A" title="" style="" data-load-state="" data-tooltip="" type="radio" /></td>			<td>         
    <label class="control-label gcore-label-checkbox" for="dachform14">             
      <img src="images/dachreinigung/Schleppgaube.png" alt="Schleppgaube" title="Schleppgaube"/>         
    </label>         
    </div>
    </td>			
    <td>         
    <div class="gcore-radio-item" id="fitem15">             
      <input name="Dachform" id="dachform15" value="15" class="validate['group:40'] A" title="" style="" data-load-state="" data-tooltip="" type="radio" />
      </td>			
      <td>         
    <label class="control-label gcore-label-checkbox" for="dachform15">             
      <img src="images/dachreinigung/Sheddach.png" alt="Sheddach" title="Sheddach"/>         
    </label>         
    </div>
    </td>
    <td>         
    <div class="gcore-radio-item" id="fitem16">             
      <input name="Dachform" id="dachform16" value="16" class="validate['group:40'] A" title="" style="" data-load-state="" data-tooltip="" type="radio" /></td>			<td>         
    <label class="control-label gcore-label-checkbox" for="dachform16">             
      <img src="images/dachreinigung/Walmdach.png" alt="Walmdach" title="Walmdach"/>         
    </label>         
    </div></td>			<td>         
    <div class="gcore-radio-item" id="fitem17">             
      <input name="Dachform" id="dachform17" value="17" class="validate['group:40'] A" title="" style="" data-load-state="" data-tooltip="" type="radio" /></td>			<td>         
    <label class="control-label gcore-label-checkbox" for="dachform17">             
      <img src="images/dachreinigung/Zwerchdach.png" alt="Zwerchdach" title="Zwerchdach"/>         
    </label>         
    </div>         
    </div>         
    </div>         
    </div>         
    </div></td>		  
</tr>	  
</tbody>
</table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="tab-objektfotos" class="tab-pane">
      <div class="chronoform-container multiplier-container" id="fotos" data-hide_first="1" data-disable_first="1" data-replacer="__N__" data-count="1">
        <?php ob_start(); ?>
        <div class="chronoform-container multiplier-contents" id="upload-form">
          <div class="form-group gcore-form-row" id="form-row-multi-15">
            <div class="gcore-subinput-container" id="fitem-foto-__N__">
              <label for="foto-__N__" class="control-label gcore-label-left">Foto # __N__ (nur jpg, png oder gif Datei)
              </label>
              <div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-foto-__N__">
                <input name="foto[__N__]" id="foto-__N__" class="form-control gcore-height-auto A" title="" style="" multiple="0" data-load-state="" data-tooltip="" type="file" />
              </div>
            </div>
            <div class="gcore-subinput-container" id="fitem18">
              <div class="gcore-input pull-left gcore-sub-input gcore-display-table" id="fin-custom">
                <span class="btn btn-danger btn-xs multiplier-remove-button" style="display:none;">
                  <i class="fa fa-times fa-lg"></i>
                </span>
              </div>
            </div>
          </div>					 					
        </div>
        <div class="form-group gcore-form-row" id="form-row-custom1">
          <label for="custom1" class="control-label gcore-label-left">Foto hinzufügen
          </label>
          <div class="gcore-input gcore-display-table" id="fin-custom1">
            <span class="btn btn-success btn-sm multiplier-add-button">
              <i class="fa fa-plus fa-lg"></i>
            </span>
          </div>
        </div>
        <?php $multiplier_code = ob_get_clean(); ?>
        <?php echo $multiplier_code; ?>					 					
      </div>
    </div>
    <div id="tab-senden" class="tab-pane">
      <div class="form-group gcore-form-row" id="form-row-recaptcha">
        <div class="gcore-input gcore-display-table" id="fin-recaptcha">{ReCaptcha}
        </div>
      </div>
      <div class="form-group gcore-form-row" id="form-row-button34">
        <div class="gcore-input gcore-display-table" id="fin-button34">
          <input name="button34" id="button34" type="submit" value="Submit" class="btn btn-default form-control A" style="" data-load-state="" />
        </div>
      </div>
    </div>
  </div>
</div>