It seems that you can initialise dialog with a given zIndex
And the default zIndex that I have in the js is zIndex: 1000
I just read the js and it seems to change between 1000 and 1001... I try
with 1002 in the .calendar css class of "web2py datepicker" and it works
find.
Don't know maybe adding a note in the css file of the "web2py datepicker"
near the z-index parameter should be done to inform user of what to do in
case of problem...
;-)
Richard
On Thu, Sep 8, 2011 at 5:11 PM, Richard Vézina
<ml.richard.vez...@gmail.com>wrote:
> .calendar{
> z-index: 100000000000;
> position: relative;
> display: none;
> border-right: 1px solid #808080;
> border-left: 1px solid #808080;
> border-bottom: 1px solid #808080;
> font-size: 11px;
> color: #9A9A9A;
> cursor: default;
> background: #fafaed;
> font-family: Arial, Helvetica,sans-serif;
> }
>
> SOLVED
>
> It maybe to much should check the dialog plugin and put just one value
> above...
>
> Richard
>
> On Thu, Sep 8, 2011 at 5:07 PM, Richard Vézina <
> ml.richard.vez...@gmail.com> wrote:
>
>> I have the same problem is you find a solution...
>>
>> I will try with z-index, but I am not sure if it will work, should pick
>> one upper the dialog plugin use if it's the source of the problem.
>>
>> Richard
>>
>>
>> On Thu, Sep 8, 2011 at 4:34 PM, Paul Gerrard
>> <p...@gerrardconsulting.com>wrote:
>>
>>> Hi,
>>>
>>> I used this css as is (although I did change the background colour to
>>> match my site. however... I'm using the dat picker on a field
>>> displayed in a jquerydialog. the datepicket pops up - behind the
>>> dialog box. I think the z-indexvalue needs bumping up (or is it
>>> down?)
>>>
>>> Looks good tho :O)
>>>
>>> On Sep 7, 7:23 am, annet <annet.verm...@gmail.com> wrote:
>>> > Hi David,
>>> >
>>> > I didn't like the calendar that comes with web2py, not for its
>>> > functionality but for its appearance. Instead of replacing it I just
>>> > restyled it:
>>> >
>>> > .calendar {
>>> > cursor: default;
>>> > background-color: #FFFFFF;
>>> > color: #444444;
>>> > font-size: 11px;
>>> > border: 1px solid #AAAAAA;
>>> > border-radius: 6px;
>>> > -webkit-border-radius: 6px;
>>> > -moz-border-radius: 6px;
>>> > padding: 6px;}
>>> >
>>> > .calendar table {
>>> > border-collapse: separate;
>>> > border-spacing: 2px;}
>>> >
>>> > .calendar thead {}
>>> > .calendar thead tr, .calendar thead .headrow {
>>> > background-color: #4169E1;
>>> > color: #444444;}
>>> >
>>> > .calendar thead .daynames {}
>>> > .calendar .button, .calendar thead .title {
>>> > color: #FFFFFF;
>>> > font-size: 12px;
>>> > text-align: center;
>>> > padding: 3px;}
>>> >
>>> > .calendar thead tr .hilite, .calendar thead tr .active, .calendar
>>> > thead .headrow .hilite, .calendar thead .headrow .active {
>>> > background-color: #FFFFFF;
>>> > color: #4169E1;
>>> > padding: 3px;}
>>> >
>>> > .calendar thead .daynames .hilite, .calendar thead .daynames .active {
>>> > background-color: #FFFFFF;
>>> > color: #444444;}
>>> >
>>> > .calendar thead .name {
>>> > background-color: #FFFFFF;
>>> > text-align: center;
>>> > padding: 3px;}
>>> >
>>> > .calendar tbody {}
>>> > .calendar tbody td {
>>> > text-align: right;
>>> > border: 1px solid #AAAAAA;}
>>> >
>>> > .calendar tbody td.hilite {
>>> > background-color: #777777;
>>> > color: #FFFFFF;}
>>> >
>>> > .calendar tbody td.active, .calendar tbody td.selected {
>>> > font-weight: bold;
>>> > background-color: #FFFFFF;
>>> > color: #4169E1;}
>>> >
>>> > .calendar tbody td.today {
>>> > font-weight: bold;
>>> > background-color: #4169E1;
>>> > color: #FFFFFF;}
>>> >
>>> > .calendar tbody .disabled {
>>> > color: #777777;}
>>> >
>>> > .calendar tbody .emptycell {
>>> > visibility: hidden;}
>>> >
>>> > .calendar tbody .emptyrow {
>>> > display: none;}
>>> >
>>> > .calendar tfoot .ttip {
>>> > background-color: #777777;
>>> > color: #FFFFFF;
>>> > text-align: center;
>>> > border: 1px solid #333333;
>>> > padding: 1px;}
>>> >
>>> > .calendar tfoot .hilite {
>>> > padding: 1px;
>>> > background-color:
>>> > #EEEEEE;}
>>> >
>>> > .calendar tfoot .active {
>>> > padding: 2px 0px 0px 2px;}
>>> >
>>> > .calendar .combo {
>>> > background-color: #FFFFFF;
>>> > position: absolute;
>>> > display: none;
>>> > width: 4em;
>>> > top: 0px;
>>> > left: 0px;
>>> > cursor: default;
>>> > border: 1px solid #DDDDDD;
>>> > padding: 1px;
>>> > z-index: 100;}
>>> >
>>> > .calendar .combo .label, .calendar .combo .label-IEfix {
>>> > text-align: center;
>>> > padding: 1px;}
>>> >
>>> > .calendar .combo .label-IEfix {
>>> > width: 4em;}
>>> >
>>> > .calendar .combo .active {
>>> > background-color: #CCCCCC;
>>> > color: #FFFFFF;
>>> > padding: 0px;}
>>> >
>>> > .calendar .combo .hilite {
>>> > background-color: #777777;
>>> > color: #FFFFFF;}
>>> >
>>> > .floatleft {
>>> > float: left;}
>>> >
>>> > .CP_over {
>>> > background-color: #FFFFFF
>>> > }
>>> >
>>> > Just another option ;-)
>>> >
>>> > Kind regards,
>>> >
>>> > Annet.
>>>
>>
>>
>
