Show TOC

Visual DegradationsLocate this document in the navigation structure

Depending on the combination of device and browser, visual degradations may occur in the sap.m library.

The following sections give an overview of the known degradations.

sap.m.Text - maxLines (property), sap.m.Text - text (property), sap.m.ObjectListItem - title (property), sap.m.ObjectHeader - title (property)

The visual aid for indicating multiline overflow is an ellipsis at the end of a line. This ellipsis is displayed if the text string exceeds the maximum number of lines displayed on screen. Depending on the line-clamping support offered by your browser, this visual aid may not be displayed at all, meaning the text is simply truncated without any visual indication that it is incomplete. The table below outlines which browsers fail to support the multiline ellipsis handling of the maxLines property, and also shows examples of each visual degradation along with what the display should look like in each case:

Table 1: maxLines Visual Degradations
What it Should Look Like Visual Degradation
Google Chrome Mozilla Firefox Internet Explorer 10
placeholder Property in sap.m.Input and sap.m.TextArea

As there is no W3C specification for how to use the placeholder property, browser handling for this property varies greatly. Some browsers use a native placeholder property, but for browsers that do not support this, SAP implements its own placeholder version.

The following overview outlines which browsers use which version, and which limitations or degradations apply in each case for the sap.m.Input control and sap.m.TextArea control.

Table 2: placeholder Property in sap.m.Input
Browser Situation
Google Chrome Google Chrome supports the native placeholder property and displays the ellipsis correctly, indicating that the placeholder text stretches beyond the field that is currently visible
Internet Explorer Version 11 This version supports the native placeholder property but does not display the ellipsis, instead it simply truncates the placeholder text string
Note

If you focus in the field, the placeholder disappears from view. If you leave the focus without typing anything, the placeholder is then displayed again.

Mozilla Firefox Mozilla Firefox currently supports the native placeholder property and displays the ellipsis correctly, indicating that the placeholder text stretches beyond the field that is currently visible

Whereas sap.m.Input contains just a single line placeholder, sap.m.TextArea is a multiline control, meaning it brings with it different issues to the ones listed above. These issues are different depending on the browser and are listed below.

Table 3: placeholder Property in sap.m.TextArea
Browser Situation
Google Chrome Google Chrome supports the native placeholder property and displays multiple lines along with a scrollbar
Internet Explorer Version 11 This version does not use the native placeholder property, instead it uses the placeholder version developed by SAP. This browser displays multiple lines along with a scrollbar.
Note

Clicking the scrollbar sets focus from a technical perspective, meaning the placeholder text disappears and makes scrolling impossible. Scrolling with the mouse wheel does not set focus, and enables you to read the entire placeholder text.

Mozilla Firefox Mozilla Firefox supports the native placeholder property but does not display a scrollbar or an ellipsis, instead it simply truncates the placeholder text string
Issues Affecting sap.m.TextArea on iOS Devices
Note

There are several issues affecting iOS devices (as of version iOS 5), which are often mistakenly identified as errors relating to sap.m.TextArea rendering. These are not visual degradations relating to sap.m. These rendering errors are inherent to the iOS operating system as of version 5, and also occur even when SAPUI5 is not used at all, as shown in the examples below.

Problem

Description

When the text entered inside a text box is long and does not fit into the fixed visible text area, the cursor then appears outside of the visible text box, as shown in the graphic.

When choosing Select All to copy the contents of a text box on an iOS device, the selection marked in blue continues outside the boundaries of the visible text area, as shown in the graphic.