Autocomplete height and Button height

Autocomplete height and Button height

What am I doing wrong?



  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>demo</title>
  6. <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
  7. <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  8. <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9. <style type="text/css">
  10. #tags1 {
  11. height: 36px;
  12. }
  13. #but1 {
  14. height: 36px;
  15. }

  17. #tags2 {
  18. height: 30px;
  19. }
  20. #but2 {
  21. height: 36px;
  22. }
  23. </style>
  24. <script type="text/javascript">
  25. $(function() {
  26. var availableTags = ['Demo'];
  27. $('#tags1').autocomplete({
  28. source: availableTags
  29. });
  30. $("#but1").button();

  32. $('#tags2').autocomplete({
  33. source: availableTags
  34. });
  35. $("#but2").button();

  37. $('#tags3').height("36px").autocomplete({
  38. source: availableTags
  39. });
  40. $("#but3").height("36px").button();
  41. });
  42. </script>
  43. </head>
  44. <body>
  45. <input id="tags1" />
  46. <input type="submit" id="but1" value="Go" />
  47. <br /><br />
  48. <input id="tags2" />
  49. <input type="submit" id="but2" value="Go" />
  50. <br /><br />
  51. <input id="tags3" />
  52. <input type="submit" id="but3" value="Go" />
  53. </body>
  54. </html>