how to style dojo button?

8588
1
Jump to solution
05-12-2011 04:46 PM
Sophialim
New Contributor
hi
anyone know how to style the dojo button cause i declare the button it appear but i cannot use the style:"border:0px; background-color: black;"

this is how i declare my dojo button

var forward = new dijit.form.Button({
style: "border:0px;background:black;",
label: "NEXT"

});

Please help me with this !!!
Please Reply ASAP!!!
Thanks
p.s if can show me some sample
0 Kudos
1 Solution

Accepted Solutions
HemingZhu
Occasional Contributor III
hi
anyone know how to style the dojo button cause i declare the button it appear but i cannot use the style:"border:0px; background-color: black;"

this is how i declare my dojo button

var forward = new dijit.form.Button({
style: "border:0px;background:black;",
label: "NEXT"

});

Please help me with this !!!
Please Reply ASAP!!!
Thanks
p.s if can show me some sample


overwrite the root button style specified in .css (claro.css or tundra.css whatever) using dijit.form.Button 's baseClass property. Doing it like this:

.....
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css" />
<style type="text/css">
.myDynamicButton {
      background-color: black;
      border: 0px;
}
</style>
.....

var forward = new dijit.form.Button({
label: "NEXT",
baseClass: "myDynamicButton"
});

what happens is your "myDynamicButton" style class will overwrite "dijitButtonNode" which is default style for dijit.form.Button specified in claro or tundra css file. Hope it will help

View solution in original post

0 Kudos
1 Reply
HemingZhu
Occasional Contributor III
hi
anyone know how to style the dojo button cause i declare the button it appear but i cannot use the style:"border:0px; background-color: black;"

this is how i declare my dojo button

var forward = new dijit.form.Button({
style: "border:0px;background:black;",
label: "NEXT"

});

Please help me with this !!!
Please Reply ASAP!!!
Thanks
p.s if can show me some sample


overwrite the root button style specified in .css (claro.css or tundra.css whatever) using dijit.form.Button 's baseClass property. Doing it like this:

.....
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css" />
<style type="text/css">
.myDynamicButton {
      background-color: black;
      border: 0px;
}
</style>
.....

var forward = new dijit.form.Button({
label: "NEXT",
baseClass: "myDynamicButton"
});

what happens is your "myDynamicButton" style class will overwrite "dijitButtonNode" which is default style for dijit.form.Button specified in claro or tundra css file. Hope it will help
0 Kudos