Start Building Professional
Web Apps Today

Bugg: dhxCalendar in grid cell does not display year. A DIV stylesheet conflict?

Hi!
I have the dhxCalendar format in two cells in a grid. It works fine, even with localization.

However the year is not displayed in the calendar popup. I only see two tiny images, when hoovering the mouse over, seems like some css conflict. The month back an forward images are visible and work fine.
The year dropdown only works if clicking vary carefylly at one pixel between thw two tiny images.

I thought it was a path problem. However I have found what I think is a bug.

In my global CSS I have
DIV {
    font-family: tahoma;
    font-size: 11px;
}

If I take out the line "font-family: tahoma;" from above, the year displays correctly in the calendar popup !
However then I loose a lot of font css on the rest of the page.

Please explain what is needed to display the dhxCalendar popup correctly in a grid. I have experimented with all different paths to images and css, makes no difference.
Please explain why there is a DIV stylesheet conflict, and is there a workaround?
I would rather not change my global css.

Otherwise thanks for a good product.

Code:

<link rel="STYLESHEET" type="text/css" href="css/global.css">
<link rel="STYLESHEET" type="text/css" href="dhtmlxGrid/codebase/dhtmlxgrid.css">
<link rel="STYLESHEET" type="text/css" href="dhtmlxCalendar/codebase/dhtmlxcalendar.css">
    
<script src="dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
<script src="dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script src="dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
<script src="dhtmlxTreeGrid/codebase/dhtmlxtreegrid.js"></script>
<script src="dhtmlxGrid/codebase/ext/dhtmlxgrid_splt.js"></script>
<script src="dhtmlxGrid/codebase/ext/dhtmlxgrid_srnd.js"></script>
<script src="dhtmlxGrid/codebase/ext/dhtmlxgrid_fast.js"></script>
<script src="dhtmlxGrid/codebase/ext/dhtmlxtree_attrs.js"></script>
<script src="dhtmlxGrid/codebase/ext/dhtmlxgrid_undo.js"></script>
<script src="dhtmlxCalendar/codebase/dhtmlxcalendar.js"></script>
<script src="dhtmlxGrid/codebase/excells/dhtmlxgrid_excell_dhxcalendar.js"></script>

mygrid = new dhtmlXGridObject('gridbox');
mygrid.selMultiRows = true;
mygrid.setImagePath("dhtmlxGrid/codebase/imgs/");

mygrid.setHeader(header.headers);
mygrid.setInitWidths(header.widths)
mygrid.setColAlign(header.aligns)
mygrid.setColTypes(header.types);
mygrid.setColSorting(header.sorting);
mygrid.setColumnColor(header.colors)
mygrid.enableResizing(header.resizes);
mygrid.setColumnIds(header.idlist);
mygrid.setColumnsVisibility(header.visibility);

mygrid.setSkin("gray");
mygrid.setStyle("","","background-color:#FFFFFF;color:#000000;border:1px solid #000000;","background-color:#FFEEC2;");
mygrid.enableAlterCss("clR1", "clR2", false);
mygrid.enableCollSpan(true);

mygrid.setDelimiter(";")
mygrid.i18n.decimal_separator = gc_decimalsymbol;
mygrid.i18n.group_separator = gc_kdelimiter;

var d = lDoGetDateFormat(gc_dateformat, gc_datedelimiter);    
mygrid.setDateFormat(d);

mygrid.attachEvent("onRowSelect",lDoOnRowSelect);
mygrid.attachEvent("onEditCell", lDoOnEditCell);
mygrid.attachEvent("onCheck", lDoOnCheck);
mygrid.attachEvent("onKeyPress", lDoOnKeyPress);
mygrid.attachEvent("onGridReconstructed", lDoOnReconstructed);

mygrid.enableEditEvents(true, true, true);

mygrid.init();

var u = lDoGetXMLpath();
mygrid.loadXML(u);

You can still use your global css styles, just add one more rule , to restore correct behavior of calendar

    .dhtmlxcalendar div.planeYear{
        overflow:hidden !important;
        width:32px !important;
    }

OK, thanx that worked.