Wrap long-text in drop-down list?

I have legibly long text in a drop-down list on my asp.net page. it violates the UI boundary and goes beyond the allocated region of UI.

Is there anyway I can wrap [not trim] it using CSS or javascript ? I must display the entire string, no matter how long it is.

Answers:

Answer

Longer answer: yes.

You can use not default element, but make your own with JavaScript and CSS. Your custom droplist element should contain few divs (or other HTML elements) as droplist items. When you'll set fixed width to droplist's cell, text will wrap inside.

One example is here (just picked up the 1st link from query in google: "JavaScript dropdown").

Answer

Short answer: No.

Longer answer: User a radio group instead of a select menu. You could use the CSS overflow property to add scrolling.

Answer

If you wanted to keep the UI representation of a native select box, there is a (rather nasty) way you could do it. It's rather manual, and I wouldn't really recommend it in general, but it could achieve what you want:

For each option in the list calculate a "width" based on the characters in that option's text. This should be a vague representation of the proportional font character widths (eg. ijtl=1, aopg = 2, m = 2.5, roughly, that sort of thing).

Anything that goes over a certain value (estimate this based on your available UI space) gets split at an appropriate point (a space, or hyphenate a long word - need to write an algorithm to do this). Repeat until you have no chunks over the desired size. You should end up with an array per option (some will be only length 1, if already short enough).

For each option with a matching array longer than 1, insert option nodes just after the original containing each of the subsequent chunks of text. Give them a particular class (eg. long-child), and the same value as the original. You should probably also give some visual indicator that it's a continuation of the previous item.

Supply an onchange event handler for the select, which checks to see if the selected option has the long-child class. If so, it should search preceding options to find the first which has the same value and does not have the long-child class. Set the selectedIndex to that option instead.

Like I said, nasty, but could achieve the effect you want. It might even be less code than Pawka's suggestion of rolling your own ;)

Answer

I think it's time to think of a different interface piece, rather than complicate a simple drop down.

But if you must, I'd use some css/javascript to recreate the drop down widget using list elements.

Answer

An example from a Coldfusion site where I needed a list of titles to select from and lengths were up to 200 characters. The select options are looped from a query and divided at a full word point if the text string is too long, both strings get the same option value. A character pattern is appended to the second string, in this case "_ _". Use js to look for the pattern in the text of the selection. If pattern is found reset seletectedIndex by -1 so user only sees the first line of the text if they choose 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
     <!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

I've been responding to old questions like this. It's a common problem that hasn't really been addressed even since 2009 :). I wrote this a while back that you may find helpful: http://dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html

It's a jquery plugin to make a styleable unordered list backed by the hidden select element.

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

You'd be able to handle behaviors and styles on the UL that you can't with the SELECT. Everything else should be the same because the select list is still there, it's just hidden but the UL will use it as a backing data store (if you will).

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.