How to use Container element

Hi

I wonder if anyone can give me some information on how and what to use the container element.

I have searched the forums, but there seems to be very little information on it.

Thanks in advance.

Laurie

Hi Laurie,

It was new in the last release and hasn't been much commented on so far.

I wrote a reply here then converted it into this FAQ.

Bob

Bob

Thanks for that. Much appreciated.

Laurie

Hi Bob

Have had a read and a play with that. Can't seem to get anything to show. Have tried every type of container, and pulling something into it, but nothing. The collapse link just takes you to the top of the page. Could you expand a little on the physical way it is setup.

Regards
Laurie

Hi Laurie,

Hard to say from what you have written here. The Collapse/Expand link just collapses and expands the group inside the Preview box.

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

Hi Bob

There not much point in me send you the file, as there's not much to see.

I drag the container element over to the preview and then try to drag other elemt onto it, but they just end up under it. Nothing shows on the form when viewing on the site,and changing container to any type, makes no difference.

What I need is a bit of instruction about where to place things to get them in a container.
Is there no guide on how to use this element anywhere, or would Max be able to help with some info ?

Thanks Again

Laurie

Hi Laurie,

There really isn't anything else to say :-(

Which version of Joomla! and ChronoForms of you have and which browser are you testing in?

Bob

I made a quick rough and silent video:
[flash=640,360]http://www.youtube.com/v/ii3P6dUNzhI[/flash]

Hi Bob

Thanks for taking the time to do the video. Great idea, as it proved that what you show in the video is exactly what I am doing, but the result is different. Instead of the element ending up in the container it put it under the container.

I have tried this in IE V8, Chrome, and firefox. All the same result. Have not tried IE 9 as my CCTV requires IE V8.

Chrono forms 4.0 RC3.21 is installed. Did try the latest version but had all sorts of problems with it blank screening, so went back to the obove version.

Joomla version 2.5.4 installed.

Any ideas greatly appreciated.

Regards
Laurie

Hi Laurie,

The video was made in Chrome 20 with ChronoForms 4.0 RC3.4.1 on Joomla! 2.5.4; I also tested in FireFox 13.0.1

My guess is that there is something conflicting with the scripts in your ChronoForms installation that is giving the blank screens. I vaguely recall that Max fixed some bugs with the container code in the latest release so that may be the problem here.

Bob

Hi Bob

Thanks for that. Installed 4.0 RC3.4.1 again just to make sure. Same thing. When I click wizard edit, just blank screen with HTTP 500 error. Nothing showing in server error logs neither, so baffled as to where to go next.

Just to add to this no sef enabled on this yet. Also with 3.21 version clicking wizard edit generates this url http://domainname.co.uk/administrator/index.php?option=com_chronoforms&task=form_wizard&form_id=2

With 3.4.1 generates this url http://domainname.co.uk/administrator/index.php?option=com_chronoforms&task=form_wizard&form_id=2&formname=Registration_Form

3.21 works but container doesn't. 3.4.1 produces http 500 error.

Regards
Laurie

Hi Bob

Thanks for your help with this. Eventualy got an error log, and thought I would post this in case it is usefull for others. Fault turned out to be caused by the admin forever plugin. problem on line 96 of admin8.php. Disabled and all working fine now. Also containers is working great now on the latest version.

Thanks Again.

Laurie

Hi Laurie,

Thanks for this.

It looks as though the plug-in adds its script by doing a search and replace on the </body> tag. Some of the ChronoForms actions include </body> in the action code and some of these may get 'replaced' and break the code.

Bob

It is supposed to works even on Joomla 1.5 ? I replicated the video example but :

Tab are not shown (only title), and slider work in some way but with no graphic (compared to the one shown in the video), it seems that CSS is missing or so, only my guess...

Michele

Hi Michele,

The CSS comes from the template in Jooma 2.5 but isn't included in the default template in Joomla! 1.5. If you add a Load CSS action to the On Load event and paste in some CSS like this it should be OK.

dl.tabs {
    clear: both;
    float: left;
    margin: 50px 0 0;
    z-index: 50;
}
dl.tabs dt {
    background: none repeat scroll 0 0 #F0F0F0;
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
    color: #666666;
    float: left;
    margin-right: 3px;
    padding: 4px 10px;
}
dl.tabs dt.open {
    background: none repeat scroll 0 0 #F9F9F9;
    border-bottom: 1px solid #F9F9F9;
    color: #000000;
    z-index: 100;
}
div.current {
    border: 1px solid #CCCCCC;
    clear: both;
    padding: 10px;
}
div.current dd {
    margin: 0;
    padding: 0;
}
dl#content-pane.tabs {
    margin: 1px 0 0;
}

Bob

Hi Bob,

thanks for your fast reply, yeah tab now work, slide don't, did you include the css tab part only ?
btw, tested on 2.5.6 and there works with no css need as you stated.

Michele

Hi Michele,

Yes I just copied the tabs part from the layout.css file in the Beez template. I expect the panes are in the same file.

Bob

Hi Bob,

I love container functionality but I have a problem in re-arranging previous built form into TABS container.
Unfortunately I can't drag already made field into new container, as well as I can't make a 'copy' of and old field and 'paste' into the new made container.

Is there any workarond to re-organize a complex form into container wihout re-write all fields from the scratch ?

Michele

Hi Michele,

I think that you can use the Pane Start and Pane End (or Panel Start and Panel End) elements from the Advanced group to break an existing from into container-like sections. I never really used these so don't have any detailed knowledge.

Otherwise it's a copy and paste job to re-create the Preview Window part of the form. You can copy the existing from, empty the Preview Window by deleting all the elements that need to go into Containers and then re-create them. I've done this using two browser windows so that I can copy and paste the old element settings into new elements. Tedious but not too bad.

Bob

Hello everyone,

I'm using Joomla 3.1.1 and Chronoform v4 and I have a problem with tabs. I've included the css code above in my template and tabs appear normal but they do not work.
The entire content is displayed in one tab, when I click to another nothing happen. Did someone might have had experience, I suspect that the problem is in JavaScript but do not know exactly what.
Mouseover one of the tabs shows javascript:void(0);

Thanks.

I had the same problem and gave up on the panels as they did not work.... I ended up using bootstrap panel toggle

Hi,

I'm afraid that the problem here is that the Joomla! Tabs and Sliders code changed in Joomla! 3 and it's a bug in CFv4 that Max hasn't yet caught up with that difference :-(

Bob

The bootstrap works rather well (if javascript is enabled)

I use the following code:

Pane start container
<?php echo JHtml::_('bootstrap.startTabSet', 'ID-Tabs-Group', $this->tabsOptions);?>

Panel Start container
<?php echo JHtml::_('bootstrap.addTab', 'ID-Tabs-Group', 'tab1_id', JText::_('First tab')); ?>
<p>

Panel end container
</p>
<?php echo JHtml::_('bootstrap.endTab');?>

Pane end container
<?php echo JHtml::_('bootstrap.endTabSet');?>


The only problem I have is to open the first tab when the form is loaded. It should be in the options but I can't find the syntax.

Rob

Hi,

Just for the record I think that the ChronoForms Panels bug is fixed in the latest releases.

Bob

The latest version supports panels in Joomla 3.0xx, not in 3.1xx
It seems that panels support will be discontinued, starting with Joomla 4.

If I put this code above the Pane start code now it opens the first tab when the form is loaded:
<?php
$this->tabsOptionsJ31 = array("active" => "tab1_id");
?>

Unfortunately these tabs only work when javascript is enabled, it not nothing is displayed.

I would like to add some code to skip the start code when javascript is disabled.
Start code: <?php echo JHtml::_('bootstrap.startTabSet', 'ID-Tabs-J31-Group', $this->tabsOptionsJ31);?>

Rob

Rob

Hi Rob,

Sliders are still working on Joomla! 3.1.5 see my test form here

This is using ChronoForms containers with the Sliders Area and Sliders types.

Bob

Hi Bob,

The container Tabs are also still working.
The Pane and Panels elements not.

I found this link about tabs and sliders:
http://itprism.com/blog/106-bootstrap-tabs-accordion-slides

The problem with Bootstraps is that is does not work without Javascript (blank page)

Rob

Hi Rob,

Sorry, I misunderstood. The Panes/Panels code was indeed removed in Joomla! 3 and replaced with the Sliders/Tabs code.

I don't think that any of these (the Joomla! implementation or the BootStrap one) will work without JavaScript - but usually sliders fail more elegantly than tabs :-)

Bob