Изменение размера DIV делает текстовое поле на новой строке

Question

Изменение размера DIV делает текстовое поле на новой строке

0

У меня есть элемент DIV, который имеет <label></label> и вводит текстовое поле внутри него.

В принципе, я включил jQuery.resizable() в элементе DIV, но когда вы делаете элемент DIV меньше, чем он есть в настоящее время, текстовое поле выводится на новую строку, когда правая сторона DIV начинает касаться текстового поля.

Я пробовал использовать min-width для изменяемого размера и DIV, но его не совсем ожидалось, поскольку значение действительно должно быть размером метки - эта проблема все еще возникает, когда размер 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 + '%'});

    });
});

realtek 21 окт. 2013, в 18:08

Источник

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Mark · Accepted Answer · 2013-10-21T13-26-00.000Z

Сначала, чтобы ответить на ваш вопрос, вы можете использовать следующее, чтобы предотвратить упаковку:

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/

Это отлично, большое спасибо. Да, вы правы, это именно то, что я после. Моя единственная проблема в том, что даже после копирования кода кажется, что текстовое поле 100% учитывает также размер этикетки. Таким образом, мои маркеры (и черная граница применены) появляются почти в середине текстового поля. Не после этого? Я не вижу никакой разницы в коде!
Это как ширина текстового поля составляет 100% от всего div, что делает его больше, чем там, где находятся маркеры. Не 100% оставшегося места?