radio buttons behavior under the tabs template

[lcollong]

Hi,

I'm getting in trouble with the tabs template in the form view. For the details view it works very well and it's easy to customize with custom.css.

I'm using radio buttons as a regular simple element as well as a DBJoin element one.

See screenshots : Using the "default" form template, the result is as expected (number of rows) but using the tabs one, all the "radio items" are each one over the previous whatever I put on the "options per row" field.

Using Firebug shows that the element width is correctly computed (23% for 4 options per rows, 48% for 2 options per rows) but it doesn't care of it.

I can't get rid of that using custom.css

Any suggestions ?

 

[rob]

I set my test form to use the tabs template and the radio buttons were laid out ok, what's the url of the form?

 

[lcollong]

I've filled in the Fabrik Sites part under my username. The group showing the problem is "informations techniques".

 

[rob]

Thanks for the site details.
I've taken a look and for me the issue seemed only to be with database join elements rendered as radio buttons?
I've updated github with a fix for the tabs template for this issue.

Could you update and test please?

thx
Rob

 

[lcollong]

Does not change. I made some experiments based on your change. As you can see in the screenshot, the class used for the sub element is .fabrikSubElementContainer > div not the .fabrikSubElementContainer.databasejoin > div although it is a databasejoin rendering. If I apply the "clear : none" to the first class : it works !

At least partially as I still don't know why the field is displayed far under the label rather than inline the label. This happens only in the form view. Not in details view. Also, I've noticed that if I set "AJAX validation on", those fields which have validation plugins set will be inlined after the validation !

You can test that in the "Informations administratives" group for the "courriel" element. The value is displayed under the label at form load but if you change something in the value and tab on the next, the AJAX Validation script is fired and the value go back to the right place....

 

[rob]

just under that css highlighted in the screenshot though I had added:

/** But dbjoin as radios etc can be floated **/
.fabrikSubElementContainer.databasejoin > div {
    clear: none;
}

which should override what you were seeing. Do you see that in template_css.php around line 84?

 

[lcollong]

Yes indeed, starting on line 84. As per my explanations on the previous post. It seems that the class is not "databasejoin" even if is one... Am I wrong ?