kayasa kayasa - 2 months ago 19
CSS Question

Reduce spacing between items - multi select dropdown

I am using https://github.com/softsimon/angular-2-dropdown-multiselect to create a multi select dropdown in angular 4.

I would like to change the padding on items that appear in the dropdown. From developer tools, it seems padding is set to 3px and 20px

.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}


Is there a way that I can apply a custom CSS on items to get rid of the padding. If I override 'dropdown-menu>li>a' in my CSS, then it could impact other elements as well

.dropdown-menu>li>a {
display: block;
padding: 1px 5px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}


Elements with spacing

the area highlighted in black is the whitepsace that I would like to get rid of.

Answer Source

You have to override the style but make sure that you wrap it inside another class so that it would be applied only within that class.

For example: HTML:

<div class="customDropdown">
 //Use drop down here
</div>

CSS:

    .customDropdown .dropdown-menu>li>a {
        display: block;
        padding: 1px 5px;
        clear: both;
        font-weight: 400;
        line-height: 1.42857143;
        color: #333;
        white-space: nowrap;
     }