MultiLine Textbox on IPhone [Answered]RSS

• • Reply
  afache

  Member

  63 Points

  503 Posts

  MultiLine Textbox on IPhone

  Jan 18, 2012 05:05 AM|afache|LINK

  <p>Hi,</p> <p>&nbsp; My multiLine textbox does not show the scrollbars when there is too much text inside it on the iphone.</p> <p>Please help!!</p> <p>My code looks like this:</p> <p>&lt;%<span size="4" face="Consolas" color="#0000ff" style="font-family:Consolas; color:#0000ff; font-size:medium"><span size="4" face="Consolas" color="#0000ff" style="font-family:Consolas; color:#0000ff; font-size:medium"><span size="4" face="Consolas" color="#0000ff" style="font-family:Consolas; color:#0000ff; font-size:medium">=</span></span></span><span size="4" face="Consolas" style="font-family:Consolas; font-size:medium"><span size="4" face="Consolas" style="font-family:Consolas; font-size:medium"> Html.TextAreaFor(x =&gt; x.Body,10,10, </span></span><span size="4" face="Consolas" color="#0000ff" style="font-family:Consolas; color:#0000ff; font-size:medium"><span size="4" face="Consolas" color="#0000ff" style="font-family:Consolas; color:#0000ff; font-size:medium"><span size="4" face="Consolas" color="#0000ff" style="font-family:Consolas; color:#0000ff; font-size:medium">new</span></span></span><span size="4" face="Consolas" style="font-family:Consolas; font-size:medium">{ maxlength = 1000})%&gt;</span></p> <p><span size="4" face="Consolas" style="font-family:Consolas; font-size:medium">css:</span></p> <p><span size="4" face="Consolas" style="font-family:Consolas; font-size:medium"><span size="4" face="Consolas" color="#800000" style="font-family:Consolas; color:#800000; font-size:medium"><span size="4" face="Consolas" color="#800000" style="font-family:Consolas; color:#800000; font-size:medium"><span size="4" face="Consolas" color="#800000" style="font-family:Consolas; color:#800000; font-size:medium"><span size="4" face="Consolas" color="#800000" style="font-family:Consolas; color:#800000; font-size:medium"><span size="4" face="Consolas" color="#800000" style="font-family:Consolas; color:#800000; font-size:medium"></span></span></span></span></span></span></p> <p>#Body</p> <p><span size="4" face="Consolas" style="font-family:Consolas; font-size:medium"><span size="4" face="Consolas" style="font-family:Consolas; font-size:medium">{</span></span><span size="4" face="Consolas" color="#ff0000" style="font-family:Consolas; color:#ff0000; font-size:medium"><span size="4" face="Consolas" color="#ff0000" style="font-family:Consolas; color:#ff0000; font-size:medium"><span size="4" face="Consolas" color="#ff0000" style="font-family:Consolas; color:#ff0000; font-size:medium">border</span></span></span><span size="4" face="Consolas" style="font-family:Consolas; font-size:medium"><span size="4" face="Consolas" style="font-family:Consolas; font-size:medium">:</span></span><span size="4" face="Consolas" color="#0000ff" style="font-family:Consolas; color:#0000ff; font-size:medium"><span size="4" face="Consolas" color="#0000ff" style="font-family:Consolas; color:#0000ff; font-size:medium"><span size="4" face="Consolas" color="#0000ff" style="font-family:Consolas; color:#0000ff; font-size:medium">1px</span></span></span><span size="4" face="Consolas" style="font-family:Consolas; font-size:medium"><span size="4" face="Consolas" style="font-family:Consolas; font-size:medium"> </span></span><span size="4" face="Consolas" color="#0000ff" style="font-family:Consolas; color:#0000ff; font-size:medium"><span size="4" face="Consolas" color="#0000ff" style="font-family:Consolas; color:#0000ff; font-size:medium"><span size="4" face="Consolas" color="#0000ff" style="font-family:Consolas; color:#0000ff; font-size:medium">solid</span></span></span><span size="4" face="Consolas" style="font-family:Consolas; font-size:medium"><span size="4" face="Consolas" style="font-family:Consolas; font-size:medium"> </span></span><span size="4" face="Consolas" color="#0000ff" style="font-family:Consolas; color:#0000ff; font-size:medium"><span size="4" face="Consolas" color="#0000ff" style="font-family:Consolas; color:#0000ff; font-size:medium"><span size="4" face="Consolas" color="#0000ff" style="font-family:Consolas; color:#0000ff; font-size:medium">Black</span></span></span><span size="4" face="Consolas" style="font-family:Consolas; font-size:medium"><span size="4" face="Consolas" style="font-family:Consolas; font-size:medium">; </span></span><span size="4" face="Consolas" color="#ff0000" style="font-family:Consolas; color:#ff0000; font-size:medium"><span size="4" face="Consolas" color="#ff0000" style="font-family:Consolas; color:#ff0000; font-size:medium"><span size="4" face="Consolas" color="#ff0000" style="font-family:Consolas; color:#ff0000; font-size:medium">width</span></span></span><span size="4" face="Consolas" style="font-family:Consolas; font-size:medium"><span size="4" face="Consolas" style="font-family:Consolas; font-size:medium">:</span></span><span size="4" face="Consolas" color="#0000ff" style="font-family:Consolas; color:#0000ff; font-size:medium"><span size="4" face="Consolas" color="#0000ff" style="font-family:Consolas; color:#0000ff; font-size:medium"><span size="4" face="Consolas" color="#0000ff" style="font-family:Consolas; color:#0000ff; font-size:medium">100%</span></span></span><span size="4" face="Consolas" style="font-family:Consolas; font-size:medium"><span size="4" face="Consolas" style="font-family:Consolas; font-size:medium">; </span></span><span size="4" face="Consolas" color="#ff0000" style="font-family:Consolas; color:#ff0000; font-size:medium"><span size="4" face="Consolas" color="#ff0000" style="font-family:Consolas; color:#ff0000; font-size:medium"><span size="4" face="Consolas" color="#ff0000" style="font-family:Consolas; color:#ff0000; font-size:medium">height</span></span></span><span size="4" face="Consolas" style="font-family:Consolas; font-size:medium"><span size="4" face="Consolas" style="font-family:Consolas; font-size:medium">:</span></span><span size="4" face="Consolas" color="#0000ff" style="font-family:Consolas; color:#0000ff; font-size:medium"><span size="4" face="Consolas" color="#0000ff" style="font-family:Consolas; color:#0000ff; font-size:medium"><span size="4" face="Consolas" color="#0000ff" style="font-family:Consolas; color:#0000ff; font-size:medium">100%</span></span></span><span size="4" face="Consolas" style="font-family:Consolas; font-size:medium">}</span></p> <p><span size="4" face="Consolas" style="font-family:Consolas; font-size:medium"></span></p> <p></p> <p><span size="4" face="Consolas" style="font-family:Consolas; font-size:medium"></span></p>
• • Reply
  ReenuGouse

  Member

  659 Points

  376 Posts

  Re: MultiLine Textbox on IPhone

  Jan 18, 2012 05:11 AM|ReenuGouse|LINK

  <p><span>Use UITextView instead</span></p> <p>Or check</p> <p><a href="http://stackoverflow.com/questions/5021935/creating-multiline-textbox-using-html-helper-function">http://stackoverflow.com/questions/5021935/creating-multiline-textbox-using-html-helper-function</a></p>
• • Reply
  afache

  Member

  63 Points

  503 Posts

  Re: MultiLine Textbox on IPhone

  Jan 18, 2012 05:23 AM|afache|LINK

  <p>I am creating an asp.net mvc mobile web application, and not a native Iphone application.</p>
• • Reply
  ReenuGouse

  Member

  659 Points

  376 Posts

  Re: MultiLine Textbox on IPhone

  Jan 18, 2012 05:25 AM|ReenuGouse|LINK

  <p>Ok,</p> <p><a href="http://stackoverflow.com/questions/5021935/creating-multiline-textbox-using-html-helper-function">http://stackoverflow.com/questions/5021935/creating-multiline-textbox-using-html-helper-function</a></p> <p><a href="http://stackoverflow.com/questions/5021935/creating-multiline-textbox-using-html-helper-function"></a></p> <p></p> <p>Check this link...</p>
• • Reply
  afache

  Member

  63 Points

  503 Posts

  Re: MultiLine Textbox on IPhone

  Jan 18, 2012 08:16 AM|afache|LINK

  <p>The example on the link did not solve my problem. I still do not have a scroll bar on the textbox on the iphone.</p>
• • Reply
  ReenuGouse

  Member

  659 Points

  376 Posts

  Re: MultiLine Textbox on IPhone

  Jan 18, 2012 08:42 AM|ReenuGouse|LINK

  <p>Ok, then modify ur CSS as below and check..</p> <p>#Body</p> <p><span size="4" face="Consolas"><span size="4" face="Consolas">{</span></span></p> <p><span size="4" face="Consolas"><span size="4" face="Consolas"></span></span><span size="4" face="Consolas" color="#ff0000"><span size="4" face="Consolas" color="#ff0000"><span size="4" face="Consolas" color="#ff0000">border</span></span></span><span size="4" face="Consolas"><span size="4" face="Consolas">:</span></span><span size="4" face="Consolas" color="#0000ff"><span size="4" face="Consolas" color="#0000ff"><span size="4" face="Consolas" color="#0000ff">1px</span></span></span><span size="4" face="Consolas"><span size="4" face="Consolas">&nbsp;</span></span><span size="4" face="Consolas" color="#0000ff"><span size="4" face="Consolas" color="#0000ff"><span size="4" face="Consolas" color="#0000ff">solid</span></span></span><span size="4" face="Consolas"><span size="4" face="Consolas">&nbsp;</span></span><span size="4" face="Consolas" color="#0000ff"><span size="4" face="Consolas" color="#0000ff"><span size="4" face="Consolas" color="#0000ff">Black</span></span></span><span size="4" face="Consolas"><span size="4" face="Consolas">;</span></span></p> <p><span size="4" face="Consolas"><span size="4" face="Consolas">&nbsp;</span></span><span size="4" face="Consolas" color="#ff0000"><span size="4" face="Consolas" color="#ff0000"><span size="4" face="Consolas" color="#ff0000">width</span></span></span><span size="4" face="Consolas"><span size="4" face="Consolas">:10</span></span><span size="4" face="Consolas" color="#0000ff"><span size="4" face="Consolas" color="#0000ff"><span size="4" face="Consolas" color="#0000ff">0%</span></span></span><span size="4" face="Consolas"><span size="4" face="Consolas">;&nbsp;</span></span></p> <p><span size="4" face="Consolas"><span size="4" face="Consolas"></span></span><span size="4" face="Consolas" color="#ff0000"><span size="4" face="Consolas" color="#ff0000"><span size="4" face="Consolas" color="#ff0000">height</span></span></span><span size="4" face="Consolas"><span size="4" face="Consolas">:50</span></span><span size="4" face="Consolas" color="#0000ff"><span size="4" face="Consolas" color="#0000ff"><span size="4" face="Consolas" color="#0000ff">%;</span></span></span></p> <p><span size="4" face="Consolas" color="#0000ff"><span size="4" face="Consolas" color="#0000ff"><span size="4" face="Consolas" color="#0000ff">overflow-y: scroll;</span></span></span></p> <p><span size="4" face="Consolas" color="#0000ff"><span size="4" face="Consolas" color="#0000ff"><span size="4" face="Consolas" color="#0000ff"></span></span></span><span size="4" face="Consolas">}</span></p>
• • Reply
  afache

  Member

  63 Points

  503 Posts

  Re: MultiLine Textbox on IPhone

  Jan 18, 2012 08:50 AM|afache|LINK

  <p>I tried the overflow-y:scroll; already and it did not work. Everthing works well on the emulator but on the iphone I don't see a scrollbar.</p>
• • Reply
  ReenuGouse

  Member

  659 Points

  376 Posts

  Re: MultiLine Textbox on IPhone

  Jan 18, 2012 08:52 AM|ReenuGouse|LINK

  <p>Use this..</p> <pre class="lang-cs prettyprint"><code><span class="pun">&lt;%=</span><span class="pln"> </span><span class="typ">Html</span><span class="pun">.</span><span class="typ">TextArea</span><span class="pun">(</span><span class="str">&quot;Body&quot;</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> cols </span><span class="pun">=</span><span class="pln"> </span><span class="str">&quot;55&quot;</span><span class="pun">,</span><span class="pln"> rows </span><span class="pun">=</span><span class="pln"> </span><span class="str">&quot;2&quot;</span><span class="pln"> </span><span class="pun">})</span><span class="pln"> </span><span class="pun">%&gt;</span></code></pre> <pre class="lang-cs prettyprint"><code><span class="pun">now check it once...</span></code></pre>
• • Reply
  afache

  Member

  63 Points

  503 Posts

  Re: MultiLine Textbox on IPhone

  Jan 19, 2012 03:42 AM|afache|LINK

  <p>I tried it, I swear. I still do not see scrollbars on the IPhone. I even tried a scrollable div instead of a textbox control and I still see the same behavior. The user has to put his two fingers on the multiline textbox or div and in this way he can scroll up and down to see the text.</p>
• • Reply
  ReenuGouse

  Member

  659 Points

  376 Posts

  Re: MultiLine Textbox on IPhone

  Jan 19, 2012 04:09 AM|ReenuGouse|LINK

  <p>If U want to use Divs, then write this..</p> <pre class="default prettyprint"><code><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">&quot;</span><span class="kwd">width</span><span class="pun">:</span><span class="lit">300px</span><span class="pun">;</span><span class="kwd">height</span><span class="pun">:</span><span class="lit">250px</span><span class="pun">;</span><span class="kwd">overflow</span><span class="pun">:</span><span class="pln">auto</span><span class="pun">;</span><span class="atv">&quot;</span><span class="tag">&gt;&lt;/div&gt; and see..</span></code></pre>
• • Reply
  ReenuGouse

  Member

  659 Points

  376 Posts

  Re: MultiLine Textbox on IPhone

  Jan 19, 2012 04:19 AM|ReenuGouse|LINK

  <p>Or Check the below..</p> <pre class="default prettyprint"><code><span class="pun">&lt;%:</span><span class="typ">Html</span><span class="pun">.</span><span class="typ">TextAreaFor</span><span class="pun">(</span><span class="pln">x </span><span class="pun">=&gt;</span><span class="pln"> x</span><span class="pun">.</span><span class="typ">SomeProperty</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="lit">@class</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="str">&quot;resizer&quot;</span><span class="pln"> </span><span class="pun">})</span><span class="pln"> %&gt;</span></code></pre> <pre class="default prettyprint"><code><span class="pln">In CSS:</span></code></pre> <pre class="default prettyprint"><code><span class="pln">.</span></code></pre> <pre class="default prettyprint"><code><span class="str">resizer</span></code></pre> <pre class="default prettyprint"><code><span class="str">{</span></code></pre> <pre class="default prettyprint"><code><span class="str">Width: 100px;</span></code></pre> <pre class="default prettyprint"><code><span class="str">Height: 50px;</span></code></pre> <pre class="default prettyprint"><code><span class="str">overflow-y: auto;</span></code></pre> <pre class="default prettyprint"><code><span class="str">}</span></code></pre>
• • Reply
  afache

  Member

  63 Points

  503 Posts

  Re: MultiLine Textbox on IPhone

  Jan 20, 2012 03:10 AM|afache|LINK

  <p>On the iphone the user can manage to scroll with his two fingers I would say, but on the android phone whether I use a textbox or a scrollable div there is no way for the user to scroll and see the text. I have no idea why.</p>
• • Reply
  afache

  Member

  63 Points

  503 Posts

  Re: MultiLine Textbox on IPhone

  Jan 27, 2012 09:14 AM|afache|LINK

  <p>I had to use a plugin called iscroll which solved my problem.</p>