[TIMOB-19236] iOS: Set font size on Label will cause different size

GitHub Issue	n/a
Type	Bug
Priority	Low
Status	Open
Resolution	Unresolved
Affected Version/s	n/a
Fix Version/s	n/a
Components	iOS
Labels	n/a
Reporter	Ethan Chen
Assignee	Unknown
Created	2015-06-23T08:22:07.000+0000
Updated	2018-02-28T19:55:47.000+0000

Description

<Alloy>
    <Window>
        <ScrollView class="container" scrollType="vertical">
            <Widget src="schedules" name="time_picker_24" id="time_picker" />
        </ScrollView>
    </Window>
</Alloy>

".container": {
    top: '50dp',
    left: '30dp',
    right: '30dp',
    width: Ti.UI.FILL,
    contentWidth: Ti.UI.FILL,
    height: Ti.UI.SIZE,
    layout: 'vertical'
}

$.index.open();

<Alloy>
    <Picker id="time_picker_24">
        <PickerColumn>
            <PickerRow value="00" platform="ios"><Label text="00" class="label-hour" /></PickerRow>
            <PickerRow value="01" platform="ios"><Label text="01" class="label-hour" /></PickerRow>
            <PickerRow value="02" platform="ios"><Label text="02" class="label-hour" /></PickerRow>
            <PickerRow value="03" platform="ios"><Label text="03" class="label-hour" /></PickerRow>
            <PickerRow value="04" platform="ios"><Label text="04" class="label-hour" /></PickerRow>
            <PickerRow value="05" platform="ios"><Label text="05" class="label-hour" /></PickerRow>
            <PickerRow value="06" platform="ios"><Label text="06" class="label-hour" /></PickerRow>
            <PickerRow value="07" platform="ios"><Label text="07" class="label-hour" /></PickerRow>
            <PickerRow value="08" platform="ios"><Label text="08" class="label-hour" /></PickerRow>
            <PickerRow value="09" platform="ios"><Label text="09" class="label-hour" /></PickerRow>
            <PickerRow value="10" platform="ios"><Label text="10" class="label-hour" /></PickerRow>
            <PickerRow value="11" platform="ios"><Label text="11" class="label-hour" /></PickerRow>
            <PickerRow value="12" platform="ios"><Label text="12" class="label-hour" /></PickerRow>
        </PickerColumn>
        <PickerColumn>
            <PickerRow value="00" platform="ios"><Label text="00" class="label-minute" /></PickerRow>
            <PickerRow value="01" platform="ios"><Label text="01" class="label-minute" /></PickerRow>
            <PickerRow value="02" platform="ios"><Label text="02" class="label-minute" /></PickerRow>
            <PickerRow value="03" platform="ios"><Label text="03" class="label-minute" /></PickerRow>
            <PickerRow value="04" platform="ios"><Label text="04" class="label-minute" /></PickerRow>
            <PickerRow value="05" platform="ios"><Label text="05" class="label-minute" /></PickerRow>
            <PickerRow value="06" platform="ios"><Label text="06" class="label-minute" /></PickerRow>
            <PickerRow value="07" platform="ios"><Label text="07" class="label-minute" /></PickerRow>
            <PickerRow value="08" platform="ios"><Label text="08" class="label-minute" /></PickerRow>
            <PickerRow value="09" platform="ios"><Label text="09" class="label-minute" /></PickerRow>
            <PickerRow value="10" platform="ios"><Label text="10" class="label-minute" /></PickerRow>
            <PickerRow value="11" platform="ios"><Label text="11" class="label-minute" /></PickerRow>
            <PickerRow value="12" platform="ios"><Label text="12" class="label-minute" /></PickerRow>
        </PickerColumn>
    <Picker>
</Alloy>

"Label": {
    width: Ti.UI.FILL,
    font: {
        fontSize: '30dp'
    }
}

".label-hour": {
    right: '15dp',
    textAlign: Ti.UI.TEXT_ALIGNMENT_RIGHT
}

".label-minute": {
    left: '15dp',
    textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT
}

The font size of Label with text 03 will look different to Label with text 11

Attachments

File	Date	Size
scrollview.png	2015-07-09T06:36:49.000+0000	29359
view.png	2015-07-09T06:36:48.000+0000	30939

Comments

Ethan Chen 2015-06-23

New update: While I remove the Label style on TSS, the font size still have different look.
Ethan Chen 2015-07-02

Any update here? It's very critical for me.
Radamantis Torres-Lechuga 2015-07-03

[~ethancfchen] we can not replicate the issue that you're seeing, can you help us trying to reproduce the issue? Thanks
Ethan Chen 2015-07-07

New update: This picker is in a widget. When I set width: Ti.UI.FILL, this problem will happened, and it seems that the font is not working.
Ethan Chen 2015-07-07

Finally, I found the problem. I use a ScrollView wrapped outside the widget, then the problem shows up. I will update the description in this issue.
Ethan Chen 2015-07-07

If I change ScrollView to View, the problem will not happen
Ethan Chen 2015-07-08

I already updated the description, please try it to replicate the issue.
Papia Chowdhury 2015-07-08

Hi , We have retested the update test code. Still the font size works perfectly. Please find the link below. [http://oi58.tinypic.com/2iw0vx4.jpg]. *Steps to reproduce:* 1. Create an Alloy project 2. Copy index.xml, index.js, index.tss to respective folders 3. Create an Alloy widget named schedules 4. Copy time_picker_24.tss and time_picker_24.xml to respective folders 5. Run the app *Testing Environment:* Appcelerator Studio, build: 4.1.0.201507031129 Alloy version: 1.6.2 Titanium SDK: 4.0.0 GA iOS simulator: iphone 5s(v8.1) OS X version: 10.9.5 Thanks.
Ethan Chen 2015-07-08

Yes, I already do that, a new and clean project, still find the problem. But my Alloy is in 1.6.0 version by the way.
Ethan Chen 2015-07-09

I think the problem is contentWidth: Ti.UI.FILL at .container, when I remove it, the problem gone, but the display is looking so wrong. To prove this problem is really exist, I take a screenshot again, Using ScrollView with contentWidth: Ti.UI.FILL is like !scrollview.png|thumbnail! Using View is like !view.png|thumbnail!
Motiur Rahman 2015-07-10

Hello [~ethancfchen] just remove the left and right property from the .container it will work like a charm. Or if you would like to use left and right property just remove contentWidth. Thanks
Ethan Chen 2015-07-10

I'd like to set left and right to those Label to make the Picker look like more close to the center. I think you should resolve the problem except providing a method to avoid the problem. Thanks.

JSON Source