jquery - x-editable - 入力フィールドの幅を調整する

Question

ポップアップの入力幅をどのように調整しますか

それにはオプションがないようです

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

Answer 1

次のように、オプションを使用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 2

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

「tpl」属性に注意してください。

Answer 3

オプションの配列内で 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 4

幅を制御するためにコードを変更しました。エレガントな解決策ではないかもしれませんが、私にとってはうまくいきます。ご挨拶！.editableform .form-control クラスの幅を取得するためのガイドとして div を追加します。

変更する前に BKP を作成してください。

bootstrap-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>';

158 行目の .editable-container.editable-inline クラスの bootstrap-editable.css

width: 100%;