.ui-autocomplete { height: 200px; overflow-y: auto; }This will do the job.
Friday, October 22, 2010
Adding scrollbars to jquery autocomplete combobox
If your select source is very long and exceeds your desired height you can use height to control the height of your controls.
To set the width of a jquery autocomplete combobox
You can use the javascript or css methods to set the width of jquery autocomplete combobox
If you want to use css, use this code
If you want to use css, use this code
.ui-autocomplete-input { width:100px; }or if you want to set this to a specific combobox use this css
.title .ui-autocomplete-input { width: 100px; }
If you want to use javascript try this code.
$('.ui-autocomplete-input').css("width", "100px");
jQuery UI autocomplete combobox reloads page when dropdown button is pressed
If you are new to jquery UI, and have used a lot of time trying to figure out autocomplete combobox.
There are some scenarios when you click the dropdown button the page reloads. It only happens when you put your select control inside of a form tag.
To get rid of this problem use the following code.
Add return false at the end of click event.
There are some scenarios when you click the dropdown button the page reloads. It only happens when you put your select control inside of a form tag.
To get rid of this problem use the following code.
Add return false at the end of click event.
.click(function () { // close if already visible if (input.autocomplete("widget").is(":visible")) { input.autocomplete("close"); return; } // pass empty string as value to search for, displaying all results input.autocomplete("search", ""); input.focus(); return false; });
Saturday, October 9, 2010
100% height layout using tables
If your ever wanted to make your footer appear attached to bottom of the browser even there was no data on the page. Well use the code below.
<html> <head> <title>100% height using tables</title> <style type="text/css"> * { margin: 0; padding: 0; } html, body, table#maintable { height: 100%; } #maintable thead td { height: 23px; } #maintable tfoot td { height: 23px; } </style> </head> <body> <table id="maintable"> <thead> <tr> <td><h1>Height is neccessary. Adjust the height accordingly</h1></td> </tr> </thead> <tbody> <tr> <td valign="top">Valign top makes the data be aligned at the top of this box</td> </tr> </tbody> <tfoot> <tr> <td>© 2010 Company. Height is neccessary so keep it small</td> </tr> </tfoot> </table> </body> </html>
Subscribe to:
Posts (Atom)