2010
10-10

too big jquery-ui elements

Yesterday I was installing jquery-ui at one of my websites. When I do that as it was writen in instruction all jquery-ui elements was 2 times bigger. I search a while and find how it was solved in demos at jquery.com. That CSS code:
  1. body{ font: 62.5% "Trebuchet MS", sans-serif;}
  2. .demoHeaders { margin-top: 2em; }
  3. #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
  4. #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
  5. ul#icons {margin: 0; padding: 0;}
  6. ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
  7. ul#icons span.ui-icon {float: left; margin: 0 4px;}
Unfortunatly that solution change (destroy) all layout of website. So here is step by step instuction how to do it correct. 1. Download jquery-ui from jqueryui.com/download with all components selected theme. 2. Extract zip archive to some directory at server. In my case it was lib/jquery-ui/ and I will use it in that tutorial, but you can use any other directory. I will also use jquery-ui 1.8.5 and theme ui-darkness. If you use other version or theme please replace that numbers (writing jquery-ui-x.x.x don't looks good). 3. Add that lines to every page at your website between <head> and </head> :
  1. <link type="text/css" href="libs/jquery-ui/css/ui-darkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
  2. <script type="text/javascript" src="libs/jquery-ui/js/jquery-1.4.2.min.js"></script>
  3. <script type="text/javascript" src="libs/jquery-ui/js/jquery-ui-1.8.5.custom.min.js"></script>
  4. <style type="text/css">
  5. #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
  6. #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
  7. ul#icons {margin: 0; padding: 0;}
  8. ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
  9. ul#icons span.ui-icon {float: left; margin: 0 4px;}
  10. .ui-widget{
  11. font: 62.5% "Trebuchet MS", sans-serif;
  12. }
  13. </style>
  14.  
If you wish you can put that CSS data in separeted file, but it's very important that you include that css file after including jquery-ui (after first 3 lines). 4. Now every thing should work fine. You can test it by that working example:
  1. <link type="text/css" href="libs/jquery-ui/css/ui-darkness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
  2. <script type="text/javascript" src="libs/jquery-ui/js/jquery-1.4.2.min.js"></script>
  3. <script type="text/javascript" src="libs/jquery-ui/js/jquery-ui-1.8.5.custom.min.js"></script>
  4. <style type="text/css">
  5. #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
  6. #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
  7. ul#icons {margin: 0; padding: 0;}
  8. ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
  9. ul#icons span.ui-icon {float: left; margin: 0 4px;}
  10. .ui-widget{
  11. font: 62.5% "Trebuchet MS", sans-serif;
  12. }
  13. </style>
  14. $(function(){
  15. $('#date').datepicker();
  16. });
  17. </script>
  18. </head>
  19. date:
  20. <input id="date" / >
  21. </form>
  22. </body>
  23. </html>

4 Coments.

  1. Nice site, nice and easy on the eyes and great content too.

  2. I’ve recently started a blog, the information you provide on this site has helped me tremendously. Thank you for all of your time & work.

  3. great post, very informative. I wonder why the opposite experts of this sector do not reaize this.
    Yoou must proceed your writing. I’m confident, you hae a great
    readers’ base already!

    Take a look at my web site :: social media Berkhamsted

  4. Mitch says:

    Finally i quit my day job, now i earn decent money on-line you should try too,
    just search in google – blackhand roulette
    system

Leave a Reply

  ( Ctrl+Enter )