Skip to Content
avatar image
Former Member

Grid Layout issue while using sap.m library


While using Grid in sap.m, i used default span L8 which sepcifies screen can be divided into 8 parts, but actually here i am using only two text fields, second text field is coming in next line. But my scenario is, i need to display it next to next in first line only.(which is not happening in Grid with L8 , its working fine with L6 ) .When i did some modifications in div class in console with span as L9, it is working fine ( Please find attached screen shot).

Please let me know how the Grid control works exaclty with two Text fields with span as L9.

We are trying the above scenario with below specified code.

var oLabelRspblty = new sap.m.Text({

  text : "Responsibilities :",

  design : "Bold"


  var oTextRspblty = new sap.m.Text(


  text : "Purpose of the Role Implement Design, Development, Validation and Support activities in line with architecture requirements; participate inKnowledge Management activities with the objective of ensuring the highest levels of ",


  var oGridJDRspblty = new sap.ui.layout.Grid({

  // binding: "{/data}",

  defaultSpan : "L6 M12 S12",

  width : "100%",

  content : [ oTextRspblty, oLabelRspblty ]


  return new sap.m.Page({

  title: "Title",

  content: [ oGridJDRspblty




Thanks in advance for Suggested solutions.



Grid issue.png (89.1 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Aug 10, 2015 at 02:47 PM

    I think you misinterpreted the values for L, M ans S

    A Grid takes up a fixed 12 columns, and with L, M and S you specify how many columns should be occupied per control for Large, Medium and Small viewport sizes.

    So specifying L8 means you occupy 8 columns for a control, leaving 4 columns for the remaining

    For instance, L3 = 4 columns on large

    M4 = 3 columns on medium

    S6 = 2 columns on small

    S12 = 1 column on small


    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Aug 10, 2015 at 01:05 PM

    Hi Himanshu,

    I am not sure if spans like L9 will work. Spans of L, M and S should be multiples of 12 for ideal layout designs.

    Please check out the following page for grid division patterns.

    Thanks - Anuraag

    Add comment
    10|10000 characters needed characters exceeded