Tuesday, November 8, 2011

ssEditBox

Since textbox can only hold a limited maximum number of characters and will hide some entries from our eyes if it goes beyond the textbox's current width, then for longer entries we normally use an editbox. However, one thing that I don't like about editboxes is those "eat" space and sometimes it is harder to design the appearance of our forms because we have to give allowance to those.  See image below:


Solution?  Create a dropdown editbox.


This class I called ssEditBox is designed to cater for longer entries that normally requires an editbox. This class appears like an ordinary textbox and consumes space on the form much like an ordinary textbox as well.  The difference is that this can handle longer entries as once the textbox reached the nMaxChar property value (default is 15 characters) then the dropdown editbox will appear and focus will be transferred there so you can continue typing as if you really are typing there in the first place.

You may want to change the value of nMaxChar property other than 15 characters if you have resized the class (made it wider or narrower) so you can estimate the number of characters user will type before it reaches the end of the current textbox width and make it appear that suddenly the dropdown edit box will popup.

Aside from letting the class reach the nMaxChar property for dropdown editbox to appear, you can likewise force the dropdown portion to appear "any time" via pressing down arrow when the class has the focus.  Hiding it back is done either via pressing Esc key, up arrow key or when you click outside of the dropdown editbox.

By default, the dropdown editbox is wider than the textbox.  But when you drag the right edge of the class making it wider than the dropdown editbox portion, the class will auto-compensate adjusting the dropdown portion to be of equal width with the textbox portion.

So there you are, again a very simple yet unique and appealing new class added to the list of growing ssclasses family.

Enjoy!