Arrow disappears after applying border style

[YeshanJay]

Hi, The arrow on the widget disappears after applying border styles on it. See the images below. Is there any way to keep both border and arrow?

CSS style:

DropDown {
    margin: 10;
    padding: 2 2;
    font-size: 16;

    border-color: #000;
    border-width: 1;
    border-style: solid;
}

Without border:

With border:

[PeterStaev]

Hey @YeshanJay , this is a known limitation of the spinner android widget (not relative to {N}).

As a workaround you can wrap the drop down in a StackLayout with horizontalAlignment="stretch" and apply the border on the layout.

[YeshanJay]

Hi @PeterStaev , Thanks a lot for the workaround. Makes me wonder why I couldn't think of that.. lol 😄

[DBhail]

How do you get rid of the underline within the dropdown (see image)? Tried the CSS to set bottom border to none but doesn't do anything. Would be nice to get rid of it:

  <StackLayout class="input-field">
    <Label text="Type" class="label font-weight-bold m-b-5" textWrap="true"></Label>
    <StackLayout horizontalAlignment="stretch" class="input input-border">
      <DropDown [disabled]="!isEditMode()" #ddtype [items]="typeSelectionItems" [(ngModel)]="typeSelectionIndex" [hint]="hint"
        (selectedIndexChanged)="onTypeSelectionChange($event)" backroundColor="white" color="black" class="drop-down">
      </DropDown>
    </StackLayout>
  </StackLayout>

.drop-down{ border: none; text-decoration: none; border-bottom-width: 0; border-bottom-color: white; border-bottom: none; }

[PeterStaev]

@DBhail the border is a default android style of the spinner. You can remove it AND the indicator on the right by using the hack to apply a border to the element:

.drop-down {
    border-color: white;
    border-width: 1;
    border-style: solid;
}