Text displayed vertically on 2012 platform

Published 2014-10-28 | (Compatible with SDK 3.5,4.5,5.0,5.1 and 2012,2013,2014 models)

Different text alignment for elements with absolute position on 2012 platform

Contents

If all the layout elements have absolute position, regardless of parent/child dependencies, the text of the child elements may get displayed vertically on the 2012 platform. This happens because the 2012 Webkit browser behaves in a different way when the parent element does not have the width property set.

Source Files

Note

The files needed for the sample application are here.

Webkit 2012

The text inside child element gets displayed vertically. This happens because when parent width is not defined, then child width is set to minimum.

Figure 1. Webkit - text displayed vertically

Maple 2010-2011

The text is displayed properly, as child elements width is set to possible maximum.

Figure 2. Maple - text is displayed properly

Solution

Set the width of the parent element to 100% in order to make the text displayed correctly.

Bad example

<div style="position: absolute; top: 88px; left: 720px; height: 40px; background-color: #fa0;">
    <div style="position: absolute; left: 42px;">Some text</div>
    <div style="position: absolute; left: 157px;">Some other text</div>
</div>

Good example

<div style="position: absolute; top: 88px; left: 720px; height: 40px; background-color: #fa0; width: 100%;">
    <div style="position: absolute; left: 42px;">Some text</div>
    <div style="position: absolute; left: 157px;">Some other text</div>
</div>