border for dropdown

[jose lara]

Hi, under "overview" section, the dropdown list in this example has border on all four sides- https://www.syncfusion.com/angular-ui-components/angular-dropdown-list

But, I only see a bottom border when I use the dropdown component. How can I get all four borders?

[Sevvandhi Nagulan]

Hi Jose, 

Greetings from Syncfusion support. 

While checked the reported issue, icon background color is overlapped with the wrapper of the component. This is the already known issue in fabric theme on chrome browser. So, please use the below work around solution to get rid of the reported issue DropDownList component. 

    .e-input-group .e-input-group-icon, 

    .e-input-group.e-control-wrapper .e-input-group-icon { 

        background: none; 

    } 

 

    .e-input-group:not(.e-disabled) .e-input-group-icon:hover, 

    .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover { 

        border-bottom: 0.15px solid #767676; 

    } 

 

    .e-input-group.e-input-focus:not(.e-disabled) .e-input-group-icon:hover, 

    .e-input-group.e-input-focus.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover { 

        border-bottom: 0.50px solid #0078d6; 

    } 

Please find the sample from the below link. 

Sample Link: https://stackblitz.com/edit/angular-vkjdrp-4rywed?file=app.component.css 

  

Regards, 

Sevvandhi N