Combo Box With Image

[J]

Hi,

I would like to have an image to the left of the text in the combo box similar to how I have the button in this image, I am using the combo more like a menu where you can select the 2 items in the list but it does not change what is on the tool bar.

I have tried to do it the same way I implemented the button but no luck.

Any ideas

<button id="moveButton" class="k-button"><img />Move</button>

<button id="viewXML"><img /></button>

#moveButton img, #viewXML img

{

    content: "";

    float: left;

    width: 16px;

    height: 16px;

    margin: 5px 5px 0 0;

    background-image: url('images/SpritesSmall.png');

    background-position: -70px center;

}

$("#viewXML").kendoDropDownList([{ text: "Option 1", value: "1" }, { text: "Option 2", value: "2"}]);

$("#viewXML").data("kendoDropDownList").text("View XML")

[Dimo]

Hello Jonathon,

The content CSS property should be used together with :before or :after pseudo-element selectors. In addition, I am almost sure that you don't have img elements inside the Combo, so you should change these as well (e.g. to k-input). Finally, viewXML is an ID, that after the DropDownList initialization will be applied to an inner element. while you need a CSS selector targeting the widget's wrapper. So you either have to use .k-dropdown (not recommended because this will affect all DropDownLists on the page), or apply a custom CSS class to the wrapper element.

.k-dropdown .k-input:before
{
    content:" ";
    display:inline-block;
    width:16px;
    height:16px;
    background: ............... ;
    vertical-align:top;
    margin: 0 .4em 0 0;
}

Kind regards,
Dimo
the Telerik team