Click here to Skip to main content
Click here to Skip to main content

Dynamically adjusting the size of a drop-down list and adding color to the back-ground and fore-ground of the list items

By , 11 Mar 2008
Rate this:
Please Sign up or sign in to vote.

Introduction

We face scenarios where the text in the drop-down list exceeds the size of the drop-down list. Many developers try to wrap the text in such scenarios, this may be helpful, however I felt that it wasn’t a great UI (User Interface). Usually it happens that if we increase the size of the drop-down list the page gets a horizontal scroll-bar. Truncated text creates problem for the user, as (s)he may not be able to see the entire content in the drop-down and it would create a problem for (s)he when they are selecting any values which differ only on last couple of bits/characters. The later half of the document describes adding font color and back-ground color to the drop-down list items. Usually we face a problem in ASP.Net when we need to add color to the back-ground of an item in the drop-down list, because of which many developers prefer HTML Controls as adding back-ground color is comparatively simpler with HTML Controls. We have tried to add font color and back-ground color to drop-down list using Java Script.

Using the code

Adjusting the width of the drop-down list dynamically

We would firstly add the drop-down list to the table/data-grid as usual and would then add the logic of adjusting the width. We are using the “oncontextmenu”, this event gets fired when the user right-clicks on the control. Once the right-click event is captured, we invoke a Javascript function to increase the width of the drop-down list. If the width is initially less, then we increase it to the maximum – the one required to see all the items. If the width is currently maximum, then or right-click we need to again resize the control so that the page would look as usual.

<DIV><TABLE id="Table1" style="LEFT: 144px; POSITION: absolute; TOP: 48px;"<BR>
cellSpacing="1" cellPadding="1" width="208" border="1"><BR>
 <TR><BR>
  <TD style="WIDTH: 138px"><asp:Label id="lblColour1" runat="server" BorderStyle="None">Colour Name:</asp:Label></TD><BR>
  <TD><asp:DropDownList Width="40" id="cmbColour1" runat="server" oncontextmenu="fnJumpSize (this);"></asp:DropDownList></TD><BR>
 </TR><BR>
 <TR><BR>
  <TD style="WIDTH: 138px"><asp:Label id="lblColour2" 
runat="server" BorderStyle="None">Colour Name:</asp:Label></TD><BR>
  <TD><asp:DropDownList Width="40" id="cmbColour2" 
runat="server" oncontextmenu="fnJumpSize(this);"></asp:DropDownList></TD><BR>
 </TR><BR>
 <TR><BR>
  <TD style="WIDTH: 138px"><asp:Label id="lblColour3" 
runat="server" BorderStyle="None">Colour Name:</asp:Label></TD><BR>
  <TD><asp:DropDownList Width="40" id="cmbColour3" 
runat="server" oncontextmenu="fnJumpSize(this);"></asp:DropDownList></TD><BR>
 </TR><BR>
</TABLE></DIV>

Now we would have a look at the Javascript event which is used to adjust the width of the drop-down list on right-clicking on the drop-down.

function fnJumpSize(cmbDrop)
{	
		
	if(cmbDrop.style.width != "100px")
	{
		cmbDrop.style.width = "100";
	}
	else
	{
		cmbDrop.style.width = "40";
	}
			
}

On right-clicking the drop-down list box

On right-clicking the drop-down list box again

Important: Need to note the Width of the Items

This section is very important for the developers. I would suggest that during creation of the web-page, give the width for the drop-down list in such a manner that it would avoid any horizontal scroll bar and the design would be fit the screen. Later one check for the maximum width of the drop-down list items and enter that value into the javascript function fnJumpSize. In case you wish to incorporate this functionality across the application then just replace it with any constant and populate the value of that constant/hidden variable from the front-end.

Adding color to the back-ground and fore-ground using JavaScript

We are calling a Javascript function at page load which adds color to the list items. This function takes the back-ground colors from the string format and adds them to the individual items, in case you have multiple color scheme, I would suggest to populate it in the front-end itself.

function fnColourIt()
{	
			
	var strColors = "pink$aqua$aquamarine$azure$beige$bisque$black$blanchedalmond$
blue$burlywood$cadetblue$chartreuse$chocolate$coral$cornflowerblue$
cornsilk$peachpuff$cyan$darkblue";

	var arrColors = strColors.split("$");
	var startOne = 1;
			
	while(startOne < 4)
	{
					
		var drpOne = document.getElementById("cmbColour" + startOne);
		var i;
					
		for (i = 0; i < arrColors.length; i++)
		{
			htmlCode = document.createElement('option');
			htmlCode.text = arrColors[i];
			htmlCode.value = arrColors[i];
			drpOne.options.add(htmlCode); 
			drpOne.options[i].style.background = drpOne.options[i].value;
			//drpOne.options[i].style.color = "white";
		}
		startOne = parseInt(startOne) + 1;
	}

}

The first three lines in the for loop are creating a list item and assigning it text and value respectively. Fourth line runs the command to add the list item to the drop-down list. The following line adds the back-ground color for the list item:

drpOne.options[i].style.background = drpOne.options[i].value;
The following line adds the fore-ground color for the list item:
drpOne.options[i].style.color = "white";
We can make any other modifications like changing the font-family, size or making any particular text as bold et al in a similar manner.

Conculsion:

1) User can increase the size/width of any drop-down list dynamically
2) Back-ground coloring for the drop-down list in ASP.Net is time consuming and difficult, which is handled in a fairly easy manner in Javascript
3) Simple to implement
4) Scalable, i.e. by making small changes to the JS function, you can scale it across the application




License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Sushant Joshi
Software Developer (Senior)
India India
Working as a developer since last four years. Enjoys writting code snippets and exploring ASP.Net. You would find me either watching a movie or programming/devloping some reusable code snippets.

Comments and Discussions

 
GeneralMy vote of 3 PinmemberPriyaVaalu10-Feb-11 18:15 
GeneralMy vote of 1 PinmemberNaveen.255918-Jan-10 21:57 
GeneralRe: My vote of 1 PinmemberTET12312-Jul-10 19:11 
QuestionCode PinmemberDanielHH28-Apr-09 7:08 
GeneralFound this using google to expand my drop down. PinmemberToddHileHoffer22-Oct-08 7:43 
GeneralRe: Found this using google to expand my drop down. PinmemberSushant Joshi24-Aug-10 19:19 
QuestionCould you please let me know list of drop down event Pinmemberthesaint124-Mar-08 21:01 
GeneralThats cool Pinmemberthesaint124-Mar-08 20:58 
GeneralRe: Thats cool PinmemberSushant Joshi24-Aug-10 19:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140415.2 | Last Updated 12 Mar 2008
Article Copyright 2008 by Sushant Joshi
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid