х-редактируемые -

Question

Как отрегулировать ширину входного всплывающего окна

не кажется, регулируя ширину поля ввода, как есть любой вариант для него в

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

Answer 1

мы можем использовать 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">'), 
     ), 

    ), 

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, вы можете установить стиль поля ввода х редактироваться путем изменения его шаблона:

<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 вы можете просто использовать «е-стиль» вместо «стиль», как:

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

я не уверен, если это будет работать без angularjs ... но это стоит попробовать

Answer 5

Вы можете избежать пользовательских Javascript для каждого элемента на странице с помощью атрибута данных-inputclass:

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

Сделайте BKP перед внесением изменений!

бутстраповские-editable.js On Line 14 добавить этот код

var GLOBAL_aux_id_ei = 0; 

On Line 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 добавить этот код и изменить существующий код

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