Skip to Content

Fiori look and feel

Mar 28, 2017 at 11:37 AM


avatar image
Former Member


I'm using an standard Fiori Master Detail template. But I'm a little bit confused by the look and feel within the browser.

E.g. the input fields look not very fancy:

If one switch to mobile view, the field get a different behaviour, is there any chance to have the same behaviour even within the browser view?

Thanks, Chris

1.jpg (50.3 kB)
2.jpg (62.2 kB)
10 |10000 characters needed characters left characters exceeded

Hi Chris,

Whats are differences? Can you share the detail?


Masa / SAP Technology RIG

* Please Login or Register to Answer, Follow or Comment.

1 Answer

saurabh vakil Mar 29, 2017 at 06:38 AM

What exactly do you expect the look and feel to be in the desktop view? I basically don't see any look and feel difference in the screen shots you have posted.

Show 3 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Of course there are differences, you can see them in the margin / padding of the input fields... that's just on difference.

info.jpg (62.3 kB)

When you are on the desktop view, try resizing the browser window bit by bit and see if you can see similarities with the mobile view. If you are using responsive layouts then the view should become similar to the mobile view as the screen width decreases.

The very basic difference between these 2 views s obviously the screen resolution. For e.g. when you view the page on a desktop screen it takes up most of the available screen width (unless you have explicitly specified a width) but the same screen appears with different margin and padding values.

Former Member
saurabh vakil

Hi, even the screen rezizing didn't helped. As you can see from the screenshot, I shrinked the browser window. What I'm confused about is, that the select field (first red stroke) is even smaller then the select-options (second red stroke). This is an standard Fiori Master - Detail template:

<mvc:View xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:footerbar="sap.ushell.ui.footerbar" controllerName="db.spi.geoviewer.controller.LineItem">
	<Page id="page3" navButtonPress="onNavBack" showNavButton="true" title="{TitelWc}">
		<!--busy="{lineItemView>/busy}" busyIndicatorDelay="{lineItemView>/delay}">-->
			<sap.ui.layout.form:SimpleForm xmlns:sap.ui.layout.form="sap.ui.layout.form" editable="true" layout="ResponsiveGridLayout" id="__form0">
info2.jpg (69.6 kB)