Printable View
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
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.
Dear ,
This is a simple app
109.203.111.14/CFTest.rar
and a pic is attached
best regards
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.
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
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.
this is a simple page :
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-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>
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 :Quote:
Originally Posted by Daniil
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
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
Unfortunately, I think it's impossible to get your initial sample to be working the same way under all browsers.Code:<%@ 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>
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.