Design Studio: Fix Layout after Migration to SAPUI5 m Mode

Have you ever used the Tool “Migrate to SAPUI5 m mode” and wondered why your applications layout looks messed up after the conversion?

As you might know, SAPUI5 renders its components larger in m mode to increase ease of use on mobile devices and touch screens.

However, there exists a property named “Compact Form Factor” in the Display Properties of any m application. This property is enabled by default and – as the name suggests – renders all components more compact, to match the style you’re used to.

But still, this doesn’t quite do the trick for some applications, as many components are yet slightly larger as they were in the first place.

To fix this, you can include the following lines of CSS into your application. This will render most of the components as they did before the migration to m mode.

To do this, follow these few steps:

• Select your Application in the Outline
• In the properties view under the group “Display” find “Custom CSS” and click “Edit Custom CSS…” (The pencil icon)
• If you don’t have a custom CSS file yet, you’ll get prompted to select or create one. After you did, just paste the lines below and save it.
• If you already have a file with custom CSS, paste the following lines above your own custom CSS.

.sapMBtnContent {
    font-size: 12px;
}
.sapMBtnInner {
    padding: 0 7px !important;
}
.sapMBtn > div > span {
    position: relative !important;
    display: inline-block;
    left: auto !important;
    right: auto !important;
}
.sapMBtn > div > span: nth-of-type(1) {
    margin-top: -1px;
}
.sapMBtn > div > span.sapUiIcon {
    margin-left: 0 !important;
    margin-right: 8px !important;
    width: 24px !important;
    height: 18px !important;
}
.sapMCb > div {
    top: 0 !important;
    left: 0 !important;
    margin: 4px 1px;
    line-height: 12px !important;
    font-size: 12px !important;
    height: 11px !important;
    width: 11px !important;
    margin-left: 0;
    border-color: #cccccc !important;
}
.sapMCb:hover > div {
    border-color: #007dc0 !important;
}
.sapMCbLabel {
    font-size: 12px !important;
    line-height: 22px !important;
    margin-left: -22px;
    padding-left: 22px;
    color: #000000 !important;
}
 label: not(.sapMLabelMaxWidth).sapMCbLabel {
    box-sizing: border-box;
}
.sapMCb {
    line-height: 22px !important;
    height: 22px !important;
    padding-left: 22px !important;
}
.sapMCb: not(.sapMCbBgDis).sapMCbHasLabel:focus:before, .sapMRb:focus:before {
    top: 0!important;
    right: 0!important;
    bottom: 0!important;
    left: 0!important;
}
.zenControl > .sapMInputBaseInner {
    height: 22px !important;
    font-size: 12px !important;
    padding-left: 5px !important;
}
.zenControl.sapMInputBase {
    height: 22px !important;
    padding: 0 !important;
}
.zenControl > .sapMInputValHelp {
    top: 1px !important;
    width: 20px !important;
    height: 20px !important;
}
.zenControl > .sapMInputValHelp > .sapUiIcon {
    width: 20px !important;
    height: 20px !important;
    line-height: 20px;
}
.sapMSelectListItemBase {
    font-size: 12px !important;
    height: 19px !important;
    line-height: 19px !important;
    padding-left: 6px;
}
.sapMSlt {
    height: 22px !important;
    margin: 0 !important;
    line-height: 22px !important;
}
.sapMSltLabel {
    line-height: 20px !important;
    font-size: 12px !important;
    padding-left: 5px !important;
}
.sapMSltArrow {
    width: 20px !important;
    line-height: 20px !important;
    font-size: 12px !important;
    font-weight: bold;
}
.sapMSelectList {
    border: 1px solid #BFBFBF;
    padding: 1px 0;
}
.zenControl > .sapMScrollContScroll > .sapMList .sapMLIB {
    height: 19px !important;
    padding: 0 6px !important;
    border-bottom: 0 !important;
    line-height: 15px;
}
.sapMSLITitleOnly {
    font-size: 12px !important;
    color: #000000 !important;
}
.sapMScrollCont.sapMScrollContV.zenControl {
    box-sizing: border-box;
}
.zenControl > .sapMScrollContScroll > .sapMList {
    padding: 1px 0 !important;
}
.sapMRb {
    height: 22px !important;
    width: 100% !important;
}
.sapMRbB {
    margin: 3px 0 0 0 !important;
    height: 11px !important;
    width: 11px !important;
}
.sapMRbBLabel {
    height: 22px !important;
    line-height: 22px !important;
    font-size: 12px !important;
    width: 100% !important;
    padding-left: 22px !important;
    color: #000000 !important;
}
.sapMRbB > .sapMRbBOut {
    line-height: 22px !important;
    margin: 0 !important;
    height: 9px !important;
    width: 9px !important;
    border-width: 2px !important;
    border-color: #cccccc !important;
    margin-left: -1px !important;
}
.sapMRb:hover .sapMRbBOut {
    border-color: #007dc0 !important;
}
.sapMRbB .sapMRbBInn {
    height: 2.5px !important;
    width: 2.5px !important;
    margin: 2.3px !important;
}
.sapMText {
    font-size: 12px !important;
    line-height: 18px !important;
}
.sapzeninfofeedingM {
    border: 1px solid #cccccc;
}
.feedingContainer {
    border-radius: 2px;
}
.feedContainer {
    border: 1px solid #cccccc !important;
}
.feedTypeTitle {
    color: #000000 !important;
}
.feeding-id-label {
    text-transform: none !important;
    font-size: 12px !important;
}
.feeding-sortable-item {
    padding-top: 0 !important;
}
.sapzeninfofeedingM .bucketContainer + .bucketContainer {
    border-top: 1px solid #96a8c3 !important;
}
.viz-controls-switchbar-dropdown-arrow-icon {
    font-size: 12px;
}
div.sapMSltPicker {
    box-shadow: 0 4px 17px rgba(0,0,0,0.4);
}