PDA

View Full Version : [CLOSED] CalendarPanel: CalendarModel customized: In FireFox donÂīt appears border



supera
Apr 16, 2012, 7:40 PM
Hi

I'm setting the colors of CalendarModel as customized.
In Ie9, itīs works very fine... but in FireFox, donīt appears the board of Event slot.

IE 9
4109

FireFox
4110

In my style, I'm setting the border-color as follow:



.ext-color-1-x .ext-cal-evb,
.ext-color-1-x dl {
border-color: Black;
}


Follow the complet style tag


<style type="text/css">

.ext-evt-bd {
color: Black;
}
/*****************************/
/* COLOR 0 - NONE */
/*****************************/
.ext-color-0,
.ext-ie .ext-color-0-ad,
.ext-opera .ext-color-0-ad {
color: #FFFFFF;
}
.ext-cal-day-col .ext-color-0,
.ext-dd-drag-proxy .ext-color-0,
.ext-color-0-ad,
.ext-color-0-ad .ext-cal-evm,
.ext-color-0 .ext-cal-picker-icon,
.ext-color-0-x dl,
.ext-color-0-x .ext-cal-evb {
background: #FFFFFF;
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#FFFFFF', EndColorStr='#B0C4DE', GradientType=1);
}

.ext-color-0-x .ext-cal-evb,
.ext-color-0-x dl {
border-color: Black !important;
}

/*****************************/
/* COLOR 1 - IMPORTANT */
/*****************************/
.ext-color-1,
.ext-ie .ext-color-1-ad,
.ext-opera .ext-color-1-ad {
color: #FF9484;
}

.ext-cal-day-col .ext-color-1,
.ext-dd-drag-proxy .ext-color-1,
.ext-color-1-ad,
.ext-color-1-ad .ext-cal-evm,
.ext-color-1 .ext-cal-picker-icon,
.ext-color-1-x dl,
.ext-color-1-x .ext-cal-evb {
background: #FF9484;
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#FFFFFF', EndColorStr='#FF9484', GradientType=1);
}

.ext-color-1-x .ext-cal-evb,
.ext-color-1-x dl {
border-color: Black;
}

/*****************************/
/* COLOR 2 - Business */
/*****************************/
.ext-color-2,
.ext-ie .ext-color-2-ad,
.ext-opera .ext-color-2-ad {
color: #849CE7;
}
.ext-cal-day-col .ext-color-2,
.ext-dd-drag-proxy .ext-color-2,
.ext-color-2-ad,
.ext-color-2-ad .ext-cal-evm,
.ext-color-2 .ext-cal-picker-icon,
.ext-color-2-x dl,
.ext-color-2-x .ext-cal-evb {
background: #849CE7;
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#FFFFFF', EndColorStr='#849CE7', GradientType=1);
}

.ext-color-2-x .ext-cal-evb,
.ext-color-2-x dl {
border-color: Black;
}

/*****************************/
/* COLOR 3 - Personal */
/*****************************/
.ext-color-3,
.ext-ie .ext-color-3-ad,
.ext-opera .ext-color-3-ad {
color: #A5DE63;
}
.ext-cal-day-col .ext-color-3,
.ext-dd-drag-proxy .ext-color-3,
.ext-color-3-ad,
.ext-color-3-ad .ext-cal-evm,
.ext-color-3 .ext-cal-picker-icon,
.ext-color-3-x dl,
.ext-color-3-x .ext-cal-evb {
background: #A5DE63;
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#FFFFFF', EndColorStr='#A5DE63', GradientType=1);
}

.ext-color-3-x .ext-cal-evb,
.ext-color-3-x dl {
border-color: Black;
}

/*****************************/
/* COLOR 4 - Vacation */
/*****************************/
.ext-color-4,
.ext-ie .ext-color-4-ad,
.ext-opera .ext-color-4-ad {
color: #E7E7D6;
}
.ext-cal-day-col .ext-color-4,
.ext-dd-drag-proxy .ext-color-4,
.ext-color-4-ad,
.ext-color-4-ad .ext-cal-evm,
.ext-color-4 .ext-cal-picker-icon,
.ext-color-4-x dl,
.ext-color-4-x .ext-cal-evb {
background: #E7E7D6;
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#FFFFFF', EndColorStr='#E7E7C7', GradientType=1);
}

.ext-color-4-x .ext-cal-evb,
.ext-color-4-x dl {
border-color: Black;
}

/*****************************/
/* COLOR 5 - Must Attend */
/*****************************/
.ext-color-5,
.ext-ie .ext-color-5-ad,
.ext-opera .ext-color-5-ad {
color: #FFB573;
}
.ext-cal-day-col .ext-color-5,
.ext-dd-drag-proxy .ext-color-5,
.ext-color-5-ad,
.ext-color-5-ad .ext-cal-evm,
.ext-color-5 .ext-cal-picker-icon,
.ext-color-5-x dl,
.ext-color-5-x .ext-cal-evb {
background: #FFB573;
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#FFFFFF', EndColorStr='#FFB573', GradientType=1);
}

.ext-color-5-x .ext-cal-evb,
.ext-color-5-x dl {
border-color: Black;
}

/*****************************/
/* COLOR 6 - Travel Required */
/*****************************/
.ext-color-6,
.ext-ie .ext-color-6-ad,
.ext-opera .ext-color-6-ad {
color: #84EFF7;
}
.ext-cal-day-col .ext-color-6,
.ext-dd-drag-proxy .ext-color-6,
.ext-color-6-ad,
.ext-color-6-ad .ext-cal-evm,
.ext-color-6 .ext-cal-picker-icon,
.ext-color-6-x dl,
.ext-color-6-x .ext-cal-evb {
background: #84EFF7;
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#FFFFFF', EndColorStr='#84EFF7', GradientType=1);
}

.ext-color-6-x .ext-cal-evb,
.ext-color-6-x dl {
border-color: Black;
}

/*****************************/
/* COLOR 7 - Needs Preparation */
/*****************************/
.ext-color-7,
.ext-ie .ext-color-7-ad,
.ext-opera .ext-color-7-ad {
color: #D6CE84;
}
.ext-cal-day-col .ext-color-7,
.ext-dd-drag-proxy .ext-color-7,
.ext-color-7-ad,
.ext-color-7-ad .ext-cal-evm,
.ext-color-7 .ext-cal-picker-icon,
.ext-color-7-x dl,
.ext-color-7-x .ext-cal-evb {
background: #D6CE84;
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#FFFFFF', EndColorStr='#D6CE84', GradientType=1);
}

.ext-color-7-x .ext-cal-evb,
.ext-color-7-x dl {
border-color: Black;
}

/*****************************/
/* COLOR 8 - BirthDay */
/*****************************/
.ext-color-8,
.ext-ie .ext-color-8-ad,
.ext-opera .ext-color-8-ad {
color: #C6A5F7;
}
.ext-cal-day-col .ext-color-8,
.ext-dd-drag-proxy .ext-color-8,
.ext-color-8-ad,
.ext-color-8-ad .ext-cal-evm,
.ext-color-8 .ext-cal-picker-icon,
.ext-color-8-x dl,
.ext-color-8-x .ext-cal-evb {
background: #C6A5F7;
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#FFFFFF', EndColorStr='#C6A5F7', GradientType=1);
}

.ext-color-8-x .ext-cal-evb,
.ext-color-8-x dl {
border-color: Black;
}

/*****************************/
/* COLOR 9 - Anniversary */
/*****************************/
.ext-color-9,
.ext-ie .ext-color-9-ad,
.ext-opera .ext-color-9-ad {
color: #A5CEC6;
}
.ext-cal-day-col .ext-color-9,
.ext-dd-drag-proxy .ext-color-9,
.ext-color-9-ad,
.ext-color-9-ad .ext-cal-evm,
.ext-color-9 .ext-cal-picker-icon,
.ext-color-9-x dl,
.ext-color-9-x .ext-cal-evb {
background: #A5CEC6;
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#FFFFFF', EndColorStr='#A5CEC6', GradientType=1);
}

.ext-color-9-x .ext-cal-evb,
.ext-color-9-x dl {
border-color: Black;
}

/*****************************/
/* COLOR 9 - Anniversary */
/*****************************/
.ext-color-10,
.ext-ie .ext-color-10-ad,
.ext-opera .ext-color-10-ad {
color: #FFE773;
}
.ext-cal-day-col .ext-color-10,
.ext-dd-drag-proxy .ext-color-10,
.ext-color-10-ad,
.ext-color-10-ad .ext-cal-evm,
.ext-color-10 .ext-cal-picker-icon,
.ext-color-10-x dl,
.ext-color-10-x .ext-cal-evb {
background: #FFE773;
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#FFFFFF', EndColorStr='#FFE773', GradientType=1);
}

.ext-color-10-x .ext-cal-evb,
.ext-color-10-x dl {
border-color: Black;
}

.panelAgenda .x-panel-header {
font-size : 13px;
text-align : center !important;
padding-left : 10px;
font-family : helvetica, arial, sans-serif;
color : #455C6F !important;
background : #D0DEF0 !important;
}


</style>

Daniil
Apr 16, 2012, 11:19 PM
Hi,

I was able to achieve it using the followin CSS.

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">
.ext-color-3-x .ext-cal-evb,
.ext-color-3-ad .ext-cal-evm,
.ext-color-3-ad,
.ext-color-3-x dl {
border-color: black !important;
}

.x-gecko .ext-cal-evr {
border: 1px solid;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" Namespace="CompanyX" />
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:CalendarPanel runat="server">
<EventStore runat="server">
<Events>
<ext:EventModel
Title="My event"
StartDate="2012/4/18"
EndDate="2012/4/19"
CalendarId="3" />
</Events>
</EventStore>
</ext:CalendarPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>

supera
Apr 17, 2012, 12:00 PM
Works fine...

thanks a lot, Daniil.