Search code examples
sapui5

How to Wrap CheckBox Labels

I'm using sap.m to build a simple mobile app. I've made a VBox to hold a few check boxes and embedded it in a Page.

The width of the box is neatly the width of the screen (320px in the iPhone 5 device mode on Chrome). The labels of the checkboxes do not adhere to this width and simply grow beyond. 

var oTicks = new sap.m.VBox();
oTicks.addItem(new sap.m.CheckBox({
    name: 'name',
    text: 'Are the tools and equipment I am going to use in safe working order?'
}));

As you can see in the screenshot here, the label of the third check box is > 320px (it's 454 to be exact).

checkbox

Is there any way I can "wrap" the label so that it pushes the other items down, and fits the text inside the box?

Solution

  • You can add a StyleClass to the CheckBox and use white-space: normal. SAPUI5 automatically put white-space: to no-wrap.

    Edited to Jorgs final solution!

    Example:

    oTicks.addStyleClass('YourClassName');

    In CSS:

    .YourClassName label {
   white-space: normal;
   line-height: normal;
   vertical-align: middle;
}