CODEWITHSUNDEEP
htmlcssangularkendo-ui
Naveen
Naveen

Reputation: 43

I'm unable add the padding for this kendo dropdown

I've been trying to resize the padding of kendo dropdown. I have taken a separate class and Id too to make proper padding but no result. In the browser too I've tried to inspect and make some changes there I got when it comes to editor, I copied the code and put it in the editor which I made changes in the browser end up failing to make proper padding.

My HTML code :

<div class="col-lg-4">
<kendo-dropdownlist [data]="UsersInfo" value="Count of Users by Month"
  class="usersdropdown" (selectionChange)="onSelectUsersInfo($event)">
</kendo-dropdownlist>
</div>

<div class="col-lg-3">
<kendo-dropdownlist [data]="Years" value={{selectedYear}} style="padding: 10px;"
  class="dropdown" (selectionChange)="onSelectYear($event)">
</kendo-dropdownlist>
</div>

<div class="col-lg-3">
<kendo-dropdownlist [data]="Months" value={{selectedMonth}}
  class="dropdown" (selectionChange)="onSelectMonth($event)" >
</kendo-dropdownlist>
</div>

<div class="col-lg-2">
<div class="btn btn-danger" style="margin-top: 5px; width: 150px;">Search</div>
</div>

My CSS code :

.usersdropdown {
    width: 350px;
    margin-left: 5px;
    border-color: white;
    border: none;
}

.k-dropdown .k-dropdown-wrap, .k-dropdowntree {
    border-color: white;
    color: #656565;
    background-color: white;
    padding: 5px;
}

.k-grid-header, .k-header, .k-grid-header-wrap, .k-grouping- 
 header, .k-grouping-header .k-group-indicator, .k-grid td,
.k-grid-footer, .k-grid-footer-wrap, .k-grid-content-locked,
.k-grid-footer-locked, .k-grid-header-locked, .k-filter-row>td,
.k-filter-row>th {
    border-color: white;
    padding: 10px;
}

.btn-btn-danger {
    padding: 20px;
    margin-top: 10px;
    width: 200px;
}

.k-dropdown .k-dropdown-wrap, .k-dropdowntree .k-dropdown-wrap {
    border-color: white;
    color: #656565;
    background-color: white;
    padding: 20px !important ;
}

Upvotes: 0

Views: 1078

Answers (2)

Shai
Shai

Reputation: 3872

The reason why your styles aren't affecting the Kendo component's internal styling is View Encapsulation. You can read about it here.

To penetrate this encapsulation, you can use ::ng-deep before any CSS selector that accesses elements inside the component which you want to style.

In your case, for example:

::ng-deep .k-dropdown .k-dropdown-wrap, .k-dropdowntree .k-dropdown-wrap {
    border-color: white;
    color: #656565;
    background-color: white;
    padding: 20px !important ;
}

Upvotes: 1

Gabe
Gabe

Reputation: 297

If you want this to be a global change, move your css to the global style sheet.

If you want to have it apply only in your component, I would wrap everything in a separate class and then place it inside ::ng-deep. This way the styles will not affect everything else on your site once you have loaded this component.

::ng-deep {
     .my-custom-wrapper-class {
         // your custom styles here
     }
}

Upvotes: 1

Related Questions