Using two textArea in table layout gives weird behaviour - cn1 - codenameone

Question

I've couple of textfields and textArea in table layout. The 1st textArea works well but after that if the 2nd textArea is focused, the component goes way up and the text written in textArea is seen below the textArea. It happens in iOS devices only. It works pretty well in android devices.
Please have a look at the video here
Code:
Label nameLabel = new Label("New Owner Name* ");
TextField nameData = new TextField();
Label addressLabel = new Label("New Address* ");
TextField addressData = new TextField();
Label phnNoLabel = new Label("Phone No. ");
TextField phnData = new TextField();
phnData.setConstraint(TextField.NUMERIC);
Label contactNoLabel = new Label("New Mobile No.* ");
TextField contactData = new TextField();
contactData.setConstraint(TextField.NUMERIC);
Label emailLabel = new Label("New Email ");
TextField emailData = new TextField();
emailData.setConstraint(TextField.EMAILADDR);
Label reasonLabel = new Label("Reason* ");
TextArea reasonData = new TextArea();
reasonData.setRows(4);
reasonData.setUIID("TextField");
reasonData.setScrollVisible(false);
reasonData.getAllStyles().setAlignment(Label.LEFT);
Label remarksLabel = new Label("Remarks ");
TextArea remarksData = new TextArea();
remarksData.setRows(4);
remarksData.setUIID("TextField");
remarksData.setScrollVisible(false);
Button submitButton = new Button(" Submit ");
TableLayout tl = new TableLayout(7, 2);
Container testDriveContainer = new Container(tl);
testDriveContainer.add(tl.createConstraint().widthPercentage(35), nameLabel).add(tl.createConstraint().widthPercentage(65), nameData)
.add(tl.createConstraint().widthPercentage(35), addressLabel).add(tl.createConstraint().widthPercentage(65), addressData)
.add(tl.createConstraint().widthPercentage(35), contactNoLabel).add(tl.createConstraint().widthPercentage(65), contactData)
.add(tl.createConstraint().widthPercentage(35), phnNoLabel).add(tl.createConstraint().widthPercentage(65), phnData)
.add(tl.createConstraint().widthPercentage(35), emailLabel).add(tl.createConstraint().widthPercentage(65), emailData)
.add(tl.createConstraint().widthPercentage(35), reasonLabel).add(tl.createConstraint().widthPercentage(65), reasonData)
.add(tl.createConstraint().widthPercentage(35), (remarksLabel)).add(tl.createConstraint().widthPercentage(65), remarksData);
Container mainContainer = BoxLayout.encloseY(testDriveContainer, FlowLayout.encloseCenter(submitButton));
mainContainer.setScrollableY(true);
add(BorderLayout.CENTER, mainContainer);