x-edytowalne - dostosowanie szerokości pola wprowadzania

Question

Jak ustawić szerokość wejściowa popup

nie wydaje się jak tam jest jakaś opcja dla niego w

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

Answer 1

możemy użyć TPL wewnątrz tablicy opcji

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

ci przydałby inputclass opcję, aby zapewnić klasę CSS, gdzie można dodać szerokość na polu wprowadzania, jak

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

i CSS:

.some_class{ 
    width: 240px; 
} 

Answer 3

Jeśli nie chcesz zmienić plik .css, można ustawić styl polu wejściowym x-edytowane przez zmianę jego formy:

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

Uwaga atrybut 'OC.

Answer 4

jeśli robisz to z angularjs xeditable można po prostu użyć „E-styl” zamiast „stylu” jak:

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

Nie jestem pewien, czy to będzie działać bez angularjs ... ale warto spróbować

Answer 5

można uniknąć niestandardowego Javascript dla każdego elementu na stronie za pomocą atrybutu danych-inputclass:

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

i CSS:

.some_class{ 
    width: 240px; 
} 

Answer 6

Wprowadziłem modyfikację kodu, aby kontrolować szerokość. Może nie jest to eleganckie rozwiązanie, ale działa dla mnie. Pozdrowienia! Należy dodać div jako przewodnik, aby uzyskać szerokość dla .editableform .form-control class

Ustaw BKP przed wprowadzeniem zmian!

bootstrap-editable.js On Line 14 dodać ten kod

var GLOBAL_aux_id_ei = 0; 

On Line 181 dodać ten kod

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

On Line 628 Dodaj ten kod i zmodyfikować istniejący kod

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-klasa na linii 158

width: 100%;