doctyper / flexie Goto Github PK

Using some CSS to simulate hbox/vbox/etc. (from Alex Russel's blog) breaks Flexie on IE8 with the error:

Invalid argument. flexie.js, line 784 character 8

Here is the CSS, if you un-comment any of the commented lines you can trigger the error in IE8:

/* hbox and vbox classes */

.hbox {
 display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-align: stretch;

display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-align: stretch;

display: box;
box-orient: horizontal;
box-align: stretch;
}

.hbox > * {
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
display: block;
}

.vbox {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: stretch;

display: -moz-box;
-moz-box-orient: vertical;
-moz-box-align: stretch;

display: box;
/*box-orient: vertical;*/
/*box-align: stretch;*/
}

.vbox > * {
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
display: block;
}

.spacer {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}

.reverse {
-webkit-box-direction: reverse;
-moz-box-direction: reverse;
box-direction: reverse;
}

.boxFlex0 {
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
}

.boxFlex1, .boxFlex {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}

.boxFlex2 {
-webkit-box-flex: 2;
-moz-box-flex: 2;
box-flex: 2;
}

.start {
-webkit-box-pack: start;
-moz-box-pack: start;
box-pack: start;
}

.end {
-webkit-box-pack: end;
-moz-box-pack: end;
box-pack: end;
}

.center {
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
}

.alignCenter {
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
}

Example to clarify :
http://regnix.net/flex/

Fine in FF and Chrome, just IE only tested 7 and 8.

Other than that, excellent work, I wish I knew more JavaScript to fix it myself.

At the moment, flexiejs will not work with IE10, and all elements display vertically.

I have noticed that flexie applies a float to all child elements within a flexbox parent container. This includes child elements with the CSS position of absolute or fixed. Shouldn't these elements be ignored so that they don't take on any float or margin?

Hey, maintainer(s) of doctyper/flexie!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library doctyper/flexie is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "doctyper/flexie",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Maintainer's Note: Looking for flexbox enthusiasts to help build the next Flexie. The new spec is very detailed, and I don't have as much time as I'd like to devote to this project. You can help increase adoption of the new spec! Join in at https://github.com/doctyper/reflexie/tree/develop

@doctyper As you're probably aware the Flexible Box Model spec has been updated as of Nov 14th, 2011. I wonder what this means for your implementation. Are you actively maintaining flexie, do you intend to update flexie to conform with the spec changes? Will this break previous usage of flexbox/flexie? I suppose it will... What's your take on this?

The Flexie Playground at http://doctyper.github.com/flexie/playground/ is not working in IE9 latest preview.

Here is a screenshot:
https://dl.dropbox.com/u/54069263/css-chan/flexie.v1.0.3.png

Version:
https://dl.dropbox.com/u/54069263/css-chan/flexie-ie9version.png

Live test:
https://browserling.com/queue?uri=http%3A%2F%2Fflexiejs.com%2Fplayground%2F&browser=explorer&version=9.0

To test the demo I just opened the demo index.html-file locally.
This works of course in chrome and firefox, but doesn't work in opera or ie.
There is no replacement performed.

Am I doing something wrong?

I testetd:

75a4258 (1.0.3) and 5661b1c.

Thanks
Michael

If you add a border to a border-box row item. The total stretched width is smaller than it should, due to the border not accounted for (both vertically and horizontally). Issue reproduced on IE9 as seen on row 2 of this snapshot.

Using IE8 / flexie 1.0.3 / jquery 1.7.1 / selectivizr v1.0.2:

        var flexie = new Flexie.box({
            target: newElement[0],
            flexMatrix: this.options.use_flexie ? [0, 1, 0] : [0, 1],
        });

crashes at line 1551 because x.properties is null. Removing the flexMatrix argument fixes the crash.

The following seems to fix it. It does leave an overflow problem (the right hand column ends up on a new line when it should fill the current row), which might or might not be related to this fix:

--- a/Software/CurryWebContent/content/js/flexie.js
+++ b/Software/CurryWebContent/content/js/flexie.js
@@ -1547,6 +1547,7 @@ var Flexie = (function (win, doc) {
for (k = 0, l = flexers[key].length; k < l; k++) {
x = flexers[key][k];
max = NULL;

•                                                   if (x.properties != null) {
                                                  for (m = 0, n = x.properties.length; m < n; m++) {
                                                          rule = x.properties[m];
  

@@ -1554,6 +1555,7 @@ var Flexie = (function (win, doc) {
max = parseFloat(rule.value);
}
}

•                                                   }
                                                  if (!max || x.match[self.props.out] > max) {
                                                          appendPixelValue(x.match, self.props.pos, NULL);
  

Using the latest jQuery (1.7.1) works, but using the standalone Sizzle engine doesn't. Not changing any code other than swapping out jQuery for Sizzle, it will go from working to not working.

hello dear.
flexie can't detect page direction [RTL/LTR].
when page direction is RTL , value of box-pack must be set 'end'

The link to the W3C spec at the beginning of the README points to a newer version of the spec that flexie doesn't actually support.

W3C provides versioned URLs, so I think it would be clearer to link directly to the version that you do support.

Occurs in Chrome. After investigating, determined the problem to be caused by ADBlock plugin. It modifies the source code:

See:
http://stackoverflow.com/questions/10446575/why-is-chrome-referencing-datatext-css-in-all-websites

Hi, you forgot to add flexie axa http://doctyper.github.com/flexie/playground/flexie.js is missing.

IE9 and Firefox 7 needs it at least: https://bugzilla.mozilla.org/show_bug.cgi?id=562073

According to http://caniuse.com/#feat=flexbox, Firefox has improved Flexbox support (From http://www.html5rocks.com/en/tutorials/flexbox/quick/). http://flexiejs.com/test/ shows that FireFox is not supported, but that seems to be a contradition to the caniuse web site.

Hello,

when I use the js api , with following :

var box = new Flexie.box({
target : document.getElementById("main"),
orient : "vertical",
align : "center",
flexMatrix : [1,2,7]
});

when ever I use flexMatrix I get a javascript error such that it points to line 1553 in version (1.0.3):

for (m = 0, n = x.properties.length; m < n; m++) {
rule = x.properties[m];
...

here , debugger says properties == undefined so length gives error. As a temporary workaround I put
if(x.properties) on top of the for loop

I am getting the below error in IE 9.0.8112.16421 on Win7 x64. Both when using the packed and the regular javascript file. Joomla supplies Mootools 1.3.2, but I have also tried jQuery 1.6.4. Tried latest master and the flexie.min.js used in the Playground. Tried browser modes IE7,8,9 and several document standards variations. This very well might be related to my html/css but am not sure where to start looking, so any pointers would be appreciated. I have switched up a lot of the html/css already but this IE error remains. I tried to narrow down my html/css into this paste: http://jsfiddle.net/wQpN8/1/

SCRIPT5007: Unable to get value of the property 'length': object is null or undefined 
flexie.js, line 1021 character 15

Which would be:

function cleanPositioningProperties (children) {
        var i, j, kid, w, h;

        for (i = 0, j = children.length; i < j; i++) {

In the case where an element with the "box" display style contains an immediate child that is a form element, the width/margin/padding style calculations are applied to all descendent form control elements (input/select/etc...).

This is due to the way the appendPixelValue iterates over the target. Since HTMLFormElement DOM objects can be treated as arrays (i.e. formElement[0] == the first input control), iterating over a target that is an HTMLFormElement object with forEach restyles all elements in the form's array of input controls.

Observed:
Markup is modified to something like:

Expected:
Markup is modified to something like:

At first my compliments on this javascript 'plugin'. Designing and creating clean HTML will be much easier with the box-options. unfortunately IE9 crashes when the box-flex option is used in the CSS. When I delete the option box-flex from the CSS the browser won't crash; But the box-flex option is just the option I need, so it ain't the best solution to simply remove this option. Here is a small (incomplete) preview of my code.

in Stylesheet:

.columns-horizontale{
    width:100%; 
    display: -moz-box;
    display: -webkit-box;
    display: -ms-box;
    display: box;
}

.columns-horizontale > div{
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    
    border-right:1px solid #000;
}

In HTML

<div class="columns-horizontale">
    <div>column1 </div>
     <div>column2 </div>
 </div>

It seems that box-ordinal-group only work when boxes are flex-box specified.

Case study : http://ie7nomore.com/fun/flexie/

It looks like this error has resurfaced (albeit in a different location): #12

I've ran into the exact situation presented in the Pull Request (if there's an element in the style sheet with a box-flex definition that is not present in HTML code, flexie throws the error). This time, it seems to be at line 143 of the de-obfuscated code (or line 5 of the minimized code).

Has anyone else run into this issue?

Code:

function da(a, d, c) {
        var b, e, f = [];
        h(c, function(g, i) {
/* !![Chrome's Inspect Element Script Debugger Inserted this message]!!
      flexie.min.js:5Uncaught TypeError: Cannot call method 'toLowerCase' of undefined */
            if (i.selector) {
                b = d(i.selector);
                b = b[0] ? b : [ b ];
                b[0] && h(b, function(j, l) {
                    switch (l.nodeName.toLowerCase()) {
                      case "script":
                      case "style":
                      case "link":
                        break;
                      default:
                        if (l.parentNode === a) {
                            S(l);
                            e = {};
                            h(i, function(m) {
                                e[m] = i[m];
                            });
                            e.match = l;
                            f.push(e);
                        }
                    }
                });
            } else {
                S(i);
                f.push({
                    match: i,
                    selector: $(i)
                });
            }
        });
        return f;
    }

I don't understand, is it usable in prodaction or not?

I see problems from Chrome users. Why??

Thanks!

I'm using Flexie on a wordpress theme that uses Disqus for comments. The flexbox layout works fine, except on pages where Disqus (which adds comments after page load via JS) would cause the content column to grow longer -- instead of expanding to accomodate the new content, it just overflows out of the box.

I was able to find a JS trigger for when Disqus finishes drawing, and am using it to call Flexie.updateInstance() like so:

function disqus_config() {
    this.callbacks.afterRender = [function() {
        alert('hello');
        Flexie.updateInstance();
    }];
}

The alert triggers fine, but the Flexie command throws the following error: TypeError: Cannot call method 'updateModel' of undefined

Any ideas what I'm doing wrong?

I used fix #33 to remove the error mentioned in #32. (I have more than one flexbox)

But by doing so, when loading the page, the browser completely crashes on me (Chrome, Firefox and IE9).

Here is part of my css to help you understand:

#h-wrapper #primary-nav ul.menu {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: box;
  width: 100%;
  padding: 0;
}
#h-wrapper #primary-nav ul.menu li {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-box-flex: 1;
  box-flex: 1;
  position: relative;
  line-height: 60px;
}
...
#h-wrapper #primary-nav ul.menu li ul.sub-menu {
  left: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: box;
  *zoom: 1;
  max-width: 980px;
  _width: 980px;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  height: auto;
}
...
#h-wrapper #primary-nav ul.menu li ul.sub-menu li {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-box-flex: 1;
  box-flex: 1;
  line-height: normal;
  border-right: 1px solid #b4b4b4 !important;
}

Any ideas on how to deal with this would be appreciated!

Not sure if it requires a specific set of circumstances to do this, but I am happy to demonstrate a layout to you that pretty much causes IE9 to fall over dead while trying very hard to convince the rest of Windows 7 (64 bit) to do the same. Is IE9 compatibility a known problem?

Would it be possible to change the resize event to only trigger at a set interval, for example every 250ms? The resize event listener in IE9 causes the browser to crash if the windows is sized down and then back up again in the same motion.

Uncaught TypeError: Cannot read property 'children' of undefined

This seems to happen to me when I have an element that is display: box but doesn't have any children and its parent is NOT display: box. Setting the parent to display: box prevents this error.

Using the latest uncompressed flexie.js, this occurs on line 1071

I know that the current version of Flexie is not able to support prefixes, is there anyway to change this? As most of you will know, the standard that Flexie polyfills is now only used for browsers that does not support the new standard, and so it is prefixed.

If Flexie could work with this prefixing then it would work very well with Autoprefixer.

Basically same that in Chrome ( #14 ) the Playground have problem on "play" with box flex. Just select 1 : 1 : 1, but the problem is just it. This break browser.

Obs: I'm using IETester.

Was having an issue with an hbox css style and made the simplest possible example demonstrating the issue. Problem is in HTML comment.

Here is the HTML:
https://gist.github.com/728509

Here is the accompanying CSS:
https://gist.github.com/728512

Hi,

I've tried to download flexie.js

However, the version that seems to be downloading from the master branch is about 2 years old and doesn't include the latest bugs and fixes.

Many thanks.

Just reporting this Flexie bug for the previous -moz-box specs of Firefox which is probably valid for 'reflexie' to address too.

https://bugzilla.mozilla.org/show_bug.cgi?id=529761

Essentially percentages need to be converted to pixel value for 'fixed' sizes to work in Firefox 3-21.

Hi,

i went through your code to extract the flexboxSupport method and wondered if I missed something with line 1830

            boxPackJustify : function () {
                var totalOffset = 0,
                    i, j;

                for (i = 0, j = dummy.childNodes.length; i < j; i++) {
                    totalOffset += dummy.childNodes[i].offsetLeft;
                }

                return (totalOffset === 135);

I just get 100 (or, in chrome, 99) as totalOffset when debugging via console.

Perhaps I missed the correct attributes to check justify properly so 135 would be indeed the returned value if the test is passed?

YUI3 changed a bunch of stuff that causes flexie to no longer work.

In particular, YAHOO.util.Selector.query has turned into YUI().one.

Absolutely loving flexie's concept. But when I open the demos in IE8 they do not seem to be impacted by any means; I mean the pages render as if no flexie was included.

What am I missing?

Thanks for the awesome library!

IE8 on Windows XP reports the following error with 0.4 and the same CSS in Issue 1

Line: 402
Error: 'property' is null or not an object

The test that is featured on the Flexie homepage ( http://flexiejs.com/test/cases/ie7nomore.com/ ) doesn't seem to be working in IE7 or IE8 but surprisingly, it works in IE6.

Here's a screenshot from Adobe Browser Lab: http://cl.ly/7qGy

When flexie adds css to elements it seems to completely replace any existing inline styles.

Firefox seems to implement flex-box differently to chrome and it breaks when you use it with fixed or absolute positioning. Is there a workaround for this?

Do you have a branch of your work on this you could push?

I am getting the following error when using Flexie in the latest version of Opera:

Uncaught exception: DOMException: NO_MODIFICATION_ALLOWED_ERR

I'm done some research but I can't seem to find anybody else with the same problem?

The /demo/ you include with the download doesn't work in at least FF 3.6.15 and Safari 5.0.4

I get the following javascript error when using flexie.js with inline media queries:

Uncaught Syntax error, unrecognized expression: (min-width:768px) {

This is the media query css

@media only screen and (min-width: 768px) {
  /* flex box css here */
}

Works great without media queries though.

In Internet Explorer 8 and 9, FlexieJS seems to cause an extra page load (as witnessed in the "Network" tab in the developer tools). This causes issues with Apache Wicket (a Java web framework). Wicket tracks page state in the session and on each page load a new version of the state is created. All the components on the page are attached to that version. What happens with FlexieJS on the page is that the components are attached to version, then FlexieJS triggers the extra page load invalidating the version the components are attached to. When you then try to do anything with those components, Wicket throws a StalePageException and the page refreshes, which just takes us back to step one.
Is there a way to bypass the extra page load?

Hi!

Just try it on Chrome (mine is 12.0.742.0):

1. Open playground: http://flexiejs.com/playground/
2. Put box flex to 1 : 1 : 1.
3. Change some box flex to 0 again.

On IE and Firefox works too fine.

This isn't clear to me. It says it uses the Selectivizr engine, has lots of references to it, but doesn't state outright whether or not its a necessity.