Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1028
  • Last Modified:

ddl: auto width adjust

hi, i have data in ddl and my ddl get populate from ms-sql server database

when the user click on ddl i want the width of my ddl to be expand based on whatever the width of my data in ddl

how can i fugure out or how can i calculate the width of my row coming from db and adjust the width of my ddl?


thanks
0
service2001
Asked:
service2001
  • 9
  • 8
  • 2
1 Solution
 
KittrickCommented:
The DDL's usually adjust to the largest field value in your list, unless you have your browser less than minimized in IE.

Kittrick
0
 
KittrickCommented:
Otherwise, you can set it dynamically like:

<asp:DropDownList id="DropDownList2" runat="server" Width="300px"></asp:DropDownList>

or

you can set the autolength of the dropdownlist programatically:

http://weblogs.asp.net/eporter/archive/2004/09/27/234773.aspx

Hope that helps!
Kittrick
0
 
service2001Author Commented:
>>http://weblogs.asp.net/eporter/archive/2004/09/27/234773.aspx

the above link is for windows programming
but im looking in asp.net web
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
service2001Author Commented:
i know i can hardocde the width but i need auto detect width

anybody done before?
0
 
stengeljCommented:
I don't thing your question make very much sense.  Given that you did not accept Kittrick's suggestion, I have to assume that you want the ddl to adjust itself to fit the SELECTED item.  Yes?

First, set the font of the ddl to a fixed width font (like Courier).

Second, write function that calculates the number of characters in your selected list item.

Third, write a funtion that truncates any list item that has more characters than your selected item.

Understand? If not, I just gave you three great questions to post as new threads!
0
 
service2001Author Commented:
stengelj:

the kittrick's suggestion is the code for writing windows application and im looking for web application and if you aware there are lot of difference in windows and web programming, anwyay... back to my question.

i load my ddl through database

i want:

when the user clicks on ddl then the ddl should automatically increase the width of my ddl, again i reapet, when I CLICK on ddl it should expand the width and after i select whatever the item from ddl then it will goes back to the normal whatever width.

again,... im looking some sort of technik to increase the width of my ddl when the user cliks..

i try putting onfocus but it did not work

and i don't find event called onClick in web programming.

i hope you undestand.

thank you.
0
 
stengeljCommented:
I do understand...

Kittrick's *first* answer is correct.  The largest item in the list determines the width of ddl. Therfore, to make the list width match the *selected* item, you need to create a funtion to do so.

I don't mean any disrespect, but I'm getting the sense that you have not done very much programming and are hoping for a simple solution that does this for you.  Unfortunately, this solution requires some programming knowledge and is VERY dependant on what your form is trying do to and how complicated it is...

If the only control in your form is this ddl that's one thing...If it's one of many, then it  get more complicated.

Is this the only control in your form?
0
 
service2001Author Commented:
i have textboxes and ddl
0
 
stengeljCommented:
Try this...

<select style="font-family:Courier; font-size:10px; width:this.options[selectedIndex].value.length * 10 +20;"
      onchange="this.style.width=this.options[selectedIndex].value.length * 10 + 20;">
            <option style="width=this.value.length;" value="Smallest" selected>Smallest </option>
            <option style="width=this.value.length;" value="A little bigger...">A little bigger... </option>
            <option style="width=this.value.length;" value="A little bigger......">A little bigger......</option>
            <option style="width=this.value.length;" value="A little bigger.........">A little bigger.........</option>
</select>
0
 
service2001Author Commented:
1) im using asp.net dropdownlist
2) im getting the data from database so i have no clue what will be the width of that content
3) what is 10 + 20 doing

0
 
service2001Author Commented:
i tried your code but does not effect anything
0
 
stengeljCommented:
1) You should be able to modify my example to work for a asp.net ddl

Like this...
<form runat="server">
<asp:dropdownlist runat="server"
      style="font-family:Courier; font-size:10px; width:this.options[selectedIndex].value.length * 10 +20;"
      onchange="this.style.width=this.options[selectedIndex].value.length * 10 +20;">
            <asp:ListItem value="Smallest">Smallest </asp:ListItem>
            <asp:ListItem value="A little bigger...">A little bigger... </asp:ListItem>
            <asp:ListItem value="A little bigger......">A little bigger......</asp:ListItem>
            <asp:ListItem value="A little bigger.........">A little bigger.........</asp:ListItem>
</asp:dropdownlist>
</form>

2) With my new example you should need to know that.
3) The width of the list is calculated by finding the number of characters in the list item (this.value.length) x 10 (pixel size of each character) + 20 (extra pixels to compensate for the arrow button on the ddl.

My example was tested and works fine in IE, FireFox and Opera.  You need to modify it to make it work for your situation.  

If you are not understanding how this works, I don't think I can help you further.  I can only do so much here...I given multiple suggestion on how to do it and I've given you a working example of how to do it.
0
 
service2001Author Commented:
if you use onchange it will fire only if you change something in the dropdowlist instance.. you select some data from the dropdownlist

but what im looking is ONCLICK using <asp: dropdownlist.....


i need the event to fire when i click on the dropdownlist
0
 
stengeljCommented:
Change OnChange to OnClick.

For 100 points, you're sure making this tough on me!

How 'bout a point bump? ;)
0
 
stengeljCommented:
I think I'm finally understanding what you are trying to do...

I have it working in Firefox but not IE for some reason.  Give me a while and I'll post it when it's working.
 
0
 
stengeljCommented:
Ok, my friend I have one last suggestion for you.  First, I have confirmed that IE does not allow certain attibutes to be changed under certain conditions.  That's why I could find something for Firefox but not IE.  Essentially, this means you won't be able to do exactly what you are asking to do.  It needs to be done in javascript so that the isn't a postback event onClick.

So, I created a little trickery to simulate what you want.  It's not perfect but it does work.  My example creates two layers.  One layer has a select list with only one item that let's the user click on the list.  The second layer contains the real ddl.  When you click on the fake list, the javascript hides the fake list and diplays the real list. Ta da!

There is a little awkwardness in that you then have to click the list again to pop it down but...that the best I got!

<html>
<head>
<SCRIPT type=text/javascript>
<!--
function toggleT(_r,_f) {
      if (document.all) { // is IE
            eval("document.all."+_f+".style.display='none';");
            eval("document.all."+_r+".style.display='block';");
            }
      else if (document.layers) { // is NS?
            eval("document.layers['"+_f+"'].visibility='hide';");
            eval("document.layers['"+_r+"'].visibility='visible';");
            }
      else if (document.getElementById) {  // is Firefox?
            document.getElementById(_f).style.display="none";
            document.getElementById(_r).style.display="block";
            }
}
//-->
</SCRIPT>
</head>
<body > 
<form runat="server">
      <div id="myFakeSelect">
            <Select NAME="mySelect" onClick="toggleT('myRealSelect','myFakeSelect');" >
                  <option >--InitialText--</option>
            </select>
      </div
      <div id="myRealSelect" STYLE="display: none">
            <asp:dropdownlist runat="server" id="myDDL">
                  <asp:ListItem value="Smallest">Smallest </asp:ListItem>
                  <asp:ListItem value="A little bigger...">A little bigger... </asp:ListItem>
                  <asp:ListItem value="A little bigger......">A little bigger......</asp:ListItem>
                  <asp:ListItem value="A little bigger.........">A little bigger.........</asp:ListItem>
            </asp:dropdownlist>
      </div>
</form>
</body>
</html>


0
 
stengeljCommented:
How are you doing?  Did my last post help?

Here's a new thread you may be interested in: http://www.experts-exchange.com/Programming/Programming_Languages/Dot_Net/ASP_DOT_NET/Q_21399605.html
0
 
service2001Author Commented:
im doing good my friend but your solutions will not fit for my requirement and thank you for ur help
0
 
stengeljCommented:
Sorry to hear that...unfortunately, IE does not allow certain things with dropdowns so our options are limited.

Here's one other example I found, but, I don't know that it's what you are looking for.

<select id="Select" style="width: 125px;"
      onClick="javascript: this.style.width='auto';"
      onBlur="javascript: this.style.width=125;">
      <option selected>Select One</option>
      <option value="1">;aslkdjfljasd;lfj;lkasjdf</option>
      <option value="2">asfdsadf  s; j;flj ;s jl jlksd </option>
      <option value="3">  jd;sfjs ;djfl kljas;f jl; jlsafd j;lk</option>
      <option value="4">j;oaisjf iojsd ;aso ijf on</option>
      <option value="5"> hsdh flk hsjf hlkh</option>
</select>
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 9
  • 8
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now