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

Posted 2023-05-08

【中文标题】x-editable - 调整输入字段的宽度

【英文标题】：x-editable - adjusting the width of input field

【发布时间】：2013-05-03 12:06:52

【问题描述】：

如何调整弹窗的输入宽度

似乎没有任何选项

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

【问题讨论】：

相关：How can I use bootstrap's grid columns to set the width of X-Editable inputs?

【参考方案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;

【讨论】：

这是一个很好的答案，但它不适用于 'width: 100%' 例如。要使其正常工作，您必须手动覆盖一些样式。

【参考方案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;

【讨论】：

我必须对此进行的唯一修改是使 CSS 更“具体”，以便它可以覆盖引导 CSS。输入[类型=文本].some_class 宽度：60px;

【参考方案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”属性。

【参考方案4】：

如果您使用 angularjs xeditable 执行此操作，您可以使用“e-style”而不是“style”，例如：

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

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

【讨论】：

最简单的答案。谢谢。

【参考方案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">'),
        ),

    ),

【讨论】：

您能否提及这里使用的是什么语言/框架？如果是纯JS，我认不出来。 OP 上的标签没有提到任何不寻常的东西。

@jcairney 这对我来说就像 Yii。

【参考方案6】：

我在代码中进行了修改以控制宽度。也许不是优雅的解决方案，但它对我有用。你好！ 包括添加一个 div 作为获取 .editableform .form-control 类的宽度的指南

在进行更改之前进行 BKP！

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