Improper view of Date Picker

Hello All,

I am facing an issue with date picker which is working perfectly fine in 2-3 pages but in one page it i creating strange kind of issue.

Its being viewed like this..

The code is a s follows

     var oLayout_Control_Top_Left_date= new sap.ui.commons.layout.MatrixLayout({id : 'LeftTopLayoutdate', layoutFixed : true});

/*DatePicker 1*/

        var dateLabel = new sap.ui.commons.Label({id : 'daterange',text : 'From Date',design : sap.ui.commons.LabelDesign.Bold});

        // create model for from date

        var oModelFromDT = new sap.ui.model.json.JSONModel();

        oModelFromDT.setData({

        dateValue2: new Date()

        });

        // create DatePicker1 and bind to model

        var oDatePicker1 = new sap.ui.commons.DatePicker("date1",{

        width: "135px",

        value: {

        path: "/dateValue2",

        type: new sap.ui.model.type.Date({pattern: "yyyy-MM-dd"})

        }

        });

        oDatePicker1.attachChange(oController.doDisplaySelFromDate);

        oDatePicker1.setModel(oModelFromDT);

        dateLabel.setLabelFor(oDatePicker1);

oLayout_Control_Top_Left_date.createRow(oDatePicker1);

and I have placed it in main layout.

I have tried changing the size from 135 px to even 200 px the size in that case is increasing but the problem persists.

Please help....