可编辑文本框 - 调整输入框的宽度

Question

如何调整弹出窗口的输入框宽度？

在 http://vitalets.github.io/x-editable/docs.html#text 中似乎没有该选项。

- Daniel

---

相关：如何使用Bootstrap的网格列设置X-Editable输入框的宽度？ - adamdport

Answer 1

您可以使用inputclass选项来提供CSS类，在其中添加输入字段的宽度，例如：

您可以使用inputclass选项来提供CSS类，在其中添加输入字段的宽度，例如：

<a href="#" id="username" data-type="text" data-pk="1">awesome</a>
<script>
$(function(){
    $('#username').editable({
        url: '/post',
        title: 'Enter username',
        inputclass: 'some_class'
    });
});
</script>

并且 CSS：

.some_class{
   width: 240px;
}

- Sudhir Bastakoti

---

这是一个很好的回答，但它不能与“width: 100%”一起使用。为了使其正常工作，您必须手动覆盖一些样式。 - Sauleil

Answer 2

您可以使用data-inputclass属性来避免为页面上的每个元素编写自定义Javascript：

<a href="#" id="username" data-inputclass="some_class" data-type="text" data-pk="1" >awesome</a>

并且CSS：

.some_class{
   width: 240px;
}

- Jason Hartfield

---

我所做的唯一修改就是使CSS更加“具体”，以便它可以覆盖Bootstrap CSS。input[type=text].some_class { width:60px; } - IsolatedStorage

Answer 3

如果您不想改变 .css 文件，可以通过更改模板来设置 x-editable 输入字段的样式：

<a href="#" id="username" data-type="text" data-pk="1">awesome</a>
<script>
    $(function(){
        $('#username').editable({
            url: '/post',
            title: 'Enter username',
            tpl: "<input type='text' style='width: 400px'>"
        });
    });
</script>

注意'tpl'属性。

- Oldboy

Answer 4

如果您正在使用AngularJS Xeditable进行此操作，则可以使用“e-style”而不是“style”：

<a> e-style="width: 180px" editable-text="article.title" e-required="" </a>

我不确定在没有 AngularJS 的情况下这是否可行......但值得一试。

- rikkitikkitumbo

---

最简单的答案。谢谢。 - Rod Hartzell

Answer 5

我们可以在选项数组中使用 tpl。

array(
        'class'=>'editable.EditableColumn',
        'name'=>'url',
        'value'=>'getFullUrl("/").$data->url',
        'id'=>'menu_id',
        'headerHtmlOptions'=>array('text-align: center;'),
        'htmlOptions'=>array(''),
        'editable'=>array(
            'apply'=>true,
            'name' => 'url',
            'url'=>$this->createUrl('menuItems/XUpdate'),
            'placement'=>'right',
            'options'=> array('tpl'=>'<input type="text" style="width: 500px">'),
        ),

    ),

- Mahen

---

你能提一下这里使用的是什么语言/框架吗？如果是纯JS，我不认识它。OP上的标签没有提到任何异常情况。 - jcairney

@jcairney 那看起来像是 Yii。 - KST

Answer 6

我对代码进行了修改以控制宽度。也许不是最优雅的解决方案，但对我来说有效。问候！ 这意味着添加一个div作为指南来获取.editableform .form-control类的宽度。

在进行更改之前，请先备份！

bootstrap-editable.js第14行添加以下代码

var GLOBAL_aux_id_ei = 0;

在第181行添加以下代码。

var w = $('#div-guide-'+GLOBAL_aux_id_ei).width();
w = w -  ((w * 20) / 100);
$('.editableform .form-control').css({"width":""+w+"px"});

在第628行添加此代码并修改现有代码。

GLOBAL_aux_id_ei = GLOBAL_aux_id_ei + 1; 
$.fn.editableform.template = '<form class="form-inline editableform"    id="frm-editable-'+GLOBAL_aux_id_ei+'">'+
'<div class="control-group">' + 
'<div>\n\
<div class="editable-input"></div><div class="editable-buttons"></div>\n\
</div>'+
'<div class="editable-error-block"></div>' + 
'</div>' + 
'</form>\n\
<div style="display:none;" id="div-guide-'+GLOBAL_aux_id_ei+'"></div>';

bootstrap-editable.css 在第158行的.editable-container.editable-inline类中

width: 100%;

- Martin Hayon

Answer 7

在尝试了其他方法都无效之后，这是我让它正常工作的方法：

更新你 HTML 中的 "data-tpl"，并用一个新的字段覆盖模板，在那里指定你的行和列：

<a href="#" id="someInputfield" data-tpl="<textarea cols=80 rows=10>"

- ZDRuX