fabrikElement content blasts out of FF template

[davez]

I'm totally confused about this one.

See: http://ww2.handsontheland.org/environmental-monitoring/hot-topics-data/data/details/38/57.html

The content is blasting out of the template with even the default Joomla template in Firefox. When I view code the odd thing is that the template is outputting this weird style with wide widths. I'm about to go so far as to hard-code a width value. Anyone else seen this. HTML output:

<div style="width: 3037px;" class="displayBox">
        <div class="leftCol">
            <label for="hot_topics_data___data_ro" class="fabrikLabel ">Observations</label>            <span class="fabrikErrorMessage"></span>        </div>
        <div style="width: 2897px;" class="fabrikElement">

 

[cheesegrits]

Hmmmm. Yeah. Appears to be an issue with our _setMozBoxWidths() method in the form JS, which has to do some funky stuff to get FireFox to play nice.

I'm not entirely sure why / how that works, so I'll raise a github issue for Rob to take a look at it.

https://github.com/Fabrik/fabrik/issues/472

-- hugh

 

[davez]

I seemed to have fixed it. However, what else am I breaking is always the question. If I set it to get two parents up instead of one, it seems to work: c.getParent().getParent().

form-min.js

_setMozBoxWidths:function(){ if(Browser.firefox){this.getForm().getElements(".fabrikElementContainer > .displayBox").each(function(c){var f=c.getParent().getParent().getComputedSize();var a=c.getParent().getParent().getSize().x-(f.computedLeft+f.computedRight);var d=c.getParent().getParent().getSize().x===0?400:a;c.setStyle("width",d+"px");var g=c.getElement(".fabrikElement");if(typeOf(g)!=="null"){a=0;c.getChildren().each(function(b){if(b!==g){a+=b.getSize().x}});g.setStyle("width",d-a-10+"px");}})}}
}

 

[cheesegrits]

Hmmm, yeah, that might well break widths for other element types.

Rob will see your fix when he gets to this issue in github, and it'll at least give him something to go on.

Thanks for the followup.

BTW, if you want to work on the non-compressed JS, you can set the "Fabrik Debug" option in the global params (button top right of Lists page) to "Debug JS". That makes it a lot easier to debug and edit the JS.

-- hugh

 

[davez]

Bump...just cause now I need to keep my hacks up-to-date (when I update) so I can keep my live site functioning.

 

[cheesegrits]

Rob will get to the open github issue as soon as he can.

-- hugh

 

[davez]

Okay...my js edit no longer worked on an update, so I tried again. This one's a doozy--not pretty, but it's working for me, but probably won't work for others. The problem is the tabs and default template are constructed differently (There's no displayBox class in tabs) and with long blocks of text, the widths are being generated by the length of the texts.

_setMozBoxWidths: function () {
        if (Browser.firefox) {
            //as firefox treats display:-moz-box as display:-moz-box-inline we have to programatically set their widths
            if (this.getForm().getElements('.fabrikElementContainer > .displayBox')) {
                b1=this.getForm().getElements('.fabrikElementContainer > .displayBox');
            } else {
                b1=this.getForm().getElements('.fabrikElementContainer');
            }
            b1.each(function (b) {
                var computed = b.getParent().getComputedSize();
                var x = b.getParent().getParent().getSize().x - (computed.computedLeft + computed.computedRight); //remove margins/paddings from width
                var w = b.getParent().getParent().getSize().x === 0 ? 400 : x;
                //alert(x+":"+w);
                b.setStyle('width', w + 'px');
                var e = b.getElement('.fabrikElement');
                
                if (typeOf(e) !== 'null') {
                    
                    x = 0;
                    b.getChildren().each(function (c) {
                        if (c.getSize().x < 1000) { //I threw this in there because my fabrikErrorMessage class as well as others was being calculated as the width of the text.                            if (c !== e) {
                                x += c.getSize().x;
                            }
                        }
                    });
                    e.setStyle('width', w - x - 10 + 'px');
                }
                
            });
        }
    }

 

[cheesegrits]

Ah HAH!

Rob is working his way through a bunch of issue tickets today, as we're trying to get 3.0.7 out this week, as there's a couple of important issues from 3.0.6 we need to get fixed. Looks like he's punted this one to 3.0.8, so I'll see if he thinks we can squeeze it in to 3.0.7. If not, this will be one of the first ones we look at once 3.0.7 is out.

-- hugh

 

[davez]

Forget the code above. It's still not working properly for tabs. I'll spend some more time on this later.

 

[davez]

More info..."Labels above" template seems to work just fine with Rob's code. So, I think I'll just start using that for now.

 

[eugenstolz]

Still problems with text fields!

Unfortunately I still have display problems with text boxes in the detail view.

I use the latest Joomla version and factory 3.0.6.3 with the latest GitHub updates. I'm not a programmer, so the JS stuff is not helpful.

All in all frabrik is a great Tool! Thank you.....

 

[Suzzi]

I am also having the same alignment issue with firefox. I'm using 3.0.8, and the problem is with the fabrik view details. I'm using a copy of the default template.

Some fields in a row on the database display wrapped OK when I removed the <p> </p> tags, but the same field, just in a different row in the database so has a different content, still displays the text way longer than the page:
hiberniantrainingcourses.ie/index.php/courses/mediation-training-courses/mii-accredited-mediator-training-7-day-mediator-training-programme (Lots of fields not wrapping)

hiberniantrainingcourses.ie/index.php/courses/management/people-management-fetac-courses (only one field, 'Who should attend' not wrapping. Same database table)

I'm continuing to work on this to see if i can do a workaround so what you see on the above pages may change - I get an error when i try to attach screenshots.
I don't want to change to labels above which I know does display Ok, unless as a last resort.

I have noticed that if there is other styling involved such as bullets or <em> it seems to wrap OK.

 

[rob]

Hi
can you post a url its pretty impossible to comment on css and markup without being able to see the page itself.
Thanks!
-Rob

 

[Suzzi]

I've fixed up the website using a workaround so that it looks OK so unfortunately you can't see the broken css anymore BUT in short:

Problem 1 = Fields using <p> don't ever wrap unless they are in { } placeholders in the intro. I fixed the wrapping problem by removing all <p>'s from my content.
- The course introduction field on http://www.hiberniantrainingcourses.ie/index.php/courses/mediation-training-courses/mii-accredited-mediator-training-7-day-mediator-training-programme is displayed using a placeholder {htc_all_courses___course_introduction} in the group intro and it wraps OK. It uses <p>.

- using other tags in conjunction with the <p> e.g. <br><em< doesn't seem to make any difference, it nevers wraps if there's a <p>

Problem 2 = but this didn't work for some of my fields and I've discovered why . Some fields still didn't wrap even after taking out the <p> tags, this happens if the label in the left column has to wrap to a second line, the cell content to the right of it doesn't wrap anymore!

This is only a problem in firefox (windows and mac)
I'm using Joomla! 2.5.11 Stable [ Ember ] 26-April-2013 14:00 GMT and fabrik 3.0.8
I don't know when the wrapping problems started or if it ever looked OK in firefox.

This isn't a permanent solution though as my users use tinymce and we'll forget to removed the <p> tags.
--------------------------------------------------------------

Also the fabrik form on the home page is misaligned in firefox only: www.hiberniantrainingcourses.ie. i suspect this is more of a Problem 2 issue and I'll try and get it to look nice by tweaking/hardcoding widths.

I've seen mention of this problem in other posts, but haven't seen a fix that works without having to hard code widths.

 

[troester]

The FF problems seem to be related to "display: -moz-box;"

For the form on your homepage set
.leftCol {display:none} instead of width:0 + li margin-top back to 0.

There may be also issues with your Gantry template conflicting with fabrik

 

[Suzzi]

Thanks. I tried some things with -moz-box previously to no avail but I don't really know how it works. Anyway, everything's looking fine now.