PDA

View Full Version : [CLOSED] Css Styles to Disabled controls don´t works in IE 9



supera
Mar 06, 2012, 6:17 PM
Hi!

My styles to disabled controls dont works in IE 9. Follow below a test page... In FireFox, Chrome and Opera, works fine.



<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Test18.aspx.vb" Inherits="WebApplication3.Test18" %>
<%@ 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">

<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Ext.Net.ExtNet.IsAjaxRequest Then
wndDetails.Show()
End If
cmbSituacao.Text = "Em aberto"
cmbTipo.Text = "Sugesto"
txtCronograma.Text = "Cronograma"
txtDescricao.Text = "Description"
txtEmailSolicitante.Text = "supera@superainfo.com.br"
txtSolicitante.Text = "supera"
txtSolucao.Text = "Solution"
txtSolucionadoPor.Text = "supera"
dtDataSolucao.SelectedDate = Now.Date
dtDataStatus.SelectedDate = Now.Date
txtVersaoCorrida.Text = "1.0.23"
txtStatusDesenvolvimento.Text = "Waiting..."

txtCronograma.Disable()
txtDescricao.Disable()
txtEmailSolicitante.Disable()
txtSolicitante.Disable()
txtSolucao.Disable()
txtSolucionadoPor.Disable()
cmbSituacao.Disable()
cmbTipo.Disable()
dtDataSolucao.Disable()
dtDataStatus.Disable()
txtVersaoCorrida.Disable()
txtStatusDesenvolvimento.Disable()

End Sub
</script>


<style type="text/css">
.x-item-disabled {
/*color: Red !important;*/
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}

.x-item-disabled input {
color: #C6C6C6 !important;
}

</style>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<ext:ResourceManager ID="resManagerSGCO" runat="server" Namespace="SuperaWeb.SGCO" />
<form id="form1" runat="server">
<ext:Window
ID="wndDetails"
runat="server"
IconCls="icon-sugestoes"
Title="Sugesto"
Width="425"
Height="480"
AutoShow="false"
Modal="true"
Resizable="false"
Hidden="true"
ButtonAlign="Center"
Layout="FitLayout"
DefaultButton="button[text=Ok]">
<Items>
<ext:Panel ID="Panel1" runat="server" Layout="AbsoluteLayout" Border="true" Header="false">
<Items>
<ext:FieldSet runat="server" ID="fsContato" Title="Contatos" Layout="AbsoluteLayout" X="5" Y="5" Width="400px" Height="200px">
<Defaults>
<ext:Parameter Name="LabelAlign" Value="Top" Mode="Value" />
</Defaults>
<Items>
<ext:ComboBox runat="server" ID="cmbTipo" FieldLabel="Tipo" AllowBlank="true"
x="5" Y="5" Width="180px" DisabledCls="disableText" >
<Items>
<ext:ListItem Text="" Value="" />
<ext:ListItem Text="Sugesto" Value="Sugesto" />
<ext:ListItem Text="Correo" Value="Correo" />
</Items>
</ext:ComboBox>
<ext:ComboBox runat="server" ID="cmbSituacao" FieldLabel="Situao Final" AllowBlank="true"
x="195" Y="5" Width="180px">
<Items>
<ext:ListItem Text="" Value="" />
<ext:ListItem Text="Em aberto" Value="Em aberto" />
<ext:ListItem Text="Em desenvolvimento" Value="Em desenvolvimento" />
<ext:ListItem Text="Desenvolvida" Value="Desenvolvida" />
<ext:ListItem Text="No aceita" Value="No aceita" />
<ext:ListItem Text="Em avaliao" Value="Em avaliao" />
<ext:ListItem Text="Aguardando Anlise" Value="Aguardando Anlise" />
<ext:ListItem Text="Em suporte" Value="Em suporte" />
</Items>
</ext:ComboBox>
<ext:TextArea runat="server" ID="txtDescricao" FieldLabel="Descrio" EmptyText="digite aqui a sua sugesto" x="5" Y="50" Width="370px" Height="60px"/>
<ext:TextField runat="server" ID="txtSolicitante" FieldLabel="Solicitante" EmptyText="digite aqui seu nome" MaxLength="70" x="5" Y="130" Width="180px"/>
<ext:TextField runat="server" ID="txtEmailSolicitante" FieldLabel="E-mail" EmptyText="digite aqui seu e-mail" MaxLength="100" x="195" Y="130" Width="180px"/>
</Items>
</ext:FieldSet>
<ext:FieldSet runat="server" ID="fsSolucao" Title="Soluo" Layout="AbsoluteLayout" X="5" Y="210" Width="400px" Height="200px" >
<Defaults>
<ext:Parameter Name="LabelAlign" Value="Top" Mode="Value" />
</Defaults>
<Items>
<ext:TextField runat="server" ID="txtVersaoCorrida" FieldLabel="Verso Corrigida" MaxLength="50" DisabledClass="x-item-disable" x="5" Y="5" Width="120px"/>
<ext:DateField runat="server" ID= "dtDataSolucao" FieldLabel="Data correo" DisabledClass="x-item-disable" x="135" Y="5" Width="120px" />
<ext:TextField runat="server" ID="txtSolucionadoPor" FieldLabel="Solucionado por" MaxLength="50" DisabledClass="x-item-disable" x="265" Y="5" Width="110px" />
<ext:TextArea runat="server" ID="txtSolucao" FieldLabel="Soluo" DisabledClass="x-item-disable" x="5" Y="50" Width="370px" Height="60px"/>
<ext:TextField runat="server" ID="txtStatusDesenvolvimento" FieldLabel="Status" MaxLength="50" DisabledClass="x-item-disable" x="5" Y="130" Width="120px"/>
<ext:DateField runat="server" ID= "dtDataStatus" FieldLabel="Status data" MaxLength="50" DisabledClass="x-item-disable" x="135" Y="130" Width="120px"/>
<ext:TextField runat="server" ID="txtCronograma" FieldLabel="Cronograma" MaxLength="50" DisabledClass="x-item-disable" x="265" Y="130" Width="110px"/>
</Items>
</ext:FieldSet>
</Items>
</ext:Panel>
</Items>
<Buttons>
<ext:Button runat="server" id="btnOk" text="Ok" Width="80px" Icon="Tick" OnClientClick="SuperaWeb.SGCO.wndDetails.hide();">
</ext:Button>
<ext:Button runat="server" id="btnCancel" text="Cancelar" Width="80px" Icon="Cancel" OnClientClick="SuperaWeb.SGCO.wndDetails.hide();">
</ext:Button>
</Buttons>
</ext:Window>

</form>
</body>
</html>

Vladimir
Mar 06, 2012, 6:23 PM
As I know IE doesn't allow to style color/background (including opacity) for disabled controls
Try to use ReadOnly instead Disabled

supera
Mar 06, 2012, 7:24 PM
Hi Vladimir...

Im trying follow your suggestion!

Im using the ReadOnly property.

To the TextField and TextArea controls, I changed the text color to gray when the control is set to readonly...



.x-form-readonly .x-form-field
{
color: Gray !important;
}


But to combobox and datefield, I could not change...

Any help?

Daniil
Mar 07, 2012, 7:04 AM
We can suggest the following solution.

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 v2 Example</title>

<style type="text/css">
.my-readonly {
color: gray !important;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:ComboBox runat="server" ReadOnly="true" FieldCls="my-readonly">
<Items>
<ext:ListItem Text="Item 1"/>
<ext:ListItem Text="Item 2"/>
</Items>
<SelectedItems>
<ext:ListItem Index="0" />
</SelectedItems>
</ext:ComboBox>
</form>
</body>
</html>

supera
Mar 07, 2012, 11:09 AM
Hi Daniil!

Works fine! Thanks a lot