x-editable - 调整输入字段的宽度

Question

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

它似乎没有任何选择

http://vitalets.github.io/x-editable/docs.html#text

Answer 1

您可以使用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;
}

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;
}

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'属性.

Answer 4

如果您使用angularjs xeditable进行此操作,您可以使用'e-style'而不是'style',如:

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

我不确定如果没有angularjs那会有用......但是值得一试

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">'),
        ),

    ),