Multi Field Row in Tabbed Region

Hi,
I created a form with two tabs, with Grey's article http://www.chronoengine.com/faqs/2660-how-can-i-build-a-tabbed-form.html

However, thee tabs were not coming properly so I used another article http://www.chronoengine.com/faqs/2577-my-form-tabs-dont-work-or-look-as-expected.html
to inclue CSS.
However, I am trying to create multiple fields in single row and there the problem comes. In case of tabbed regions, the fields are not coming in single row, but one in each line.
When I check "Start a multi field row" or " Add to a multi field row" boxes, the layout is lost.
Any thought?

Abdul Wahid

The layout is lost means one tab appears at some other place and other on some other place etc.

Hi Adbul,

Please post a link to the form so I can take a quick look.

Bob

Thanks Bob,
Its still on my local development instance.
I am attaching the screen shot and here is the code for the form
-----------------------------------------

<h2>Tabbed form demo</h2>
<div id='cf_tabbed_form' style='width:400px;' >
<div class="ccms_form_element">
							<?php
								jimport("joomla.html.pane");
								$pane =& JPane::getInstance("tabs");
								echo $pane->startPane("cf_container_12");
							?>

<?php if(isset($pane)){echo $pane->startPanel("Technical Skills", "cf_container_13");} ?>
<div class="ccms_form_element cfdiv_checkbox" id="input_checkbox_191_container_div" style=""><input type="hidden" name="input_checkbox_19" value="" alt="ghost" />
<input value="1" title="" type="checkbox" name="input_checkbox_19" id="input_checkbox_19" class="label_left" />
<label for="input_checkbox_19">Label Text</label><div class="clear"></div><div id="error-message-input_checkbox_19"></div></div><div class="ccms_form_element cfdiv_file" id="input_file_261_container_div" style=""><label>Label Text</label><input type="hidden" name="input_file_26" value="" alt="ghost" />
<input class="" title="" type="file" name="input_file_26" />
<div class="clear"></div><div id="error-message-input_file_26"></div></div>
<?php if(isset($pane)){echo $pane->endPanel();} ?>

<?php if(isset($pane)){echo $pane->startPanel("Functional Skills", "cf_container_15");} ?>
<div class="ccms_form_element cfdiv_select" id="input_select_301_container_div" style=""><label>Label Text</label><select size="1" class="" title="" name="input_select_30">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
<div class="clear"></div><div id="error-message-input_select_30"></div></div><div class="ccms_form_element cfdiv_select" id="input_select_331_container_div" style=""><label>Label Text</label><select size="1" class="" title="" name="input_select_33">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
<div class="clear"></div><div id="error-message-input_select_33"></div></div>
<?php if(isset($pane)){echo $pane->endPanel();} ?>

<?php if(isset($pane)){echo $pane->endPane();} ?>
							<div class="clear"></div>
						</div>
</div>
<div class='cf_clear' ></div>

Bob,
In above post, I have posted code when I haven't set the multifiled row settings.
Below is the code when I enable multifield row settings and resultant screen shot.

<h2>Tabbed form demo</h2>
<div id='cf_tabbed_form' style='width:400px;' >
<div class="ccms_form_element">
							<?php
								jimport("joomla.html.pane");
								$pane =& JPane::getInstance("tabs");
								echo $pane->startPane("cf_container_12");
							?>

<?php if(isset($pane)){echo $pane->startPanel("Technical Skills", "cf_container_13");} ?>
<div class="ccms_form_element cfdiv_checkbox multiline_start" id="input_checkbox_191_container_div" style=""><input type="hidden" name="input_checkbox_19" value="" alt="ghost" />
<input value="1" title="" type="checkbox" name="input_checkbox_19" id="input_checkbox_19" class="label_left" />
<label for="input_checkbox_19">Label Text</label><div class="clear"></div><div id="error-message-input_checkbox_19"></div></div><div class="ccms_form_element cfdiv_file multiline_add" id="input_file_261_container_div" style=""><label>Label Text</label><input type="hidden" name="input_file_26" value="" alt="ghost" />
<input class="" title="" type="file" name="input_file_26" />
<div class="clear"></div><div id="error-message-input_file_26"></div></div>
<?php if(isset($pane)){echo $pane->endPanel();} ?>

<?php if(isset($pane)){echo $pane->startPanel("Functional Skills", "cf_container_15");} ?>
<div class="ccms_form_element cfdiv_select multiline_start" id="input_select_301_container_div" style=""><label>Label Text</label><select size="1" class="" title="" name="input_select_30">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
<div class="clear"></div><div id="error-message-input_select_30"></div></div><div class="ccms_form_element cfdiv_select multiline_add" id="input_select_331_container_div" style=""><label>Label Text</label><select size="1" class="" title="" name="input_select_33">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
<div class="clear"></div><div id="error-message-input_select_33"></div></div>
<?php if(isset($pane)){echo $pane->endPanel();} ?>

<?php if(isset($pane)){echo $pane->endPane();} ?>
							<div class="clear"></div>
						</div>
</div>
<div class='cf_clear' ></div>

Hi Abdul,

Thanks for the code but as you can see the only difference is the extra multiline classes.

The problem is probably due to the 'clear' entries in the multiline CSS but I can't see that from here.

Please take a Form Backup using the icon in the Forms Manager and post it here (as a zipped file) or PM or email it to me and I'll take a closer look.

Bob

Thank you log Grey,

Here is attached the form backup.

Abdul Wahid

Hi Adbul,

ChronoForm isn't recognising the end of the MultiLine when it is the last item in the Container. Here's a workaround: Drag a Custom Element element into the each Tab container, open it, click the Pure Code checkbox and put <div></div> into the Code box.

In your form you also need to add Custom Element element at the end with the code </div> to close the div you opened with the Custom Element element at the beginning.

Lastly you need to make sure that there is space for the Multiline elements to fit on one line. In the image below I've used the 'Label Over' setting on the element 'Other' tab.

With these three changes the form looks better.

Bob

Thanks Grey,
I tried, but couldn't get it in one line.
Also, I am weak in deeper html coding.
How can I register this as a bug (multi field row in tabs not aligned) and attempt to get a readymade fix?
Abdul Wahid

Hi Abdul,

There isn't really a bug here. Maybe a small one that the line isn't ended automatically if it's the last item in the tab. But your problem is mostly adjusting the field layout to fit the space you have available and that is down to you as the form designer :-(

Send me a link when you get this form on-line and I'll take a look.

Bob

GreyHead,

hopefully you still monitor this thread. I was having exactly the same problem and using "label over" definitely helped put both fields on one line. However, I am still having the problem where the both controls are rendered outside of the tab (clearly seen on the screenshot above). Just like you suggested, I added "Custom Element" elements with

<div></div>

as the last element in each tab but I am not sure whether I am adding last terminating

</div>

in the right place. You said

In your form you also need to add Custom Element element at the end

. Would that be the last element in the form or before the Custom Element with

</div>
<div class='cf_clear' ></div>

or the last element in the "Tabs Area" container? I tried putting it in a few different places without any luck. Any suggestions for me?

Thank you!

Hi TheGr8,

Thanks for that info - very helpful.

Bob

Hi TheGr8,

Thanks for that info - works like a charm here.
Bob I think you can mark this post as a SOLVED