1

I am trying to use button from bootstrap material design from below link: http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html

I downloaded the dropdown button and all needed CSS and JavaScript from the above link. When I am trying to test a sample dropdown button it is not drawn properly. Below is the sample html code and output.

I am not able to find out what I am missing. I tried to find the answers from net but didn't find any! So I am posting it here. 

<html>

<head>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
  <!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
  <link href="css/roboto.min.css" rel="stylesheet">
  <link href="css/material.min.css" rel="stylesheet">
  <link href="css/ripples.min.css" rel="stylesheet">
</head>

<body>

  <h3>Why this dropdown icon height is half of button????</h3>
  <div class="btn-group">
    <a href="javascript:void(0)" class="btn btn-primary">Primary</a>
    <a href="bootstrap-elements.html" data-target="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="javascript:void(0)">Action</a>
      </li>
      <li><a href="javascript:void(0)">Another action</a>
      </li>
      <li><a href="javascript:void(0)">Something else here</a>
      </li>
      <li class="divider"></li>
      <li><a href="javascript:void(0)">Separated link</a>
      </li>
    </ul>
  </div>

  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

  <script src="js/ripples.min.js"></script>
  <script src="js/material.min.js"></script>
  <script>
    $(document).ready(function() {
      // This command is used to initialize some elements and make them work properly
      $.material.init();
    });
  </script>
</body>

</html>

enter image description here

T J
  • 42,762
  • 13
  • 83
  • 138
pitnal
  • 551
  • 1
  • 5
  • 17

1 Answers1

3

Setting the doctype to HTML5 did the trick for me -- add <!doctype html> to the top of your document.

I don't know why, but it's the FIRST thing I thought of.

humbolight
  • 680
  • 4
  • 13
  • Good job humbolight. +1. I am playing around in jsFiddle and wondering why does this work for me, until i saw your answer. This must be it. Here is an example with *HTML 4.01 Transitional* doctype which will break the layout. [jsFiddle](https://jsfiddle.net/ttt5dvek/) . With *HTML 5* doctype everything is fine. – DavidDomain Aug 06 '15 at 18:34
  • Aah! cool. Setting document type to HTML5 worked. gr8, thanks for quick reply. – pitnal Aug 07 '15 at 03:47