[CLOSED] Compatibility with chrome and firefox issue

  1. #1

    [CLOSED] Compatibility with chrome and firefox issue

    Dear All,
    please we have Compatibility issue with chrome and firefox that u may can help us to fix this please open this page and see
    http://109.203.111.14/login.aspx

    as long as u may help us i can send u in Private a user name and password

    best regards
    Last edited by Daniil; Dec 27, 2011 at 2:35 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Even if we would see an issue in our browsers, it would not help a lot to resolve that issue.

    Please provide a simplified .aspx page to reproduce the problem and screen-shot (-s) what we should look into.
  3. #3
    Dear ,

    This is a simple app

    109.203.111.14/CFTest.rar

    and a pic is attached

    best regards
    Attached Thumbnails Click image for larger version. 

Name:	extongoogle.jpg 
Views:	189 
Size:	24.6 KB 
ID:	3584  
  4. #4
    I don't think we need a project to reproduce a problem, we expect a simplified aspx just here wrapped in [CODE ] tags.

    Regarding to the screen-shot.

    As far as I can see it's the login page of the online link you've posted before. I can't see any issues comparing how this page is rendered in FireFox and Chrome, looks absolutely the same for me.
  5. #5
    i attached a screen shot of how its rendering in IE , and see the different between this and the i uploaded before ,

    and i give u a project because i make some modification on the css to make it support arabic , that's why its comes rendered like this , so i just need help to make this css better if u can help .

    Regards

    Quote Originally Posted by Daniil View Post
    I don't think we need a project to reproduce a problem, we expect a simplified aspx just here wrapped in [CODE ] tags.

    Regarding to the screen-shot.

    As far as I can see it's the login page of the online link you've posted before. I can't see any issues comparing how this page is rendered in FireFox and Chrome, looks absolutely the same for me.
    Attached Thumbnails Click image for larger version. 

Name:	ss.jpg 
Views:	185 
Size:	87.0 KB 
ID:	3592  
  6. #6
    Thanks for the screen-shot, it makes the problem clearer.

    I don't think a whole project is required. Please post just simplified aspx page and required CSS rules.
  7. #7
    this is a simple page :

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="login2.aspx.vb" Inherits="login2" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style type="text/css"> 
     
    .x-form-field
    {
    	direction:rtl;
    	text-align:right;
    	float:right; 
    	width:200px;
    }
    .x-form-item 
    { 
    font:bold 11px Tahoma;
    color:#7e7e7e;
    direction:rtl;
    text-align:right;
    float:right;  
    }  
       
     
    .x-form-file-wrap {
    position: absolute;
    height: 22px;
    }
      
    .x-form-item label.x-form-item-label {
    display: -webkit-inline-box;
    float: right;
    width: 100px;
    padding: 0;
    padding-right: 0;
    clear: right;
    z-index: 2;
    position: relative;
    direction: rtl;
    }
     
        
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <div class="loginbody">
            <div class="loginborder"> 
                <ext:ResourceManager ID="rmLogin" runat="server" ContentUpdated="False">
                </ext:ResourceManager>
                <ext:Hidden runat="server" ID="hflang" IDMode="Static" ></ext:Hidden>
                <ext:FormPanel ID="fpMain" runat="server" ButtonAlign="Left" Height="290px" Padding="5"
                    Collapsible="True" CollapseMode="Mini" Draggable="True" Icon="Lock" Width="400px"
                    Title="تسجيل الدخول" ContentUpdated="false" meta:resourcekey="fpMainResource1">
                    <Items>
                        <ext:ComboBox runat="server" ID="cbLanguages" FieldLabel="اللغة" LabelWidth="200" Width="145" 
                            meta:resourcekey="cbLanguagesResource1">
                            <Template Visible="False" EnableViewState="False" runat="server" ID="ctl409">
                            </Template>
                            <Items>
                                <ext:ListItem Text="العربية" Value="ar" />
                                <ext:ListItem Text="English" Value="en" />
                            </Items>
                             
                        </ext:ComboBox>
                        <ext:TextField ID="txtUserName" FieldLabel="اسم المستخم" runat="server" BlankText="يجب ادخال اسم المستخدم !"
                            AllowBlank="false" InvalidText="يجب ادخال اسم المستخدم !" ValidationGroup="login"
                            meta:resourcekey="txtUserNameResource1" />
                        <ext:TextField ID="txtPassword" runat="server" FieldLabel="كلمة المرور" BlankText="يجب ادخال كلمة السر !"
                            InvalidText="يجب ادخال كلمة السر !" InputType="Password" AllowBlank="false" ValidationGroup="login"
                            meta:resourcekey="txtPasswordResource1" />
                        <ext:Checkbox ID="cbRememberPassword" runat="server" Cls="textbox" FieldClass="width:200px"
                            FieldLabel="تذكرني على الجهاز" meta:resourcekey="cbRememberPasswordResource1">
                        </ext:Checkbox>
                    </Items>
                    <Buttons>
                        <ext:Button ID="btnLogin" runat="server" Icon="Lock" Text="تسجيل الدخول" meta:resourcekey="btnLoginResource1">
                      
                        </ext:Button>
                    </Buttons>
                </ext:FormPanel>
            </div>
        </div>
        </div>
        </form>
    </body>
    </html>
  8. #8
    Please ensure you have included all required CSS rules, because I can't get a correct (like your one) picture even with IE.
  9. #9
    Quote Originally Posted by Daniil View Post
    Please ensure you have included all required CSS rules, because I can't get a correct (like your one) picture even with IE.
    Srry this is the code :
    
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="login2.aspx.vb" Inherits="login2" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style type="text/css"> 
      
    .x-form-item label.x-form-item-label 
    { 
    font:bold 12px Tahoma;
    color:#7e7e7e;
    direction:rtl;
    text-align:right;
    float:right; 
    }
    .formTitle
    {
    direction:rtl;
    text-align:center; 
    }
    .x-form-field
    {
    	direction:rtl;
    	text-align:right;
    	float:right; 
    	width:200px;
    }
    .x-form-item 
    { 
    font:bold 11px Tahoma;
    color:#7e7e7e;
    direction:rtl;
    text-align:right;
    float:right;  
    }
    
    .x-grid3-header-inner {
    overflow: hidden;
    zoom: 1;
    float: right;
    }
    
    .x-grid3-header-offset {
    text-align: center;
    }
    .Pager .x-form-field
    {
    	width:20px;
    }
    
     .x-form-element
     {
      direction:ltr;
     }
     .x-grid-group
     {
     	direction:rtl;
     	float:right;
     }
    div.standart-view-group {
    float: right;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-right: 4px !important;
    padding-left: 0px !important;
    }
    .rtl
    {
    	direction:rtl;
    	float:right;
    }
    .x-tree-node-el {
    line-height: 18px;
    cursor: pointer;
    text-align: right;
    }
    .x-panel-body {
    border-color: hsl(214, 63%, 75%);
    background-color: white;
    text-align: right;
    }
    .x-form-file-wrap {
    position: absolute;
    height: 22px;
    }
    
     /*---------------------------------- Mailing Section ----------------------------------*/
            
    .x-panel-body {
    border: none;
    } 
    
    /*---------------------------------- Mail-Details Section ----------------------------------*/
    .x-toolbar-left {
    width: 100%; 
    }
    /*---------------------------------- Mail-Reader Section ----------------------------------*/
    .x-grid3-header {
     
    cursor: default;
    zoom: 1;
    padding: 1px 0 0 0;
    direction: rtl;
    }
    
    .x-html-editor-wrap {
    border-color: #A9BFD3;
    background-color: white;
    /*text-align: -webkit-right;
    padding: 0px;
    margin: 0px;
    direction: rtl;*/
    float: right;
    }
    .x-grid3-scroller {
    overflow:auto;
    zoom: 1;
    position: relative;
    direction: rtl;
    }
    .x-unselectable, .x-unselectable * {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: ignore;  
    }
    
    .x-form-item label.x-form-item-label {
    display: -webkit-inline-box;
    float: right;
    width: 100px;
    padding: 0;
    padding-right: 0;
    clear: right;
    z-index: 2;
    position: relative;
    direction: rtl;
    }
    .x-form-item {
    font: normal 12px tahoma, arial, helvetica, sans-serif;
    direction: rtl;
    }
    .x-combo-list-item {
    border: 1px dotted white;
    text-align: center;
    }
    .x-form-item label.x-form-item-label {
    display: -webkit-inline-box;
    float: right;
    width: 100px;
    padding: 0;
    padding-right: 0;
    clear: right;
    z-index: 2;
    position: relative;
    direction: rtl;
    }
    .x-form-item label.x-form-item-label {
    font: bold 12px Tahoma;
    color: #7E7E7E;
    direction: rtl;
    text-align: right;
    float: right;
    margin: 4px;
    }
    
    .x-textfield-icon {
    background-repeat: no-repeat;
    background-position: 13 50%;
    width: 16px;
    height: 16px;
    margin-left: 0.5px;
    }
    
    .cellHide2
    {
        display:none;
    }
    
    .x-tbar-page-number {
    width: 30px;
    height: 14px;
    } 
     /*-------------------------------*/
     
       * {font-size:12px;font-family: Arial,sans-serif;} 
     x-form-item-label {font-size:12px;font-family: Arial,sans-serif;font-weight:bold;} 
     .x-form-field {font-size:12px;font-family: Arial,sans-serif;}
    .x-form-item {font-size:12px;font-family: Arial,sans-serif;margin-bottom:2px;}
        
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <div class="loginbody">
            <div class="loginborder"> 
                <ext:ResourceManager ID="rmLogin" runat="server" ContentUpdated="False">
                </ext:ResourceManager>
                <ext:Hidden runat="server" ID="hflang" IDMode="Static" ></ext:Hidden>
                <ext:FormPanel ID="fpMain" runat="server" ButtonAlign="Left" Height="290px" Padding="5"
                    Collapsible="True" CollapseMode="Mini" Draggable="True" Icon="Lock" Width="400px"
                    Title="تسجيل الدخول" ContentUpdated="false" meta:resourcekey="fpMainResource1">
                    <Items>
                        <ext:ComboBox runat="server" ID="cbLanguages" FieldLabel="اللغة" LabelWidth="200" Width="145" 
                            meta:resourcekey="cbLanguagesResource1">
                            <Template Visible="False" EnableViewState="False" runat="server" ID="ctl409">
                            </Template>
                            <Items>
                                <ext:ListItem Text="العربية" Value="ar" />
                                <ext:ListItem Text="English" Value="en" />
                            </Items>
                             
                        </ext:ComboBox>
                        <ext:TextField ID="txtUserName" FieldLabel="اسم المستخم" runat="server" BlankText="يجب ادخال اسم المستخدم !"
                            AllowBlank="false" InvalidText="يجب ادخال اسم المستخدم !" ValidationGroup="login"
                            meta:resourcekey="txtUserNameResource1" />
                        <ext:TextField ID="txtPassword" runat="server" FieldLabel="كلمة المرور" BlankText="يجب ادخال كلمة السر !"
                            InvalidText="يجب ادخال كلمة السر !" InputType="Password" AllowBlank="false" ValidationGroup="login"
                            meta:resourcekey="txtPasswordResource1" />
                        <ext:Checkbox ID="cbRememberPassword" runat="server" Cls="textbox" FieldClass="width:200px"
                            FieldLabel="تذكرني على الجهاز" meta:resourcekey="cbRememberPasswordResource1">
                        </ext:Checkbox>
                    </Items>
                    <Buttons>
                        <ext:Button ID="btnLogin" runat="server" Icon="Lock" Text="تسجيل الدخول" meta:resourcekey="btnLoginResource1">
                      
                        </ext:Button>
                    </Buttons>
                </ext:FormPanel>
            </div>
        </div>
        </div>
        </form>
    </body>
    </html>

    Thanks in Advance
  10. #10
    I've investigated the page, but please simplify the code as much as you can leaving only required to reproduce the problem and related to that problem.

    For example, you could totally remove "meta:resourcekey" things.

    I think it's not possible to get a cross-browser RTL solution only via CSS, needs to use a respective layout.

    Please look at the example.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
    
        <style type="text/css">
            .rtl {
                direction: rtl;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:FormPanel 
                runat="server" 
                Title="Login"
                ButtonAlign="Left" 
                Height="200"
                Width="400"
                Padding="5"
                Icon="Lock"
                DefaultAnchor="100%">
                <Items>
                    <ext:CompositeField runat="server">
                        <LayoutConfig Pack="End" />
                        <Defaults>
                            <ext:Parameter Name="cls" Value="rtl" Mode="Value" />
                        </Defaults>
                        <Items>
                            <ext:ComboBox runat="server" Width="150" />    
                            <ext:DisplayField runat="server" Text="ComboBox:" Width="100" />
                        </Items>
                    </ext:CompositeField>
    
                    <ext:CompositeField runat="server">
                        <LayoutConfig Pack="End" />
                        <Defaults>
                            <ext:Parameter Name="cls" Value="rtl" Mode="Value" />
                        </Defaults>
                        <Items>
                            <ext:TextField runat="server" Width="150" />    
                            <ext:DisplayField runat="server" Text="User name:" Width="100" />
                        </Items>
                    </ext:CompositeField>
    
                    <ext:CompositeField runat="server">
                        <LayoutConfig Pack="End" />
                        <Defaults>
                            <ext:Parameter Name="cls" Value="rtl" Mode="Value" />
                        </Defaults>
                        <Items>
                            <ext:TextField runat="server" Width="150" />    
                            <ext:DisplayField runat="server" Text="Password:" Width="100" />
                        </Items>
                    </ext:CompositeField>
    
                    <ext:CompositeField runat="server">
                        <LayoutConfig Pack="End" />
                        <Defaults>
                            <ext:Parameter Name="cls" Value="rtl" Mode="Value" />
                        </Defaults>
                        <Items>
                            <ext:Checkbox runat="server" Width="15" />    
                            <ext:DisplayField runat="server" Text="Checkbox:" Width="100" />
                        </Items>
                    </ext:CompositeField>
                </Items>
                <Buttons>
                    <ext:Button runat="server" Icon="Lock" Text="Login" />
                </Buttons>
            </ext:FormPanel>
        </form>
    </body>
    </html>
    Unfortunately, I think it's impossible to get your initial sample to be working the same way under all browsers.

    We can try to help with some concrete RTL issue, but, unfortunately, we can't provide you with a full RTL solution since it's a really big deal.

    We hope that it will be implemented in ExtJS 4 and, respectively, in Ext.NET v2.

Similar Threads

  1. [CLOSED] Dynamically loaded pages issue in Chrome and Firefox
    By bakardi in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Dec 08, 2011, 6:24 PM
  2. [CLOSED] Problem with Firefox and Chrome
    By Stefanaccio in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Dec 07, 2011, 12:43 PM
  3. [CLOSED] Display problems on Chrome and Firefox
    By Stefanaccio in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: May 18, 2011, 6:18 AM
  4. Problem with a example in Chrome and Firefox...
    By Tanielian in forum 1.x Help
    Replies: 2
    Last Post: Apr 07, 2011, 6:14 PM
  5. Replies: 2
    Last Post: Feb 05, 2010, 5:20 PM

Posting Permissions