Styling Dropdown List created using NativeScript-Drop-Down plugin

[phatakrajan]

I am trying to style a dropdown created using NativeScript-Drop-Down plugin in such a way that i should be seeing only border at bottom with grey color. I tried doing it via CSS by taking border-color and border properties (with different combinations). However i was unable to get it. Here is what i am trying to achieve.

Can you please suggest on how can i style the dropdown?

Here is my html

<DropDown [items]="itemSource" (selectedIndexChanged)="onchange($event)" (opened)="onopen()" (closed)="onclose()" class="item-drop-down" verticalAlignment="center"></DropDown>

Here is CSS

.item-drop-down{
    font-size: 20;
    height: 40;
    padding: 4;
    width: 100%;
    border: 2;
    border-color:#D3D3D3;
}

Nativescript playground URL where my sample code resides.

https://play.nativescript.org/?template=play-ng&id=4ca5Yw&v=1

[Peter Staev]

Hey @phatakrajan , couple of problems with your playground:

1. You have not imported the DropDownModule as it is explained in the Readme for the plugin
2. The shorthand border operator does NOT work in {N}. You need to use the border-width and border-color style properties.

See the updated playground: https://play.nativescript.org/?template=play-ng&id=4ca5Yw&v=4

[phatakrajan]

Hi @PeterStaev

1. Probably i did not save module file and hence DropDownModule was not available. However i was not facing problem showing the dropdown.
2. As you mentioned, i corrected issue w.r.t. border. However problem was that as soon as i added the border-bottom-width: 2 and border-bottom-color: #D3D3D3, i could get bottom border but lost the caret sign. Can you please guide me on how to bring it back? I have updated playground.

[Peter Staev]

This is a know issue not relative you {N}. You can see this comment for a workaround: #91 (comment)

[Peter Staev]

No further response so closing this one for now.