Dojo programmatic Button shorter than declarative Button?

Question

I'm running with Dojo1.9.1 and noticed that on a page where I have fixed Buttons alongside programmatically generated Buttons, the programmatic Buttons are shorter. I've reproduced the issue here on jsfiddle https://jsfiddle.net/gregorco/6sn6998t/3/

HTML:

<div id="testDiv">
    <table>
        <tr>
            <td>
                <div id="divForProgButton"></div>
            </td>
            <td>
                <div>
                    <button data-dojo-type="dijit/form/Button" data-dojo-id="declaredButton" id="declaredButton" type="button">Declarative Button two pixels taller??</button>
                </div>
            </td>
        </tr>
    </table>
</div>

JAVASCRIPT:

require(["dojo/dom",
"dojo/parser", "dojo/dom-construct", "dijit/form/Button", "dojo/ready"], function (dom, parser, domConstruct, Button, ready) {
ready(function () {
    parser.parse("testDiv");
    var buttonsDiv = dom.byId("divForProgButton");
    var progButton = new Button({
        'id': 'programmaticButton',
            'name': 'programmaticButton',
            'innerHTML': 'Programmatic Button'
    });
    domConstruct.place(progButton.domNode, buttonsDiv);
    progButton.startup();
});
});

It's subtle, but you can see (as well as confirm with Firebug) that the first button is shorter. Here it's only 2 pixels shorter, but on my system it's 4 pixels shorter - much more noticeable. I've tried both claro and tundra themes and both produce the same discrepancy in heights.

Examining the generated HTML with Firebug shows that the declarative Button contains HTML in support of the icon that is never actually displayed. The programmatic Button generates no such icon related HTML. Not sure how this could cause the declarative Button to be taller, but I don't see any other difference.

Anyone make sense of this discrepancy between programmatic Button and declarative Button, and how to avoid that discrepancy?

I appreciate any help you can provide.

Thanks.

Can you try replacing the `innerHTML` by `label` in the programmatic creation of button. I made the changes and now it seems that the height of the buttons are the same. My assumption is that the innerHTML is overwriting the HTML fragment that is created by the Dojo Dijit Machinery. Hence you do not see the icon node in the programmatic version. I am making a wild guess over here. — frank, Mar 31 '15 at 19:38
Awesome! That worked! I thought I had tried that already, but I guess not. If you change your comment to an answer I'll gladly accept it - if I can. I only have 8 points so far, but will accept it when I can. Thanks! — okorng, Mar 31 '15 at 19:45
This innerHTML has given me a lot of pain :-(. You need to be very careful with it. I am glad it helped. — frank, Mar 31 '15 at 19:49

score 5 · Accepted Answer · answered Mar 31 '15 at 19:51

Can you try replacing the innerHTML by label in the programmatic creation of button.

var progButton = new Button({
        'id': 'programmaticButton',
            'name': 'programmaticButton',

            /* 'innerHTML': 'Programmatic Button' */
            'label': 'Programmatic Button'
    });

I made the changes and now it seems that the height of the buttons are the same.

My assumption is that the innerHTML is overwriting the HTML fragment that is created by the Dojo Dijit Machinery. Hence you do not see the icon node in the programmatic version.

When I earn enough points I'll come back and upvote it - but with 8 I'm not allowed. Thanks again. — okorng, Mar 31 '15 at 19:59

Dojo programmatic Button shorter than declarative Button?

1 Answers1