Group with 2 Columns - new group.php

s6930064

Member
Fabrik-fabrik-3.0.5-171-g6ee5213.zip
Form template = labels-above
Group with 2 Columns and 6 element (3 of them hidden)

In frontend first column element is like
<li style="float:left;width:44%;" class="fabrikElementContainer field fabrikDataEmpty">?..

And second column element is like
<li style="float:left;width:44%;clear:both;" class="fabrikElementContainer field fabrikDataEmpty">?.

Second column shouldn?t have ?clear:both?.
The problem is in group.php new code
 
If a replace line 217 in models/group.php with
$element->column .= "";

then thinks are better, except elements with dropdown...
 
Last update Fabrik-fabrik-3.0.5-234-gfb7f6cd.zip

Ok, but :

1. if you have set width 40%,40% in group you get 44%,40% in frontend
2. if you have a dropdown element, select tag has padding = 3px and the result is a big gap from element beneath
 
Here are some pictures for the second problem (dropdown / css)
 

Attachments

  • with_3px.png
    with_3px.png
    4.4 KB · Views: 261
  • no_3px.png
    no_3px.png
    4.6 KB · Views: 236
Are you sure that's to do with the 3px padding? We apply that to all 'input', 'select' and 'textarea' tags on all forms.

Can you point us at the page?

-- hugh
 
2. If I reorder elements from backend, and put first ?birth date? and second ?gender? then everything is ok. Maybe there is something wrong with date element?.

3. Also, elements go from left to right column if there is error message from validation
 
Again, I'd have to see your page to give you any kind of answer, as I'd need to inspect the CSS with Firebug to see what is causing it.

-- hugh
 
Sorry, it is intranet with no outside access...

CSS seems ok and if I add with firebug ?clear:both? to problematic elements

from
<li style="float:left;width:45%;" class="fabrikElementContainer dropdown">.....

to
<li style="float:left;width:45%;clear:both;" class="fabrikElementContainer dropdown">.....

it fixes the problem.
 
What is your Joomla template?
There are some threads about issues with date CSS with Gantry/RockTheme templates;
It seems fabrik and gantry are using .date class.
 
Fabrik-fabrik-3.0.5-234-gfb7f6cd.zip, labels above form template, chrome, firefox,IE

I took 2 print screens before save and after save. As you can see form does not save because there are error but ?Phone? field was moved to right from left and alter all fields after. If I add clear:both to phone field everything is good

Also I have set 45% for both columns in group but in frontend the width is 44%,45%
 

Attachments

  • 01-before-save.JPG
    01-before-save.JPG
    9.9 KB · Views: 213
  • 02-after-save.JPG
    02-after-save.JPG
    12.1 KB · Views: 209
  • 03-width.JPG
    03-width.JPG
    53.6 KB · Views: 211
There's really not much I can do without being able to access the page. I can't seem to replicate this here, and the "clear: both" thing you suggested causes issues elsewhere.

-- hugh
 
Some more clues :


If I use DEFAULT form template then
- elements alignment is OK
- validation error message is not showing!
- first column width is always 44% regardless my setting

If I use LABELS-ABOVE form template then
- I have the problem with elements alignment (post #13)
- validation error message is showing
- first column width is always 44% regardless my setting
 
as hugh said we dont see this on our sites, so without seeing an actual page where we can observe the css its impossible to help you
 
I think I found the problem. As you see in second image in post #13,

left element is ?Driver id? (text field) with validation error message (give a number) and right element dropdown ?Position? without validation error message

If ?Position? had error message everything would align correct, I try it and it worked

So if one column element have error message and element to the other column does not then you get mix elements??.. do you think it could be solved ?
 
You are right:
the labels-above template displays the error message as tooltip + text (and has -compared with the default template- some "tip" code missing).
Additionally the error image (small triangle) is shifting the input field one pixel.

Work around (until this is fixed):
in labels-above/default_group.php delete lines 21-24 (those displaying the error text below the input field)

Add
.fabrikErrorMessage .fabrikTip img {margin-top:-1px}
to custom_css.php

Column width: it seems nor default nor labels-above are respecting the first width setting (2nd is ok)
 
here is my test site : myadek.no-ip.org/test
you can access the form from top menu ?FABRIK-FORM?

Problems with LABELS-ABOVE form template :
- elements alignment when validation error message is showing (just click submit)
- first column width is always 44% regardless group setting
 
1) i fixed "first column width is always 44% regardless group setting" by changing file group.php, line 212 :
FROM
$w = JArrayHelper::getValue($widths, $elCount % $colcount +1 , $w);
TO
$w = JArrayHelper::getValue($widths, $elCount % $colcount , $w);


2) problem with elements alignment and validation in labels above tmpl remains.
 
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top