Responsive Grid layout

[Former Member]

Dear all,

another day, another question

I've a sap.m.App application which is running fine.

On one view I've a page which embeds a form:

createContent : function(oController) {

     var oPage = new sap.m.Page("completePage", {
            title : "{i18n>titleMainView}"
     });

     var oTextReason = new sap.ui.commons.TextArea("textReason", {
           editable : true,
            required : true,
            rows : 3,
            width : '280px',
            wrapping : sap.ui.core.Wrapping.Hard,
            maxLength : 300
     });
     oTextReason.addStyleClass("myTextArea");

     var oFormElemReason = new sap.ui.layout.form.FormElement( {
            label : "{UIModel>/titleReason}",
            fields : [ oTextReason ]
     });

     var oFormContReason = new sap.ui.layout.form.FormContainer(
                "formContReason", {
                    title : "{UIModel>/title}",
                    formElements : [ oFormElemReason ]
     });

     var oLayout = new sap.ui.layout.form.ResponsiveGridLayout("L2");

     var oForm = new sap.ui.layout.form.Form("completeForm", {
            layout : oLayout,
            formContainers : [ oFormContReason ]
     });

     oPage.addContent(oForm);
     return oPage;

}

It looks ok when the screen width is bigger than 1000 pixels:

It also looks fine on mobile browsers:

But in between it just cut the label, so that they can't be read properly:

How can I avoid that the labels are cut like that?

Do I have to use layout parameters like labelSpanL etc.?

I tried that, but I didn't succeed...

Thanks in advance!

Best regards,

Thorsten.

[Former Member · Accepted solution]

Setting the parameter breakpointM did the trick:

var oForm = new sap.ui.layout.form.Form("completeForm", {
            layout : new sap.ui.layout.form.ResponsiveGridLayout( { breakpointM : 1150 } ),
            formContainers : [ oFormContReason ]
});