jQuery x-editable - 调整输入字段的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16454589/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
x-editable - adjusting the width of input field
提问by Daniel
How do you adjust the input width of the popup
你如何调整弹出窗口的输入宽度
it doesn't seem like there is any option for it in
似乎没有任何选择
采纳答案by Mahen
we can use tpl inside array of options
我们可以在选项数组中使用 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">'),
),
),
回答by Sudhir Bastakoti
you could use inputclassoption to provide a CSS class, where you can add the width for input field, like
您可以使用inputclassoption 提供一个 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>
And css:
和CSS：
.some_class{
width: 240px;
}
回答by Jason Hartfield
You can avoid having custom Javascript for each element on the page by using the data-inputclass attribute:
通过使用 data-inputclass 属性，您可以避免为页面上的每个元素使用自定义 Javascript：
<a href="#" id="username" data-inputclass="some_class" data-type="text" data-pk="1" >awesome</a>
And CSS:
和 CSS：
.some_class{
width: 240px;
}
回答by Oldboy
If you don't want to change the .css file, you can set the style of the x-editable input field by changing its template:
如果不想更改 .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>
Note the 'tpl' attribute.
请注意“tpl”属性。
回答by rikkitikkitumbo
if you're doing this with angularjs xeditable you can just use 'e-style' instead of 'style' like:
如果您使用 angularjs xeditable 执行此操作，则可以使用“e-style”而不是“style”，例如：
<a> e-style="width: 180px" editable-text="article.title" e-required="" </a>
I'm not sure if that would work without angularjs... but it's worth a try
我不确定在没有 angularjs 的情况下这是否可行……但值得一试
回答by Martin Hayon
I made a modification in the code to control the width. Maybe not the elegant solution, but it works for me. Greetings! Consist in add a div as a guide to get width for the .editableform .form-control class
我在代码中进行了修改以控制宽度。也许不是优雅的解决方案，但它对我有用。你好！包括添加一个 div 作为获取 .editableform .form-control 类的宽度的指南
Make BKP before make changes!
在进行更改之前先进行 BKP！
bootstrap-editable.js On Line 14 add this code
bootstrap-editable.js 在第 14 行添加此代码
var GLOBAL_aux_id_ei = 0;
On Line 181 add this code
在第 181 行添加此代码
var w = $('#div-guide-'+GLOBAL_aux_id_ei).width();
w = w - ((w * 20) / 100);
$('.editableform .form-control').css({"width":""+w+"px"});
On Line 628 add this code and modify the existing code
在第 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-container.editable-inline class on line 158
bootstrap-editable.css 在第 158 行的 .editable-container.editable-inline 类中
width: 100%;
