Modifying disclosure button in list item

[MikeTorra]

Hello,

I am trying to modify the disclosure button on a list item, specifically its position. Is there a way to do this with CSS? Ideally I would like to use a custom image for the disclosure... Any insight?

[fx-mike]

Just override the css.
I did it by putting something like this in my css file:

.x-disclosure {
	height: 24px;
	width: 24px;
	-webkit-mask-box-image: url('data:image/png;base64,iVB...); //shortened for readability
}

Modify the position in the same manner as shown above.

[MikeTorra]

Thanks! Exactly what I needed.

[MikeTorra]

Is there a way to change the image without using base64?

[lteti77]

I have a similar problem. But i would like to set the disclosure indicator similar to the one used by the SDK (ie. UITV_accessory_disclosure.png for next level and UITV_accessory_detail.pngfor details).
I would like to define .x-disclosure1 {} and .x-disclosure2 {} in css and set these classes to my list items.

How can i set the disclosure css class by javascript? can i use one of the config property of list object?

Thanks..

[lteti77]

i tried to use this code but i have a blue square box... what's the reason for this strange display?

[lteti77]

i found the solution... the problem was the image size. i tried to use an image bigger than 24px and so only a part of it was displayed...
using a resized image now works..

[lukesayaw]

Hi,

I wonder if I can use the image url like ---webkit-mask-box-image: url(urlpath) as I would like to use my own image for the disclosure?

many thanks

[fx-mike]

Sure, thats what url() is for. But as far as I know the path will be relative to your css file, so watch out for that.

[jnw]

Is this still the way to modify the list item disclosure icon in 1.1.0? It's not working for me.

.x-disclosure {
    height: 24px;
    width: 24px;
    -webkit-mask-box-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEU..blah..blah..blah');
}

Thanks.