Search code examples
javascriptdojodijit.form

Messed up styles of buttons in dijit

I am just started learning dojo. Below is the code.

The code for showing three buttons as taken from the example shown on the website of dojo.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>First | dojo</title>
</head>
<body>
    <script>
        var dojoConfig = {
            async: true
        };
    </script>
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    <script>
        require([
            'dojo/dom',
            'dojo/on',
            'dojo/parser',
            'dijit/registry',
            'dijit/form/Button',
            'dojo/domReady'
        ], function (dom, on, parser, registry) {
            var myClick = function(evt) {
                console.log("I was clicked");
            };

            parser.parse();

            on(dom.byId("button1"), "click", myClick);
            on(registry.byId("button2"), "click", myClick);
        });
    </script>

    <h1 id="greeting">Namastey</h1>

    <div>
        <button id="button1" type="button">Button1</button>
        <button id="button2" data-dojo-type="dijit/form/Button" type="button">Button2</button>
        <button id="button3" data-dojo-type="dijit/form/Button" type="button">
            <div>Button3</div>
            <script type="dojo/on" data-dojo-event="click">
                console.log("I was clicked");
            </script>
        </button>
    </div>
</body>
</html>

The rendering output is

enter image description here

Can somebody please explain what is wrong. I tried searching on google but didn't find anything.

Also, I am seeing no errors or warning in console.

Solution

  • To simple you forget to import theme css file , and also add theme name class to your body tag ,

    so add the :

    1. <link href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" rel="stylesheet" />

    2. <body class="claro">

    see below working snippet :

    learn more about theming dojo here 

    require([
            'dojo/dom',
            'dojo/on',
            'dojo/parser',
            'dijit/registry',
            'dijit/form/Button',
            'dojo/domReady'
        ], function (dom, on, parser, registry) {
            var myClick = function(evt) {
                console.log("I was clicked");
            };

            parser.parse();

            on(dom.byId("button1"), "click", myClick);
            on(registry.byId("button2"), "click", myClick);
        });
    html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#accContainer {
  height: 100% !important;
}

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    

    
    <link href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" rel="stylesheet" />
<script>
  dojoConfig = {
    parseOnLoad: true,
    async: true
  };
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    

<body class="claro">
  <h1 id="greeting">Namastey</h1>

    <div>
        <button id="button1" type="button">Button1</button>
        <button id="button2" data-dojo-type="dijit/form/Button" type="button">Button2</button>
        <button id="button3" data-dojo-type="dijit/form/Button" type="button">
            <div>Button3</div>
            <script type="dojo/on" data-dojo-event="click">
                console.log("I was clicked");
            </script>
        </button>
    </div>
</body>