Search code examples
sapui5

Why are heights of some UI components smaller than usual?

I have created two apps and both has the same content.
App 1 is created with Flexbile Column Layout:
enter image description here

App 2 without:
enter image description here

As you recognized, UI components on App 2 are bigger than on App 1.

I am using the same controls on both:

<Page id="page" title="{i18n>title}">
  <FlexBox alignItems="Start" justifyContent="Center">
    <l:Grid containerQuery="true" defaultSpan="XL12 L12 M12 S12">
      <Label text=""/>
      <Text text="Hello Kitty"/>
      <Input placeholder="Enter your email address" id="email" type="Email" value="{confirm>/email}" liveChange="onHandleLiveChangeEmail"/>
      <Button type="Accept" enabled="{confirm>/enable}" text="Hello" press=".handlePressAuthorization" width="100%" />
    </l:Grid>
  </FlexBox>
</Page>

Unfortunately, I could not figure out where the differences are except App 1 runs with Flexible Column Layout.

Both apps are hosted on GitHub:

Solution

  • App 1 has sapUiSizeCompact in the class list of <body> (see index.html at line 34).

    App 2 doesn't have it, in which case the default density class is applied (sapUiSizeCozy).

    For more information and other density options, see the step Content Density from the walkthrough as well as the corresponding topic from the documentation.