[CLOSED] Css Styles to Disabled controls don´t works in IE 9

  1. #1

    [CLOSED] Css Styles to Disabled controls don´t works in IE 9

    Hi!

    My styles to disabled controls don´t 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 = "Sugestão"
            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="Sugestão"
        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="Sugestão" Value="Sugestão" />
                                    <ext:ListItem Text="Correção" Value="Correção" />
                                </Items>
                            </ext:ComboBox>
                            <ext:ComboBox runat="server" ID="cmbSituacao" FieldLabel="Situação 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="Não aceita" Value="Não aceita" />
                                    <ext:ListItem Text="Em avaliação" Value="Em avaliação" />
                                    <ext:ListItem Text="Aguardando Análise" Value="Aguardando Análise" />
                                    <ext:ListItem Text="Em suporte" Value="Em suporte" />
                                </Items>
                            </ext:ComboBox>
                            <ext:TextArea runat="server" ID="txtDescricao" FieldLabel="Descrição" EmptyText="digite aqui a sua sugestão" 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="Solução" 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="Versão Corrigida" MaxLength="50" DisabledClass="x-item-disable" x="5" Y="5" Width="120px"/>
                            <ext:DateField runat="server" ID= "dtDataSolucao" FieldLabel="Data correção" 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="Solução" 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>
    Last edited by Daniil; Mar 07, 2012 at 12:14 PM. Reason: [CLOSED]
  2. #2
    As I know IE doesn't allow to style color/background (including opacity) for disabled controls
    Try to use ReadOnly instead Disabled
  3. #3
    Hi Vladimir...

    I´m trying follow your suggestion!

    I´m 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?
  4. #4
    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>
  5. #5
    Hi Daniil!

    Works fine! Thanks a lot

Similar Threads

  1. Replies: 3
    Last Post: Mar 26, 2012, 1:43 PM
  2. Replies: 2
    Last Post: Mar 16, 2012, 7:09 PM
  3. [CLOSED] Ext.net v2 Beta release: Top align don´t works
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 16, 2012, 5:53 PM
  4. Replies: 4
    Last Post: Mar 16, 2012, 11:40 AM
  5. Ext.Net controls and styles problem
    By MitraX in forum 1.x Help
    Replies: 0
    Last Post: Jun 23, 2011, 12:39 PM

Posting Permissions