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 <[email protected]>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 <[email protected]> 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. >
