Styling Dropdown List created using NativeScript-Drop-Down plugin

android

#1

I am trying to style a dropdown 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.

image

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

My HTML is

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

Here is my CSS

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

#2

This should work:

XML:

<GridLayout rows="auto" columns="*,10,auto" className="dropdown">
    <Label col="0" textWrap="false"/>
    <Label col="2" text="&#xf078;" fontFamily="FontAwesome"/>
</GridLayout>

CSS:

.dropdown {
    padding: 7 5 7 5;
    border-bottom-style: solid;
    border-bottom-width: 0.5;
    border-bottom-color: #808080;
}

#3

How does this behave like a dropdown?


#4

Your question was “Can you please suggest on how can i style the dropdown?” … this is how to style the dropdown.


#5

I believe you want to style the dropdown plugin, can you try reproducing the issue in playground so I may able to take a look.


#6

Here is the project https://play.nativescript.org/?template=play-ng&id=4ca5Yw


#7

Can you confirm which platform you are facing issues with?


#8

Android. Only problem is styling using CSS. I am able to get data in dropdown.


#9

Only thing which is missing in styling is bottom border. However i am not able to style the control. Can you please guide me on how do i find on which styles can be applied to this control?


#10

You supposed to use border-width not just border.


#11

With border-width, i lost my down arrow.


#12

If you don’t want to loose arrow but still style, you have to do it Android’s way using drawables and themes.


#13

Can you please elaborate or provide me some direction on how that can be achieved using nativescript?


#14

If you are not familiar with Android’s theming, google for Dropdown themes it would give you set of XMLs you will have to place them in your app resources.