Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Former Member


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);
}
3 Comments