Blogger:モバイルサイト(5)textareaの幅を自動調節されるようにする

前の関連記事:Blogger:モバイルサイト(4)Chromeでモバイルサイトのナビボタンをカスタマイズ


iOS SafariでHTMLソースをみる方法に設置したtextareaがモバイサイトでは幅が自動調整されずに右に大きく張り出してしまいます。これをなんとかしたいと思います。

width:autoはうまくいかないけどwidth:100%はちゃんとうまくいく



このtextareaがモバイサイトでは幅が自動調整されていません。


右にスクロールすると枠外までtextareaがはみ出ています。
<textarea cols="80" name="code_ireru" rows="5"></textarea>
この部分のHTMLはこんな感じになっているのですが幅はwidthでなくてcolsで字数で指定するようになっています。
<textarea style="width:auto" name="code_ireru"></textarea>
width:autoにすると最初はtextareaの中身がないせいか、思ったとおりの幅に広がってくれません。
<textarea style="width:100%;height:90px" name="code_ireru" >
結局これであっさり解決しました。

heightは%でいろいろ数値をいろいろ変更してみても同じ狭い幅にしかなりませんでしたので試行錯誤してpxで指定しました。


PCサイトですと高さが間延びしますがモバイルサイトの幅ははみ出さなくなりました。

参考にしたサイト


textareaの幅を画面と合わせたい | HTMLのQ&A【OKWave】
tableareaはtextareaの誤植だと思います。

次の関連記事:Blogger:モバイルサイト(6)更新日時の表示などヘッダーの改造

PR

0 件のコメント:

コメントを投稿