Wrap long text in drop-down list?

Question

I have legible long text in a dropdown on my asp.net page. it violates the border of the user interface and goes beyond the allocated area of ​​the user interface.

In any case, can I wrap [not crop] it with CSS or javascript? I have to display the whole line, no matter how long it is.

Answer 1

Longer answer: yes.

You can use not the default element, but make your own using JavaScript and CSS. Your custom droplist element must contain multiple divs (or other HTML elements) as droplist elements. When you set a fixed width to the droplet cell, the text will be wrapped inside.

One example here (just picked up the 1st link from a google request: "JavaScript Dropdown Menu" ).

Answer 2

Short answer: None.

Longer answer: select a user group instead of the selected menu. You can use the CSS overflow property to add scroll.

Answer 3

If you want to save the user interface representation in a selection box based on, there is a (rather nasty) way you could do this. It is rather manual, and I would not recommend it at all, but it could achieve what you want:

For each option in the list, output "width" based on the characters in this text editor. This should be a vague representation of the proportional width of the font of the font (for example, ijtl = 1, aopg = 2, m = 2.5, roughly speaking, this kind of thing).

Everything that passes a certain value (evaluates this based on your available user interface space) gets a separation at the corresponding point (space or hyphen in a long word - you need to write an algorithm for this). Repeat until you have pieces to your desired size. You should get an array for each parameter (some will only be 1 if they are already short enough).

For each option with a matching array longer than 1, insert the option nodes immediately after the original containing each of the following text fragments. Give them a specific class (e.g. long-child ) and the same value as the original. You should probably also give some visual indicator that this is a continuation of the previous element.

Put an onchange event onchange to select which checks if the selected parameter has a long-child class. If so, he should look for the previous parameters to find the first that has the same value and does not have a long-child class. Instead, set selectedIndex to this parameter.

As I said, disgusting, but can achieve the desired effect. It may even be less code than Pawka’s suggestion to ride on your own;)

Answer 4

I think it's time to think about another part of the interface, rather than just complicating the fallout.

But if you need, I would use some css / javascript to recreate the dropdown list widget using list items.

Answer 5

An example is from the Coldfusion website, where I need a list of headers to select, and the length is up to 200 characters. The selection parameters are looped on the query and divided by the full point of the word, if the text string is too long, both lines get the same parameter value. The character pattern is added to the second line, in this case "_ _". Use js to search for a pattern in highlight text. If the pattern is found reset seletectedIndex to -1, so the user sees the first line of text if they select the second.

 js: function checkSelectedValue(str) { var val = str.options[str.selectedIndex].text; var indx = str.selectedIndex; var patt = /_ _/g; var result = patt.test(val); if(result){ str.selectedIndex = str.selectedIndex - 1; } } cf: <cfselect name="title" id="title" onChange="checkSelectedValue(this);"> <option value="">please select a title</option> <cfloop query="study"> <cfset study.title = trim(study.title) /> <cfif len(study.title) lt 110> <option value="#study.studyid#">#study.title#</option> <cfelse> <cfset spacemarker = find(" ", study.title,100) /> <cfset rightchars = len(study.title) - spacemarker /> <cfif spacemarker eq 0> <option value="#study.studyid#">#study.title#</option> <cfelse> <cfset str1 = left(study.title,spacemarker) /> <cfset str2 = right(study.title,rightchars) /> <option value="#study.studyid#">#str1#</option> <option value="#study.studyid#">&nbsp;&nbsp;_ _ #str2#</option> </cfif> </cfif> </cfloop> </cfselect> 

Answer 6

  <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Complainse Enteprrise Platform</title> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <style> .widget{ word-wrap: break-word; text-align: left; display: block; cursor: pointer; } </style> <body> <div id='mask' onclick=" $('#drpDown option').each(function() { if($(this)){ val= $(this).attr('value') ; tex= $(this).html(); $('#dropList').append('<span id='+$(this).val()+'><font>'+tex+'</font></span>'); } }); $( '#dropList').children().addClass('widget'); $( '#dropList').children().click(function(){ $('#drpDown').val($(this).attr('id')); $('#dropList').hide(); $('#dropList').children().remove(); $('#drpDown').trigger('change'); }); $(function() { $('#dropList').children().each(function(){ $(this).hover( function() { $(this).css('background-color', '#0E15D5') }, function() { $(this).css('background-color', '') }); }); }); $('#dropList').show() ; " style='width:200px; height:20px; position: absolute; background:white; filter :alpha (opacity=0);'></div> <select id="drpDown" style="width:50px; " onchange="alert('its changed');"> <option value="1">aaaaa</option> <option value="2">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</option> <option value="3">ccccccccccc</option> <option value="4">dddd</option> </select> <div id="dropList" style="display:none;width:45px; border:solid black 1px"> </div > <div> </body> </html> 

Answer 7

I answered old questions like this. This is a common problem that has not actually been addressed even since 2009 :). I wrote this a while ago that you might find useful: http://dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html

This is a jquery plugin for creating an unordered list supported by a hidden select element.

The source is on github: https://github.com/tncbbthositg/GiantDropdown

You will be able to handle behavior and styles in UL that you cannot with SELECT. Everything else should be the same, because the selection list still exists, it is just hidden, but UL will use it as a backup data storage (if you want).