Form fields not displayed correct in IE

[mattsh]

Hi!

I have been struggling to make the Default (bluesky, default, default_rounded or mint) form layout to look fine in IE (7 to 10).

For IE browsers, the input fields are always placed below the labels . For FF and Chrome it looks fine.



It would be great if labels and the input fields could line up in a row even for IE browsers.

Thanks!

Matt

J2.5.14 and latest Fabrik from Github

 

[troester]

Enable "use flexie" in Fabrik Options/JavaScript.

if you are experiencing slow page load turn this option off

In this case you must create a custom template (or custom CSS) not using display: xxx-box but things like float:left etc.

 

[mattsh]

I have tested "use flexie", disabled and enabled, but no difference.

I could make a custom template, but is it not better Fabrik make a official version that looks ok with IE. I have tested the forms on 3 different web hosts and with 5 differnt Joomla templates, and always with the same result. So it can't be just me having this problem.

 

[troester]

Flexie is working on my sites with IE7/8/9/10.
Did you clear Joomla cache?
Do you have some 3rd party extensions doing JS and/or HTML compression?
Are you using a non-standard Joomla template which may break IE display?

 

[mattsh]

I have flexie enabled and cache is cleard.
Have changed to a default Joomla template .
All plug ins and modules the site don't need to run is unpublished.
Still the same problem.
http://www.ucr.uu.se/test2/index.php/fabrik-form

 

[troester]

div id="wrapper2" class="shownocolumns">
and
.shownocolumns {
width: 98% !important;
}
<div class="fabrikElement" style="width: 808px; height: 45px; float: left;" data-flexie-id="4" data-ordinal-group="1" data-flex="1" data-specificity="110">

I assume this inline width is to large for IE (computed from 100% ?? or just one "rounded" pixel to much?),
so there's not enough space for leftCol + element in one line

Try adding
.shownocolumns {
width: 100% !important;
}
to custom CSS.
I assume nobody has used Joomla template with "nocolumns" until now.

 

[mattsh]

Thanks!

The css code works fine, but not with my JoomlArt template.
After testing with IE developer tool, I have found out that if I change .fabrikElement to "float:none;" the input field lines up nice. But I havn't manage to add the code to the right place or in the right way.

 

[troester]

It seems to be just one pixel.
Try with custom css
#form_$c fieldset.fabrikGroup {width:auto}

 

[mattsh]

Thanks!

Sorry, but it seems like my test site have a mixed installation of Fabrik versions (3.0 and 3.1).
I tested to use the suggest changes to another F 3.0 site, but the they don't work.

I'm bit busy at the moment, but I will have a "clean" site up running rather soon.

 

[blue-mouse]

Hi, i tested my forms under win7+IE11 (newest IE) and i have also problem that labels are "above" values.

My templates are made from default template and they are: "labels from left and values from right".

I have my forms OK under:
--- FF (older and nevest version)
--- Opera - only under nevest 17.x.... version
--- IE11/Win7 - forms have 1 problem with this that labels are displayed above

IE8,9,10 - there are more problems with displaying forms.

I would now to get in IE11/win7 - display "labels from left" and "values from right" like under FF and Opera.

This is important for me to use at least the newest IE11/win7 for my forms - becouse a part of my aplication should be used by our customers and some of them use only IE/windows...

Example form:
http://candc.katowice.pl/index.php/menu-rekl-spos-dzial-urzadz-bl
(not neccessary login)

 

[troester]

IE11 is still "Release Preview".
Your labels/fields are ok in IE10.

 

[mattsh]

But I'm still struggling with the input fields. At the moment IE7 looks fine.
http://www.ucr.uu.se/test4/index.php/fabrik-form-2

Using latest Fabrik from GitHub (3.0.9...)

 

[troester]

Did you try with adding custom CSS, e.g.
#form_$c fieldset {width:100%}

 

[mattsh]

No, just the ones from yesterday.

.shownocolumns {
width: 100% !important;
}
 
#form_$c fieldset.fabrikGroup {
width:auto;
}

But now I have added the latest code as well.

 

[rob]

the issue is that in beez it loads its position.css after the component css and within that css file there is:

.shownocolumns {
width: 98% !important;
}

this takes precedence over your own custom css. Making the custom css selector more specific will ensure it takes precedence over the poistion.css file, so try using this in your custom_css.php file:

#contentarea .shownocolumns {
width: 98% !important;
}

 

[mattsh]

Sorry, still not working...
http://www.ucr.uu.se/test4/ (JoomlArt template) this is the template I'm planning to use.
http://www.ucr.uu.se/test4/index.php/fabrik-form-2 (Beez)

 

[rob]

Ok so for beez:

#contentarea .shownocolumns {
width: 99% !important;
}

works for me

For the JoomlaArt template its markup is generating a lot of div's (#ja-mainbody, #ja-main, #ja-content, #ja-current-content) with width: 99.99%. Changing those to 100% fixed the layout for me. I guess this is a computed width created from options you set in your template. You may need to look at those yourself or ask JoomlaArt about how to resolve that

 

[mattsh]

Beez also works for me if I add a module beside the form.

Rob, thanks for your support. I will have a look at it myself to start with.