Question

我希望jeditable提供的编辑字段与触发它的文本保持在同一行。我创建了一个jsfiddle以显示我的意思

正如您所看到的，编辑字段总是在下一行...我尝试了“white-space：nowrap;”和“显示：内联;”但是所有这些似乎都被jeditable忽略了。我的javascript看起来像这样

$(document).ready(function () {
    $(".display-date").editable('www.example.com', {
        type: 'select',
        data: "{'Belgrade':'Belgrade','Paris':'Paris','London':'London', 'selected':'Belgrade'}",
        cancel: 'cancel',
        submit: 'ok',
    });
});


$(".edit-trigger").click(function () {
    $(this).prev().trigger(".display-date");
});

和html是

<p style="font-size:10pt; white-space: nowrap;display: inline;">Next meeting:
    <div class="display-date select_next_jc" style="font-size:10pt; white-space: nowrap;display: inline;">test-time <a class="edit-trigger">Edit</a>

    </div>
</p>

感谢卡尔

Answer 1

在Jeditable选项中使用style: 'inherit'：

$(document).ready(function () {
    $(".display-date").editable('www.example.com', {
        type: 'select',
        data: "{'Belgrade':'Belgrade','Paris':'Paris','London':'London', 'selected':'Belgrade'}",
        cancel: 'cancel',
        submit: 'ok',
        style: 'inherit'
    });
});

JSFiddle：https://jsfiddle.net/06g8q2g8/

这将导致新创建的表单继承与您在可编辑元素上设置的相同样式（包括display: inline）。

来源：http://www.appelsiini.net/projects/jeditable

在jeditable触发器后防止换行

1 个答案: