Fiori look and feel

[ChrisSislak]

Hi,

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

[masa_139]

Hi Chris,

Whats are differences? Can you share the detail?

Regards,

Masa / SAP Technology RIG

[saurabh_vakil]

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.

[ChrisSislak]

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

[saurabh_vakil]

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.

[ChrisSislak]

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}">-->
		<content>
			<sap.ui.layout.form:SimpleForm xmlns:sap.ui.layout.form="sap.ui.layout.form" editable="true" layout="ResponsiveGridLayout" id="__form0">
.
.
.