1

レスポンシブ テキストエリアに問題があります。ユーザーがフォームを拡張しようとするまで（さまざまなサイズで）正常に動作します（現在、高さ/最大高さ/幅/最大幅の組み合わせでサイズを固定しています）。これに対する解決策はありますか？私は何を間違っていますか - この問題は以前に見たことがありません。

アルバム -
http://imgur.com/a/9ICnF#0

ウェブサイト -
http://pxlprfct.co.uk/

HTML

<textarea name="message" id="message" placeholder="Message"></textarea>

CSS

form{
    border: none;
    outline: none;
    text-align: center;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    background: black;

    /*Android Hack*/
    margin-top: -1px;
    padding-bottom: 2em;
}

    #message
{
    border: none;
    outline: none;
    color: black;

    display: block;
    background: white;
    padding: 1em;
    margin: auto;
    font-size: 1em;
    margin-bottom: 1em;
    font-family: 'Open Sans', sans-serif;

    height: 12em;
    max-height: 12em;

    width: 70%;
    max-width: 70%;

}

乱雑なコードで申し訳ありません-すべてがすぐにハッキングされました! :)
よろしくお願いします！

http://jsfiddle.net/qfYQN/1/

4

2 に答える 2

2

この問題に対する確固たる解決策は思いつきません。

私の見方では、2 つのオプションがあります。サイズ変更 css プロパティを無効にするか、JavaScript を使用して、ユーザーがボックスのサイズを変更したときにマージンを自動にリセットします。

CSS:

 resize:none;

jquery: 残念ながら、テキスト ボックスのサイズを変更するためのイベント リスナーがないため、これが最も簡単な方法です。

 $('#message').mouseup(function(){
    $(this).css('margin', 'auto');  
 });

http://jsfiddle.net/WLBde/

それ以外の場合は、X 秒ごとにテキスト ボックスの幅をチェックする間隔を設定し、異なる場合は上記のように余白をリセットします。

お役に立てれば！

于 2013-01-23T12:16:57.930 に答える