CODEWITHSUNDEEP
javascriptbuttondojoimagebutton
Mack
Mack

Reputation: 2726

Dijit button show icon but not label programatically

I'm relatively new to Dojo and trying to get the hang of dijits. After consulting the docs for Dojo's dijit/form/Button widget here:

http://dojotoolkit.org/reference-guide/1.9/dijit/form/Button.html

I attempted to create a button showing only an icon (showLabel: false). That attempt can be seen in this fiddle:

http://jsfiddle.net/msweeney/23Mxh/

or assembled from the code:

HTML

<body>
  <button type="button" id="testButton"></button>
</body>

CSS

.plusIcon {
    background-image: url("http://png-2.findicons.com/files/icons/2152/snowish/128/gtk_add.png");
    background-position: center;
    background-repeat: no-repeat;
    height: 19px;
    width: 19px;
}

JS

require(["dojo/parser", "dijit/form/Button", "dojo/domReady!"],

function (parser, Button) {
    parser.parse();

    var testButton = new Button({
        label: "test button",
        showLabel: false,
        iconClass: "plusIcon",
        onClick: function () {
            alert("test button clicked")
        }
    }, "testButton");
    testButton.startup();

});

I can't seem to figure out what I'm doing wrong here. In particular:

  1. Why doesn't the icon show up?
  2. What is causing the black dot to appear?
  3. Why does the label still show up even when showLabel is set to false?
  4. Why isn't the label inside the button?

Note: I'd be glad to show pictures to illustrate what I'm getting and what I'd like to be getting, but I don't have enough reputation yet.

Upvotes: 0

Views: 2423

Answers (1)

BuffaloBuffalo
BuffaloBuffalo

Reputation: 7852

When using dijit widgets, you need to include a theme css file (such as claro.css) and set the class attribute on the body tag

I updated your jsfiddle with the extra css resource and the class="claro" attribute on the body tag.

html:

<body class="claro">
    <button type="button" id="testButton"></button>
</body>

js:

require(["dojo/parser", "dijit/form/Button", "dojo/domReady!"],

function (parser, Button) {
    var testButton = new Button({
        label: "test button",
        showLabel: false,
        iconClass: "plusIcon",
        onClick: function () {
            alert("test button clicked")
        }
    }, "testButton");
    testButton.startup();

});

css:

.plusIcon {
    background-image: url("http://png-2.findicons.com/files/icons/2152/snowish/128/gtk_add.png");
    background-position: center;
    background-repeat: no-repeat;
    height: 19px;
    width: 19px;
}

Upvotes: 2

Related Questions