x thể chỉnh sửa - điều chỉnh độ rộng của trường nhập

Question

Làm thế nào để bạn điều chỉnh độ rộng đầu vào của các cửa sổ bật lên

nó không có vẻ như có bất kỳ tùy chọn cho nó trong

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

Answer 1

chúng ta có thể sử dụng tpl bên loạt các tùy chọn

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

bạn có thể sử dụng inputclass tùy chọn để cung cấp một lớp CSS, nơi bạn có thể thêm chiều rộng cho lĩnh vực đầu vào, như

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

Và css:

01.

.some_class{ 
    width: 240px; 
} 

Answer 3

Nếu bạn không muốn thay đổi các tập tin .css, bạn có thể thiết lập các phong cách của lĩnh vực đầu vào x-có thể chỉnh sửa bằng cách thay đổi mẫu của nó:

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

Lưu ý 'tpl' thuộc tính.

Answer 4

nếu bạn đang làm điều này với angularjs xeditable bạn chỉ có thể sử dụng 'e-style' thay vì 'phong cách' như:

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

Tôi không chắc chắn nếu điều đó sẽ làm việc mà không angularjs ... nhưng nó có giá trị một thử

Answer 5

Bạn có thể tránh việc tùy chỉnh Javascript cho mỗi phần tử trên trang bằng cách sử dụng thuộc tính dữ liệu inputclass:

<a href="#" id="username" data-inputclass="some_class" data-type="text" data-pk="1" >awesome</a> 

Và CSS:

.some_class{ 
    width: 240px; 
} 

Answer 6

Tôi đã sửa đổi mã để kiểm soát chiều rộng. Có lẽ không phải là giải pháp thanh lịch, nhưng nó hoạt động cho tôi. Lời chào hỏi! Bao gồm thêm div làm hướng dẫn để lấy chiều rộng cho lớp .editableform .form-control

Tạo BKP trước khi thực hiện thay đổi!

bootstrap-editable.js On Line 14 thêm mã này

var GLOBAL_aux_id_ei = 0; 

On Line 181 thêm mã này

var w = $('#div-guide-'+GLOBAL_aux_id_ei).width(); 
w = w - ((w * 20)/100); 
$('.editableform .form-control').css({"width":""+w+"px"}); 

On Line 628 thêm mã này và sửa đổi các mã hiện

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-inline lớp trên dòng 158

width: 100%;