Layout issues with input fields

  1. #1

    Layout issues with input fields

    Hi there,

    We're using the Ext.NET framework and doing quite good so far, but there's an layout issue (Ext.NET 1.3) which bugs me, because I don't understand when and why this is happening. Scrennshot (FireFox 12.0):

    Click image for larger version. 

Name:	layout_issue.png 
Views:	80 
Size:	6.2 KB 
ID:	4259

    You can see that the combo box has an ugly layout offset. But this doesn't happen everytime. Sometimes it looks normal (but fails in this simple example). The date field bahaves the same way (right icon has the same ugly offset). I just noticed, that this seams to be a browser issue, it doesn't happen in IE9.

    The code is pretty simple (no custom CSS or Javascript int there):

    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Theme Test</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
                <Items>
                    <ext:Panel ID="Panel1" runat="server" Region="North" Height="50" Title="Ein Header"></ext:Panel>
                    <ext:Panel ID="Panel2" runat="server" Region="South" Height="50" Title="Ein Footer"></ext:Panel>
                    <ext:Panel ID="Panel3" runat="server" Region="West" Width="100" Title="Links"></ext:Panel>
                    <ext:Panel ID="Panel4" runat="server" Region="East" Width="150" Title="Rechts"></ext:Panel>
                    <ext:Panel ID="Panel5" runat="server" Region="Center" Title="Mitte">
                        <Items>
                            <ext:ComboBox runat="server" ID="theme" EmptyText="" Mode="Local">
                            </ext:ComboBox>
                        </Items>
                    </ext:Panel>
                </Items>
             </ext:Viewport>
        </form>
    </body>
    </html>
    I hope someone give me a hint. Maybe this is a known issue and can be fixed with a line of CSS.

    Thanks in advance
    Regards

    Viktor
  2. #2

    (Temporary) dirty Fix

    I'm failing to find something which is related to this, so I wrote a dirty fix. When I watch at the DOM I see that the clientTop attribute is 1 instead 0, so I fix that by setting a margin of -1. Not nice and not well tested yet, but the wrong layout offset is much uglier...

    (function () {
        var func = function (el) {
            if (this.el.dom.offsetTop == 1)
                this.el.dom.style.marginTop = "-1px";
            else if (this.el.dom.offsetTop == -1)
                this.el.dom.style.marginTop = "0px";
        };
    
        Ext.form.ComboBox.prototype.onResize = Ext.form.ComboBox.prototype.onResize.createSequence(func);
        Ext.form.ComboBox.prototype.onRender = Ext.form.ComboBox.prototype.onRender.createSequence(func);
        Ext.form.DateField.prototype.onResize = Ext.form.DateField.prototype.onResize.createSequence(func);
        Ext.form.DateField.prototype.onRender = Ext.form.DateField.prototype.onRender.createSequence(func);
    })();

Similar Threads

  1. [CLOSED] Layout issues
    By Daly_AF in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Aug 03, 2012, 1:04 PM
  2. [CLOSED] More Layout Issues
    By FAS in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 27, 2012, 7:20 PM
  3. [CLOSED] Ipad 3 layout issues
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 21, 2012, 11:22 AM
  4. [CLOSED] Layout issues
    By sadaf in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Nov 25, 2010, 2:25 PM
  5. [CLOSED] [1.0] Having layout issues in ie8 only
    By ashton.lamont in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jan 18, 2010, 5:18 AM

Posting Permissions