Datebox issue in zk

I have a issue given below regarding datebox calender .When i use width="150px" its working fine and when i use width="300px" the the calender not properly display (given image)but my requirement width="300px" of datebox .

Anyone can give me any idea how can i resolve this issue .

enter image description here

Here's zul:

<datebox hflex="1" readonly="true" lenient="true"
    value="@bind(folderInfoData.folderInforecord.infoValueDateTime) "
    tooltiptext="@load(vm.getText('FolderInfoDetail:SELECT_DATE'))"
    mandatory="@load(folderInfoData.folderInforecord.valueRequired)"
    width="300px">
</datebox>

Solution

do this under the zk tag :

<style>
    div.z-calendar{
    width:429px;
    }
</style>

why 429px? because zk makes your box bigger than 300 px (you can inspect that with firebug) Now you can choose how big your columns will go.

Greetz chill.