Support different CSS styles for items/span/popup

[PeterStaev]

This will allow to have different colors/spacing/etc. for the items and for the visual element showing the selected value: Related tasks: #44, #28,

UPDATE: Explanation of how to implement it in the current framework and the proposal for an enahncement: https://github.com/NativeScript/NativeScript/issues/4267

[weijyewang]

Hi, is this still in progress?

[PeterStaev]

@weijyewang , actually I haven't started on this yet 😄

[weijyewang]

@PeterStaev haha i see. Anyhow, nativescript plugins are quite limited and I'm glad that actually someone made this dropdown plugin. Looking forward to this feature. Cheers!

[corebreaker]

Hi @PeterStaev, i saw that this problem seems really difficult to fix, but is it possible for, at least, add a border on the dropdown list ?

[PeterStaev]

Hey @corebreaker , not sure what do you mean. Adding border should be working fine. Can you provide more explanation and a playground sample to better understand the problem.

[corebreaker]

Like on this image the blue border on the dropdown list:

[PeterStaev]

I see. Since this is android specific I dont think a good idea to add to the core plugin. So this this will be possible to be done once this issue is implemented. So you can add border to the items in the drop down but not to the visual element.

[corebreaker]

Ok thanks for the answer. It's not specific to Android, i need that for iOS too. But it's seem impossible at the moment. I think i'll found another solution in a non-native way like by using a HtmlView. That's a pity !

[PeterStaev]

For iOS what the plugin currently implements is what Apple suggests to use (hence this is what Safari uses when there is a <select /> in an HTML page). Basically using a web like drop down (like the one in your screenshot) is against Apple design guidelines so not a good idea to use 😄

[corebreaker]

Ah, it's true, you are right, so i'm going to migrate my project to ReactNative which has a good dropdown. :grinning:

[RickyLarsen]

@PeterStaev what is the status on this? It would be nice to be able to style the selected element in the popup similar to the material angular select element: https://material.angular.io/components/select/examples

[PeterStaev]

@RickyLarsen sadly not much work done. Long ago I started on this with the workaround given from the core {N} team, but sadly couldn't get it to work and did not have the time to debug what is the exact reason for it not to work. If I get a chance i could revisit and debug what is the reason, but for the time being, waiting for the core team to create a good way for plugins to be able to define styles for sub items.

[RickyLarsen]

For anyone out there who wants to add padding to the list while keeping the selected value in place, add a padding to the entire dropdown and apply a negative value margin:

padding-bottom: 15; margin-bottom: -10; padding-left: 18; margin-left: -14;

[PeterStaev]

This is now available in the new version of the plugin available in the ProPlugins NPM registry.

All future work of this plugin will be available exclusively as part of ProPlugins initiative. So if you want to get the latest updates/fixes/features make sure you subscribe to the service. You get all my plugins plus many of the most used and high quality plugins for a small monthly subscription fee.

[cwadrupldijjit]

This frustrates me a little. I understand the need for payment, but I can't afford another subscription service, particularly when this was used for a hobby project. I unfortunately can't make the jump to using ProPlugins. I think that before I would pay for it, I'd just rather clone and modify it myself.

I know there's a lot of belly-aching about people not supporting open-source projects, but from what I can tell, I would no longer consider that plugin "open-source" since it's no longer hosted in a way that all can see it.

Which makes sense if it is part of a service that you pay for, but frustrating since I know of no other dropdown UI component for NativeScript. I haven't used NativeScript for a while, so there very well may be another one by now, but if there isn't, that can be a little prohibitive for people who are looking at it for the first time and they have to implement everything themselves.

I think a better approach (though likely more difficult) would be to have a free version that has the basics to work with and get them used to it, then a paid version that gives more control, customizability, or something else that is worth the price.

At the very least, I'd expect this repo to be open and the code still available on NPM, albeit not updated or maintained. If not, then I hope that a new, non-premium one will surface.