Changes in v3

[lukeramsden]

Are there any breaking changes or things to keep in mind when upgrading?

[PeterStaev]

@lukeramsden , there should be no breaking changes, except that the ValueList class has been moved to the plugin and has a bit of a different structure. But if you have the old one locally it should still work.

[toddanglin]

I noticed that the CSS styles applied to the DropDown label now also apply to the spinner style (on iOS, at least). I don't think the spinner inherited these styles pre-3.0.

To that end, is there a way to apply different CSS to the label and spinner? I'm specifically trying to get the spinner to center-align text while the label right-aligns text.

Otherwise, seems to work fine 3.0 on iOS (using with the "old" local ValueList).

[PeterStaev]

Hey @toddanglin , the inherited styles have been like that since quite a while. It is not something added in the 3.0 version. Sadly currently the widget does not support setting different style on the control and the popup. Similar thing is requested in #44 , so you can keep track of that issue.

[toddanglin]

Interesting. The DropDown styles definitely behave differently for me since upgrading my app to 3.0.0. Previously, the text in the "spinner" (on iOS) was always centered, regardless of the text orientation of the TextField. I wonder if something changed in NativeScript 3.0 that is causing styles to be calculated differently in the DropDown?

Either way, what would you suggest for those cases where you need to right- or left-align text in the TextField but still want the drop down spinner text to remain centered (this is especially pronounced on tablet UI where left/right alignment in the spinner is unexpected)? Should this be possible?

Thanks, Peter! This is definitely one of my "most used" non-core widgets. :)

[PeterStaev]

Hmm, my only other guess was that there was a bug in the previous version for iOS where the styles were not applied fully correctly on the popup. And seems with the migration to 3.0 this bug was fixed 😄

As a workaround for the time being, while I find some nice way to implement the label only/popup only styles, try the following: Apply text-align: center to the drop down and then:

const dd = page.getViewById<DropDown>("dd");
dd.ios.textAlignment = NSTextAlignment.Left;

In your pageLoaded / navigatingTo handler. This should override the default styles that are applied in the widget. But note that those will be reset if you change the styles of the drop down via binding/code. So you will have to override them again after you changed the styles.

[toddanglin]

Thanks, Peter!

I have applied this workaround it seems to do the trick! I now have different text alignment for my TextField and the drop down spinner (similar to how the drop down behaved in 2.5). Thanks for the quick tip.

[KevinBeckers]

Hi @PeterStaev How should I do this in angular?

const dd = page.getViewById<DropDown>("dd");
dd.ios.textAlignment = NSTextAlignment.Left;

I cant resolve NSTextAlignment.Left

[PeterStaev]

@KevinBeckers, in order to recognize the native things (like NSTextAlignment) you need to install tns-platform-declarations so simply npm install -D the module in your project and follow the instructions in the readme on how to set them up in your project - https://www.npmjs.com/package/tns-platform-declarations . Then you get the drop down reference as you do with any other angular control - with ViewChild, etc.

[KevinBeckers]

@PeterStaev Thank you, that did the trick. But the alignment also affects the input. Is there a way to only align the picker?

[PeterStaev]

@KevinBeckers , read thoroughly my comment above for the workaround: https://github.com/PeterStaev/NativeScript-Drop-Down/issues/93#issuecomment-303311562. I suspect you did not apply the text align center thing to the widget.

[vasudevpareek07]

@PeterStaev, how do I change the style only for dropdown placeholder with Angular. I tried with ViewChild, it is not working.