0

<label></label>内部に入力テキストボックスを持つDIV要素があります。

基本的に、DIV要素でjQuery .resizable()を有効にしましたが、DIV要素を現在よりも小さくすると、DIVの右側がテキストボックスに触れ始めると、テキストボックスが新しい行にプッシュされます。

サイズ変更可能な DIV で min-width を使用してみましたが、実際には値がラベルのサイズである必要があるため、期待どおりではありませんでした。この問題は、DIV サイズがテキストボットに触れると依然として発生します。

<div id='div1' style='width:300px'>
    <label>Test&nbsp;
        <input type='text' style='width:100px' id='inputBox'/>
    </label>
</div>

$("#div1").resizable({
    handles: "e, w, sw, ne, nw, se"
});

私もこれを持っていますが、DIV側が追いつき、DIVの「右側」がテキストボックスに触れると、ラベルの下の新しい行に移動します...テキストボックスのサイズ変更を続けたいが、それが続くのを止めたい新しい行:

$(".ui-resizable-e")
.mousedown(function() {
    $(window).mousemove(function() {
        isDragging = true;
        $(window).unbind("mousemove");
        var width = $('#inputBox').width();
        var parentWidth = $("#div1").offsetParent().width();
        var percent = 100*width/parentWidth+50;

        $("#inputBox").css({'width': percent + '%'});

    });
});
4

1 に答える 1

0

最初に質問に答えるには、次を使用してラッピングを防ぐことができます。

white-space:nowrap;

ただし、水平方向のサイズ変更可能なテキスト ボックスを作成しようとしていると思いますか? 以下はあなたのために働くでしょうか？余分な CSS を追加することで、次の行にドロップすることなくテキスト ボックスのサイズを変更します。

あなたのリクエストを誤解していたらごめんなさい。

HTML:

<div id='div1' style='width:300px; border: 1px solid black; white-space:nowrap; padding-right: 50px;'>
    <label>Test&nbsp;
        <input type='text' style='width:100%;' id='inputBox'/>
    </label>
</div>

JSFiddle: http://jsfiddle.net/9xrP6/

于 2013-10-21T15:44:13.470 に答える