你如何调整弹出的输入宽度
它似乎并不像有在它的任何选项
http://vitalets.github.io/x-editable/docs.html#text
你如何调整弹出的输入宽度
它似乎并不像有在它的任何选项
http://vitalets.github.io/x-editable/docs.html#text
我们可以使用第三方物流内部的选项数组
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">'),
),
),
你可以使用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;
}
您可以通过避免使用数据inputclass属性具有自定义JavaScript在页面上的每个元素:
<a href="#" id="username" data-inputclass="some_class" data-type="text" data-pk="1" >awesome</a>
和CSS:
.some_class{
width: 240px;
}
如果你不想改变.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>
请注意,“第三方物流”的属性。
如果你这样做与angularjs xeditable你可以使用,而不是“风格”像“电子式”:
<a> e-style="width: 180px" editable-text="article.title" e-required="" </a>
我不知道,如果这样做没有angularjs工作...但它是值得一试
我在代码以控制宽度进行了修改。 也许不是完美的解决方案,但它为我工作。 问候! 在于添加一个div为指导,以获得宽度为.editableform .FORM控制类
让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>';
自举-editable.css在.editable-container.editable内联类上管线158
width: 100%;