x editierbare - die Breite des Eingabefeldes Anpassen

Question

Wie Sie die Eingangsbreite des Popup passen sich

es scheint nicht, wie es eine Option für sie in

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

Answer 1

wir tpl innerhalb Reihe von Optionen

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

Sie verwenden könnte inputclass Option eine CSS-Klasse zur Verfügung zu stellen, in dem Sie die Breite für Eingabefeld hinzufügen können, wie

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

und CSS:

.some_class{ 
    width: 240px; 
} 

Answer 3

Wenn Sie nicht über die CSS-Datei ändern möchten, können Sie den Stil der x-editierbare Eingabefeld gesetzt seine Vorlage durch Änderung:

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

Hinweis das Attribut ‚tpl‘.

Answer 4

wenn Sie tun dies mit AngularJS xeditable Sie nur die E-Stil "anstelle von‚Stil‘, wie verwenden:

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

sicher, dass ich nicht, ob das ohne AngularJS funktionieren würde ... aber es lohnt sich versuchen, ein

Answer 5

Sie vermeiden können für jedes Element benutzerdefinierte Javascript, auf der Seite, indem die Daten-inputclass Attribut:

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

und CSS:

.some_class{ 
    width: 240px; 
} 

Answer 6

Ich habe eine Änderung im Code vorgenommen, um die Breite zu steuern. Vielleicht nicht die elegante Lösung, aber es funktioniert für mich. Schöne Grüße! Fügen Sie ein div als Anleitung hinzu, um die Breite für die .editableform zu erhalten. Formularsteuerklasse

BKP vor Änderungen vornehmen!

Bootstrap-editable.js On Line 14 fügen Sie diesen Code

var GLOBAL_aux_id_ei = 0; 

On Line 181 fügen Sie diesen Code

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

On Line 628 diesen Code hinzufügen und ändern Sie den vorhandenen Code

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-Klasse auf der Linie 158

width: 100%;