CODEWITHSUNDEEP
javascriptjquery
overexchange
overexchange

Reputation: 1

Rendered button size is tiny

In the below code,

<head>
        <title>Intro</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="../js/jquery-1.11.3.js">
        </script>
        <script type="text/javascript">
            jQuery(document).ready(function(){
                jQuery('#button1').click(function(){
                    alert('Button clicked');
                });
            });
        </script>
    </head>
    <body>
        <button type="button" id="button1" value="Click Me"></button>
    </body>

button1 size looks tiny on rendering.

firefox 45 and chrome 47 render the tiny size button.

How do I resolve this error?

Note: window.jQuery is created

Upvotes: 1

Views: 51

Answers (2)

Pabs123
Pabs123

Reputation: 3435

First off, set the text of the button:

<button type="button" id="button1">Click Me</button>

If the automatic size from this is not enough, set explicit css, for example:

#button1{
  width: 40px;
  height: 20px;
}

Upvotes: 0

Musa
Musa

Reputation: 97672

The button is empty, put the text you want to display on the button inside the button tag

<button type="button" id="button1">Click Me</button>

Upvotes: 3

Related Questions