CODEWITHSUNDEEP
javascriptdojo
user1343952
user1343952

Reputation: 69

dojo checkbox checked but not showing till mouse over

So I tried to reproduce this in JS Bin but I couldnt get the dojo to work. It is the same on chrome and firefox.

I have a checkbox and a dojo ready function which looks like

dojo.ready(function() {
    dijit.byId('checkbox1').checked = true;
});

Now when the page is rendered the checked = true is executed successfully however the checkbox does not appear check UNTIL YOU MOUSE OVER IT !

Its like the browser did not repaint the area over the checkbox. Waving your mouse over the checkbox and the browser repaints it so you can see the tick.

Anyone come across this before?

Upvotes: 3

Views: 1932

Answers (2)

Andrew
Andrew

Reputation: 946

For me, the problem was that I was not loading the widget's css properly.

Dojo's Checkboxes are shown using a sprite-sheet rather than a native html checkbox.

I had overridden dojo's css (I was using the claro theme), by hiding the spritesheet image, and showing the regular html checkbox that was backing it.

So, make sure that you are including one of the dojo theme css files (claro.css for me) with you css. and make sure that the <body> tag on your html has the class="claro" or whatever theme you are using.

With the sprite sheet (again, in this case claro) your checkbox should look like dojo claro-theme checkbox not html checkbox

Upvotes: 2

Alex.Bullard
Alex.Bullard

Reputation: 5563

You need to use :

dijit.byId('checkbox1').set('checked', true)

instead of directly setting the attribute. This convention should be followed for all widgets since you never know what other processing may be required when changing attribute values.

Upvotes: 4

Related Questions