none
Trying to get textarea to work with newlines and horizontal scrollbar (MVC2)

    질문

  • This is becoming extremely frustrating. I have a textarea which is going to be displaying some HL7 data, basically long strings of data with segments separated by \r\n newlines.

    This works great in every other browser when I have it like this:

    <textarea id="<%:m.Request.Id %>" cols="80" rows="6" readonly="readonly" style="display: none; white-space: nowrap; overflow:auto;"></textarea>

    In every browser but IE it has a horizontal scroll as long as the longest line of text, and has line breaks for every \r\n. In IE though this just displays all data on the same line, replacing the line breaks with just a space.

    The textarea gets populated by calling Ajax.ActionLink (with UpdateTargetId option) and made visible by the OnSuccess AjaxOptions call to another javascript method which just makes the field visible, and the ActionLink invisible.



    • 편집됨 Bon Franklin 2012년 3월 8일 목요일 오후 6:15
    2012년 3월 8일 목요일 오후 5:26

답변

  • I just solved this.


    Instead of updating a textarea with the content, I made a div with the id of what used to be the text area and wrapped the textarea element around the string coming back from the call with Ajax.ActionLink. Basically like an HTML Helper function. It isn't nearly as clean as I wanted, but it displays the results properly in all browsers.


    I am still quite certain this was a bug in IE's handling of textarea newlines.

    • 답변으로 표시됨 Bon Franklin 2012년 3월 13일 화요일 오후 7:37
    2012년 3월 13일 화요일 오후 7:37

모든 응답

  • Adding wrap="off" doesn't preserve the newlines like the documentation says it should. I am 100% certain I am passing my string to the view with \r\n
    2012년 3월 8일 목요일 오후 7:35
  • Hi Bon,

    Can you plese provide a web link...so we can debug your page in full.... we need to not only see the rest of your markup but also we need to inspect your server's response headers for x-ua headers...

    We also need in your case to see the contents (data) returned by your ajax request....

    js control characters (\n\r) are only used with document.write statements....

    newline characters of the innerHTML of <textarea> are <br/>

    <textarea>this is the first line<br/>this is the second</textarea>

    Please also validate and correct any markup errors first.

    Regards.


    Rob^_^

    2012년 3월 8일 목요일 오후 8:49
  • I can't expose the site externally, sorry. But there are zero errors on the page, markup or otherwise, I assure you.

    The data is formatted with newlines in \r\n format. It is a series of long strings broken by \r\n, I need to preserve the long strings without wrapping them until a \r\n is found.

    This is a textarea populated by an MVC2 helper call to Ajax.ActionLink using the AjaxOptions UpdateTargetId with the id the same as the desired textarea.

    The horizontal scroll and newlines in the textarea are displayed properly in Chrome, Firefox, Safari, and Opera. 

    In IE it is one single line, where the \r\n is in the data, it shows as a single space in the textarea.


    • 편집됨 Bon Franklin 2012년 3월 8일 목요일 오후 9:04
    2012년 3월 8일 목요일 오후 9:03
  • Here is a simplification of how it is in the asp code. The method GetMessagePart returns a string with newlines formatted as \r\n.

    <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<AIE_Manager.Models.Interchange>" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> View Interchange Results </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <textarea id="<%:Model.Request.Id %>" cols="80" rows="6" readonly="readonly" style="display:none; overflow:scroll" wrap="off"></textarea> <%:Ajax.ActionLink( "Get Message Part", "GetMessagePart", new { id = Model.Request.Id.ToString() }, new AjaxOptions() { UpdateTargetId = Model.Request.Id.ToString(), OnSuccess = "(function(){hideButton('" + Model.Request.Id.ToString() + "');})" }, new { id = "_" + Model.Request.Id })%> </asp:Content> <asp:Content ID="Content3" ContentPlaceHolderID="Scripts" runat="server"> <script type="text/javascript"> function hideButton(id) { document.getElementById('_' + id).style.display = 'none'; document.getElementById(id).style.display = 'block'; } </script>



    The ActionLink has the same id as the textarea it is associated with but with an underscore prepended to the string. That is so I can hide the ActionLink and make visible the textarea from the same call to the hideButton javascript method. 
    • 편집됨 Bon Franklin 2012년 3월 8일 목요일 오후 9:21
    2012년 3월 8일 목요일 오후 9:16
  • no good... we need a web link...

    Rob^_^

    2012년 3월 8일 목요일 오후 9:29
  • You can implement this scenario quite trivially, especially with the sample I just posted.

    Here is some sample data that will demonstrate it. Heck, I've even put in the newline characters for your string so you can just paste it in your method. You don't need a web link, don't use that as an excuse if you don't know the answer.

    MSH|^~\&|TESTCLIENT|TESTCLIENT_SITE1|AZ Immn Registry|AZ|20120220143612||VXU^V04|HRFCVIASEMDCAHYOBCDA|P|2.5.1\r\nPID|1||314598^^^^MR||TEST^IMMUNIZATIONTHREE^M^^^^L||19871012|M||""|300 EL CAMINO REAL^^SIERRA VISTA^AZ^85635^""^H^^""||||eng|""|""|2029056|852457896|||""|||0|""|""|""||""\r\nNK1|1|TEST^CBORD||300 EL CAMINO REAL^^SIERRA VISTA^^85635|5204173874\r\nNK1|2|TEST^IMMUNIZATIONTHREE||300 EL CAMINO REAL^^SIERRA VISTA^^85635\r\nORC|RE||48E388E0-3F7F-4A2A-B164-2757111AFDF9||||||||853432320^FakeName^Rachael^Suzanne^^^^^^^^^^""\r\nRXA|0|1|20120216080000||90371|0.5|ZZ|||853432320^FakeName^Rachael^Suzanne^^^^^ROP User Pool^Personnel^^^PRSNLID^""|||||561sg684|20121101000000|OTH|""||CP

    2012년 3월 8일 목요일 오후 9:32
  • Screenshots.

    How it should look, and does look in Chrome, FF, etc:

    How it looks in IE:

    2012년 3월 8일 목요일 오후 9:37
  • Use an ajax update panel with a asp.net label control instead of a textbox control

    or

    <pre><asp:label runat="server" id="lblOutput"></asp:label></pre>

    or

    my origingal server side correction to replace /n/r with <br/> in the message variable...

    "/' is a javascript control character not a html line break. You have to sanitize the string... use <pre> elements to display "text" as is.. (eg. display a snippet of html or javascript snippet)

    Add the Developer Toolbar extension to your FX.... you should see errors or warnings from the browser that it has modified the strings in the message on the script console.

    Regards.


    Rob^_^

    2012년 3월 9일 금요일 오후 7:53
  • I'm not using a textbox control. I am using a textarea.

    I already tried replacing the string line breaks with html line breaks but the <br/> characters just appear in the text area. I think you really don't understand this problem, it is to me clearly an inconsistent behavior in IE.

    I'm experimenting with other things, but this text needs to be in some container in which the user can do ctrl+A to select all the text in a proper format, so a simple label isn't sufficient. I wanted to use a text area for a reason.

    Thanks for trying though, I'll post here if I solve it.

    2012년 3월 12일 월요일 오후 10:54
  • Do you have VS 2010 SP1 installed?

    MVC 4 is available for download...http://forums.asp.net/1146.aspx/1?MVC


    Rob^_^

    2012년 3월 12일 월요일 오후 10:58
  • Yes, I have SP1. 

    I'm trying to stick to MVC2 for now since every other MVC project in my office is using that. May have to update sooner though if it ends up solving this issue. 

    2012년 3월 12일 월요일 오후 11:03
  • Here is some of what I think is conclusive indication that this is a screwup in IE. Go ahead and paste this code into any View you want and open it up in IE and another browser.

                <textarea id="FirstTest" rows="6" cols="80" readonly="readonly" style="display:block; overflow:scroll;" wrap="off">MSH|^~\&|TESTCLIENT|TESTCLIENT_SITE1|AZ Immn Registry|AZ|20120220143612||VXU^V04|HRFCVIASEMDCAHYOBCDA|P|2.5.1<br/>PID|1||314598^^^^MR||TEST^IMMUNIZATIONTHREE^M^^^^L||19871012|M||""|300 EL CAMINO REAL^^SIERRA VISTA^AZ^85635^""^H^^""||||eng|""|""|2029056|852457896|||""|||0|""|""|""||""<br/>NK1|1|TEST^CBORD||300 EL CAMINO REAL^^SIERRA VISTA^^85635|5204173874<br/>NK1|2|TEST^IMMUNIZATIONTHREE||300 EL CAMINO REAL^^SIERRA VISTA^^85635<br/>ORC|RE||48E388E0-3F7F-4A2A-B164-2757111AFDF9||||||||853432320^Whiteside^Rachael^Suzanne^^^^^^^^^^""<br/>RXA|0|1|20120216080000||90371|0.5|ZZ|||853432320^Whiteside^Rachael^Suzanne^^^^^ROP User Pool^Personnel^^^PRSNLID^""|||||561sg684|20121101000000|OTH|""||CP</textarea>
                <textarea id="SecondTest" rows="6" cols="80" readonly="readonly" style="display:block; overflow:scroll;" wrap="off">MSH|^~\&|TESTCLIENT|TESTCLIENT_SITE1|AZ Immn Registry|AZ|20120220143612||VXU^V04|HRFCVIASEMDCAHYOBCDA|P|2.5.1
    PID|1||314598^^^^MR||TEST^IMMUNIZATIONTHREE^M^^^^L||19871012|M||""|300 EL CAMINO REAL^^SIERRA VISTA^AZ^85635^""^H^^""||||eng|""|""|2029056|852457896|||""|||0|""|""|""||""
    NK1|1|TEST^CBORD||300 EL CAMINO REAL^^SIERRA VISTA^^85635|5204173874
    NK1|2|TEST^IMMUNIZATIONTHREE||300 EL CAMINO REAL^^SIERRA VISTA^^85635
    ORC|RE||48E388E0-3F7F-4A2A-B164-2757111AFDF9||||||||853432320^Whiteside^Rachael^Suzanne^^^^^^^^^^""
    RXA|0|1|20120216080000||90371|0.5|ZZ|||853432320^Whiteside^Rachael^Suzanne^^^^^ROP User Pool^Personnel^^^PRSNLID^""|||||561sg684|20121101000000|OTH|""||CP
    </textarea>

    The results will be that id FirstTest will have all records displayed all on the same line, despite the inner HTML having <br/> line breaks. This is proof to me that line breaks inside a TextArea are not supposed to be HTML line breaks but actual string line breaks (\r\n).

    The SecondTest will display properly, although in the aspx it has no line HTML breaks, only implied line breaks in the string in the View code itself.

    This SecondTest displays properly in IE and Chrome and FF.

    But the FirstTest does not match up with the same results I have in IE in my original problem. In the original problem there are no line breaks, but it doesn't have <br/> characters. The newlines in IE are replaced with a single space " " character instead of breaking to the next line.

    The bottom line is that IE is ignoring the valid line breaks when they are populated by Ajax.ActionLink with UpdateTargetId.


    Here is what the results of the test above look like.

    I'll next try AJAX techniques other than Ajax.ActionLink to populate a textarea and see if it is a workaround for this problem.

    • 편집됨 Bon Franklin 2012년 3월 12일 월요일 오후 11:48
    2012년 3월 12일 월요일 오후 11:40
  • the MVC forum may be a better place to post

    or

    you can submit feedback for the IE Team at connect.microsoft.com/ie

    Regards.


    Rob^_^

    2012년 3월 13일 화요일 오전 2:52
  • I just solved this.


    Instead of updating a textarea with the content, I made a div with the id of what used to be the text area and wrapped the textarea element around the string coming back from the call with Ajax.ActionLink. Basically like an HTML Helper function. It isn't nearly as clean as I wanted, but it displays the results properly in all browsers.


    I am still quite certain this was a bug in IE's handling of textarea newlines.

    • 답변으로 표시됨 Bon Franklin 2012년 3월 13일 화요일 오후 7:37
    2012년 3월 13일 화요일 오후 7:37
  • Bon,

    You can submit bug reports or feature request to the MS Issue tracking portal at http://connect.microsoft.com/ie. this is a public forum, we do not work for or represent MS. Search for any outstanding issue tickets for 'textarea' first... and always validate your markup.

    "\" is an escape character for js strings.

    <textarea cols="50" rows="5"><script type="text/javascript">document.write('hello world\r\nhello world\r\nhello world');</script></textarea>

     


    Rob^_^

    2012년 3월 13일 화요일 오후 8:20