发表新帖
发表新帖

Wrap long-text in drop-down list?

前端 未结
关注
7 1115
轻奢々
轻奢々 2021-01-19 15:19

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 [

相关标签:
7条回答
  • 慢半拍i
    2021-01-19 15:37

    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>
    0 讨论(0)
  • 失恋的感觉
    2021-01-19 15:39 
         <!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">ffffdd</option>
  </select>

   <div id="dropList" style="display:none;width:45px; border:solid black 1px">
   </div >

   <div>


   </body>
   </html>
    0 讨论(0)
  • 孤独总比滥情好
    2021-01-19 15:48

    Short answer: No.

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

    0 讨论(0)
  • 长发绾君心
    2021-01-19 15:48

    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).

    0 讨论(0)
  • 灰色年华
    2021-01-19 15:51

    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").

    0 讨论(0)
  • 长情又很酷
    2021-01-19 15:52

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题