Как вы настраиваете ширину ввода всплывающего окна
не похоже, что для него есть опция
Как вы настраиваете ширину ввода всплывающего окна
не похоже, что для него есть опция
мы можем использовать 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">'),
),
),
вы можете использовать параметр 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;
}
Вы можете избежать использования Javascript для каждого элемента на странице с помощью атрибута data-inputclass:
<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>
Обратите внимание на атрибут tpl.
Если вы делаете это с помощью angularjs xeditable, вы можете просто использовать "e-style" вместо "style", например:
<a> e-style="width: 180px" editable-text="article.title" e-required="" </a>
Я не уверен, что это будет работать без angularjs... но стоит попробовать
Я сделал модификацию кода для управления шириной. Может быть, не изящное решение, но оно работает для меня. Приветствую! Сопоставьте добавление 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>';
самозагрузки-editable.css В .editable-container.editable-inline class в строке 158
width: 100%;