X编辑 - 调整输入栏的宽度

Question

你如何调整弹出的输入宽度

它似乎并不像有在

​​

Answer 1

我们可以使用第三方物流内部的选项阵列

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

    ), 

Answer 2

你它的任何选项可以使用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 3

如果你不想改变.css文件，你可以通过改变它的模板设置x编辑输入字段的样式：

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

注意“第三方物流”的属性。

Answer 4

，如果你与angularjs这样xeditable你可以使用“E型”而不是“风格”，如：

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

我不知道，如果这样做没有angularjs工作...但它是值得一试

Answer 5

您可以通过使用数据inputclass属性避免自定义JavaScript在页面上的每个元素：

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

和CSS：

.some_class{ 
    width: 240px; 
} 

Answer 6

我对代码进行了修改以控制宽度。也许不是优雅的解决方案，但它适用于我。问候！ 包括添加一个div来获取.editableform .form-control类的宽度

在做出更改之前做出BKP！

引导-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 In .editable-co上线ntainer.editable内联类158

width: 100%;