CODEWITHSUNDEEP
cssangular
kayasa
kayasa

Reputation: 2085

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.

Upvotes: 1

Views: 2421

Answers (1)

Srichandradeep C
Srichandradeep C

Reputation: 397

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;
     }

Upvotes: 2

Related Questions