Cannot override CSS styles on dropdownlist

[Amelia]

I am trying very hard to get styling to work for the DropDownList. I need to do some VERY specific styles that the Theme Builder does not let me edit.

I already did this fine with the "Menu" widget, but with the "DropDownList" widget, it just ignores styles unless I declare them to be page wide (I cannot put them underneath another tag)

For example, consider the following ...

<div class="grid skinName" style="background-color: #eadca6;">
    <div class="row">
        <h2>Drop Down List</h2>
        <select data-role="dropdownlist"
            data-text-field="Name" data-value-field="Id"
            data-bind="source: data, value: selected">
        </select>
    </div>
</div>

The select list is nested under the div with a class "skinName", so in my CSS, I do the following...

.skinName {
    .k-list-container {
        display: block !important;
    }

    .k-widget,
    .k-dropdown,
    .k-list-container,
    .k-dropdown-wrap,
    .k-group,
    .k-popup,
    .k-reset,
    .k-header {
        background-color: #f8f5e6;
        border-width: 0px;
        padding-top: 0px;
        color: #000;

        .k-input {
            font-family: 'Times New Roman', serif;
        }

        .link {
            a, a:link {
                font-size: 14px;
                color: #fff;

                &:hover {
                    background: #fff;
                    color: #000;
                }
            }
        }
    }
}

This should style it fine, but Kendo forcefully creates the extra HTML for the widget outside of the bounds of the original DOM element that I intended for it to be in, so these styles never get applied. Is there any way to force kendo to adhere to the toplevel class I specify?

[Dimo]

Hello Amelia,

Please refer to the following forum post, which explains how to apply custom styling to Kendo UI widget popups:

http://www.kendoui.com/forums/kendo-ui-web/general-discussions/setting-a-theme-on-individual-controls.aspx#3n0W5ltgZU2yIdigOduqCg

Regards,
Dimo
Telerik

[Amelia]

That works to a limited extent, but the class 'km-popup' still does not get wrapped by the right class, and is causing sizing issues. Is there any way to get direct access to it? I can't use a blanket style, it needs to be capable of doing it on a specific basis.

[Dimo]

Hello Amelia,

The km-popup class is applied to the same element, which has the k-animation-container class. You can obtain reference to this element by using setTimeout in the DropDownList's open event and getting the list's parent(), as shown for the DatePickers.

Regards,
Dimo
Telerik