Results 1 to 2 of 2

Thread: [solved] Floating inline elements in IE

  1. #1
    Ext JS Premium Member
    Join Date
    Aug 2009
    Posts
    92

    Default [solved] Floating inline elements in IE

    This is more like a CSS question, but I hope you can help me with this one:

    First of all, the following HTML code renders fine in all browsers
    Code:
    <html>
    <head>
        <title>Test</title>
    <style>
        .tag {float: left; margin: .5em;}
    </style>
    </head>
    <body>
    <div style="width: 200px; height: 100px; border: 1px solid black">
        <span class="tag">foo</span>
        <span class="tag">bar</span>
        <span class="tag">baz</span>
        <span class="tag">qux</span>
        <span class="tag">quux</span>
        <span class="tag">corge</span>
        <span class="tag">grault</span>
    </div>
    </body>
    </html>
    Now, I want to generate the same thing using ExtJS 2.2 (can't use latest version in my project)
    Code:
        var w = new Ext.Window({
            title: 'Test',
            width: 200,
            height: 200,
            items: [
                {xtype: 'box', autoEl: {tag: 'span', html: 'foo'}, style: {cssFloat: 'left', margin: '.5em'}},
                {xtype: 'box', autoEl: {tag: 'span', html: 'bar'}, style: {cssFloat: 'left', margin: '.5em'}},
                {xtype: 'box', autoEl: {tag: 'span', html: 'baz'}, style: {cssFloat: 'left', margin: '.5em'}},
                {xtype: 'box', autoEl: {tag: 'span', html: 'qux'}, style: {cssFloat: 'left', margin: '.5em'}},
                {xtype: 'box', autoEl: {tag: 'span', html: 'foo'}, style: {cssFloat: 'left', margin: '.5em'}},
                {xtype: 'box', autoEl: {tag: 'span', html: 'bar'}, style: {cssFloat: 'left', margin: '.5em'}},
                {xtype: 'box', autoEl: {tag: 'span', html: 'baz'}, style: {cssFloat: 'left', margin: '.5em'}},
                {xtype: 'box', autoEl: {tag: 'span', html: 'qux'}, style: {cssFloat: 'left', margin: '.5em'}}
            ]
        });
        w.show();
    Of course, this works fine in Firefox, Opera and Safari, but IE won't wrap the items at the window's right border. Any idea what's wrong?

  2. #2
    Ext JS Premium Member
    Join Date
    Aug 2009
    Posts
    92

    Default

    Ah yea, well, hasLayout strikes again.

    Code:
    zoom: '1'
    fixes it all.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •