CODEWITHSUNDEEP
javascripthtmlbuttondojoprogrammatically-created
okorng
okorng

Reputation: 149

Dojo programmatic Button shorter than declarative Button?

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.

Upvotes: 0

Views: 106

Answers (1)

frank
frank

Reputation: 3330

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.

Upvotes: 5

Related Questions