NavigationBar auto-fitting doesn't use all the available space

[claudiobosticco]

SmartClient Version: SNAPSHOT_v11.1d_2016-12-15/Enterprise Development Only (built 2016-12-15)

Chrome on OSX, Safari on iOS 10.2

Hello, I feel that the NavigationBar auto-fitting doesn't use all the available space, at least when the rightButton is not used/shown.

Please modify #navigationBarMobileSample like this (use the 'dense' setting):

isc.NavigationBar.create({
    ID : "navBar",
    width : 296,
    autoDraw : false,
    leftButtonTitle : "Employees",
    rightButtonTitle : "Action",
    showRightButton : false,
    title : "Fa Bai"
});

isc.FlowLayout.create({
    ID : "flowLayout",
    autoDraw : false,
    width : "100%",
    overflow:"visible",
    tileMargin : 5,
    tiles : [
        isc.IButton.create({
            title: "Izabella Chernyak FF",
            width : 150,
            click : function () {
                navBar.setTitle(this.getTitle());
            }
        }),
        isc.IButton.create({
            title: "Izabella Chernyak FF.",
            width : 150,
            click : function () {
                navBar.setTitle(this.getTitle());
            }
        })
    ]
});

isc.VLayout.create({
    width : "100%",
    members : [navBar, flowLayout]
});

then click "Izabella Chernyak FF": you'll see that there are at least 30 pixels free, on the right of the title.
But if you click "Izabella Chernyak FF.", where there's only a '.' more, it changes the leftButtonTitle to 'back'.

[Isomorphic]

See the docs on this - we will only shift a label to the right up to a certain maximum number of pixels. IOS does the same.

As far as a "." being the difference, obviously, there will be a point where one more character crosses the threshold.

[claudiobosticco]

thanks for the pointer to maxCenterOffset, I didn't recall of that.

But see those screenshot, from the showcase, taken on an iPhone 5, navigationBarMobileSample with showRightButton set to false:





besides that it looks odd to me that the first string is clipped, even if it would take less space than the second clipped string, but to me the first string doesn't seem off-centered by 40px (the default for maxCenterOffset).

[Isomorphic]

We don't see the same behavior on an iPhone 6S - instead the behavior matches the desktop version, where with showRightButton:false, none of the names in the sample cause an ellipsis.

Do you have another iOS device you can try? What's the iOS version on the device that isn't working as expected?

[claudiobosticco]

The iPhone 5 (real device) is updated to iOS 10.2.

But this is a screenshot using the simulator with iOS 10.1:

[claudiobosticco]

Now I've updated Xcode to iOS 10.2.
iPhone 5:



iPhone 6:

[claudiobosticco]

and this is an iPhone 6S (device), iOS 10.2:

[Isomorphic]

Thanks for reporting,
we have found that the DOM implementation of Safari in iOS 10.x is reporting an erroneous value for the Element.scrollWidth property, one pixel smaller than expected, what caused this problem.

We have applied a patch to our code to workaround this iOS issue, you'll find it applied to the development build from January 7th on.

Regards,
Isomorphic

[claudiobosticco]

SmartClient Version: SNAPSHOT_v11.1d_2017-01-09/Enterprise Development Only (built 2017-01-09)

I can confirm it's fixed, thank you very much.