jueves, 3 de febrero de 2011

Corregir formato de un CalendarExtender .NET

Después de bastante tiempo sin decir nada por culpa del estúpido cargador del notebook que se quemo!, hoy les traigo una de las última experiencias relacionadas con mi querido amigo .NET+Ajax; La famosa perdida de formato del calendar extender cuando tenemos algún tipo de Style para una elemento contenedor.

En el caso de que aún no les ocurra (suertudos!), si por ejemplo dentro de nuestro .css tenemos propiedades establecidas para una tabla (th, tr, td, etc.) y dentro de nuestra tabla alojamos un TextBox que levanta un CalendarExntender al ser cliqueado observaremos con horror que el formato de nuestro calendario adquirió los atributos de la tabla y se ve como el forro!. Bueno, para corregir esto de una forma muy sencilla y evitar que vuelva a ocurrir lo mismo con otros controles que utilizaremos se me ocurrió la brillante idea de:

Bueno, no es tan brillante pero si es práctica y rápida... Agregaremos un <div> dentro de la propia celda de la tabla que contiene al TextBox y a su vez al CalendarExtender. La lógica de la tabla es más o menos así.

<style type="text/css">
        .filtros
        {
            font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
            width:30%;
            border-collapse:collapse;
        }
        .filtros td, .filtros th 
        {
            font-size:1em;
            border:1px solid #009452;
            padding:3px 7px 2px 7px;
        }
        .filtros th 
        {
            font-size:1.1em;
            text-align:left;
            padding-top:5px;
            padding-bottom:4px;
            background-color:#009452;
            color:#ffffff;
        }
        .filtros tr.alt td 
        {
            color:#000000;
            background-color:#EBF6F0;
        }

        .style1
        {
            width: 100px;
            padding:0px 0px 0px 0px;
            border:1px solid #98bf21;
        }
        .caltheme tr td 
        {
            font-size:0.9em;
            padding:0px 0px 0px 0px;
            margin:0px 0px 0px 0px;
            border:0.1px solid #009452;
        } 
        .caltheme .ajax__calendar_today   {
            font-weight:bold;
        }


 <table id="filtros" align="center">
        <tr>
            <td class="style1">
                Fecha Desde
            </td>
            <td class="style1">
            <div id="caltheme">
                <asp:TextBox ID="TextBoxFechaDesde" Width="125px" runat="server
                    ontextchanged="TextBoxFechaDesde_TextChanged" AutoPostBack="True"></asp:TextBox>
                <asp:CalendarExtender ID="CalendarExtender1"  TargetControlID="TextBoxFechaDesde"   
                    Format="yyyy/MM/dd" FirstDayOfWeek="Monday" runat="server">
                </asp:CalendarExtender>
            </div>
            </td>
        </tr>
 </table>

Fácil he?. En fin, ojalá esto les sirva y recuerden.... La publicidad en el blog es muy linda! y mientras más clicks le hacen más bebidas me podré comprar para capear el calor y seguir escribiendo tips!

Saludos y nos leemos!

No hay comentarios:

Publicar un comentario