is it possible to make ASP.NET Html.ListBoxFor to work with multiline items ? Because right now i have a list of strings, some strings are very long, so they do not fit into list box, and are cut, i.e, instead of "qwertyuiop" i see only "qwer". The width of the list box cannot be changed, that's how it must be. Can i make it to show a single item/string over multiple lines(i tried inserting new line symbol, html line break symbol into string, doesn't work) ? Or do i have to use some other html element for that instead of Html.ListBoxFor ?
Edit: My code is:
@Html.ListBoxFor(x => x.MyFriendsIdList, new SelectList(this.Model.MyFriendsDisplayList, "Id", "Name"), new { id = "FriendsSourceList" })
Anyway, i'm gonna need to make a multiline listbox plus i need to have ability to search/filter through items and hide/show them as i type text in search text field. Any recomendations ?
Edit: newest code example :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!-- none of these styles work on ff or ie9... -->
<style>
select {
-ms-word-break: break-all;
-ms-word-wrap: break-all;
-webkit-word-break: break-word;
-webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
display: inline-block;
}
</style>
<head>
<title>Site Title</title>
</head>
<body>
<h1 style="margin-left:100px;">My List Box Source Example</h1>
<!-- In style, "word-wrap:break-word" makes items appear over multiple lines if needed, works only on chrome, ff and ie9 broken -->
<select name="sometext" multiple="multiple" style="width:200px; height:250px; resize:none; margin-left:100px;" id="mylist">
<option value="1">VeryLongText123456VeryLongText123456VeryLongText123456VeryLongText123456VeryLongText123456VeryLongText123456END</option>
<option value="3">Text1</option>
<option value="5">Text2</option>
<option value="6">Text3</option>
<option value="7">Text4</option>
<option value="9">Text5</option>
<option value="12">abc6</option>
<option value="14">SomeRandomText</option>
<option value="45">ghi8</option>
<option value="16">jkl9</option>
<option value="11">zzz</option>
<option value="32">xxx</option>
<option value="73">LastItemHere</option>
</select>
<h2 style="margin-left:100px;">Search field</h2>
<textarea rows="2" cols="45" style="margin-left:100px; resize:none; overflow-y:hidden;" id="searchfield"></textarea><br /><br />
<input id="FilterButton" type="submit" style="margin-left:200px; width: 125px" value="Filter List" class="radius button"/><br /><br />
<input id="HideButton" type="submit" style="margin-left:200px; width: 195px" value="Hide items that contains" class="radius button"/>
<h2 style="margin-left:100px;">My Text Area Example</h2>
<textarea rows="3" cols="45" style="margin-left:100px; resize:none; overflow-y:hidden;" id="mytextarea"></textarea>
<script src="jquery-2.1.1.js"></script>
<script type="text/javascript">
// Titles - when mouse over entry
options = document.getElementById("mylist").getElementsByTagName("option");
for (var i = 0; i < options.length; i++) {
options[i].title = options[i].text;
}
$("#FilterButton").click(function (x) {
x.preventDefault();
//var size = document.getElementById("searchfield").rows;
//console.log("size : " + size);
//document.getElementById("searchfield").rows = size + 1;
//Search and hide works on chrome and ff, ie9 broken
var searchText = $("#searchfield").val();
var list = document.getElementById("mylist");
for (var c = 0; c < list.length; c++) {
if(searchText != null && searchText != '') {
var index = list[c].text.toLowerCase().indexOf(searchText.toLowerCase());
if(index >= 0) {
$('#mylist option[value=' + list[c].value + ']').show();
}
else {
$('#mylist option[value=' + list[c].value + ']').hide();
}
}
else {
$('#mylist option[value=' + list[c].value + ']').show();
}
}
});
$("#HideButton").click(function (x) {
x.preventDefault();
var searchText = $("#searchfield").val();
var list = document.getElementById("mylist");
for (var c = 0; c < list.length; c++) {
if(searchText != null && searchText != '') {
var index = list[c].text.toLowerCase().indexOf(searchText.toLowerCase());
if(index >= 0) {
$('#mylist option[value=' + list[c].value + ']').hide();
}
else {
$('#mylist option[value=' + list[c].value + ']').show();
}
}
else {
$('#mylist option[value=' + list[c].value + ']').show();
}
}
});
</script>
</body>
</html>