I am using dijit.form.dropDownbutton in my application. However, I want to remove the down arrow icon in the drop down button. Is there a way to do so?
1 Answer
First, don't do it. It's there because of the various usability conventions - something users come to expect. It points them to a familiar functionality, where a down arrow icon indicates a dropdown box.
Secondly, if you choose to ignore the first advice you can go ahead and do it. The button is controlled by (in case of claro theme):
.claro .dijitArrowButtonInner {
width: 15px;
height: 15px;
margin: 0 auto;
background-image: url(form/images/buttonArrows.png);
background-repeat: no-repeat;
background-position: -51px 53%;
}
overriding it and adding: display: none; removes the arrow and re-sizes the button. You can override it by, for example, assigning an additional class yourclass to the div and building a paraller CSS hierarchy:
.claro .yourclass .dijitArrowButtonInner {
display: none !important;
}
so that in your <head> part you have:
<style>
.claro .yourclass .dijitArrowButtonInner {
display: none !important;
}
</style>
and then:
<body class=" claro ">
...
<div id="dropdownButtonContainer" class="yourclass"></div>
...
If there is a programmatic way that is simpler than that - I am not aware of it.
EDIT also, as a friendly advice, you should really try and accept answers for your questions, otherwise at some point no one will answer you.
-
Thank you for the help. The reason I want to remove the arrow is I used dropdownbutton to show descriptions of my form items. Having an arrow next to each form item is not nice looking. (As i am new to dojo, I have not come up with other easy ways for the descriptions.) Also thank you for the kind advice to accept answers. I just figured out how to do so.– BobNov 4, 2011 at 10:15
-
1@ZenMaster: I agree that this should be avoided, but sometimes we have custom icons which needs doing this(creating theme might be too much for small set of icons).– 0xc0deNov 21, 2012 at 10:43