Comment ajustez-vous la largeur d'entrée du popup
il ne semble pas qu'il y ait une option pour cela dans
nous pouvons utiliser tpl à l'intérieur du tableau d'options
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">'),
),
),
vous pouvez utiliser l'option inputclass
pour fournir une classe CSS, où vous pouvez ajouter la largeur du champ de saisie, comme
<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>
Et css:
.some_class{
width: 240px;
}
Vous pouvez éviter d'avoir du Javascript personnalisé pour chaque élément de la page en utilisant l'attribut data-inputclass:
<a href="#" id="username" data-inputclass="some_class" data-type="text" data-pk="1" >awesome</a>
Et CSS:
.some_class{
width: 240px;
}
Si vous ne souhaitez pas modifier le fichier .css, vous pouvez définir le style du champ de saisie modifiable en x en modifiant son modèle:
<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>
Notez l'attribut 'tpl'.
si vous faites cela avec angularjs xeditable, vous pouvez simplement utiliser 'e-style' au lieu de 'style' comme:
<a> e-style="width: 180px" editable-text="article.title" e-required="" </a>
Je ne sais pas si cela fonctionnerait sans angularjs ... mais ça vaut le coup d'essayer
J'ai fait une modification dans le code pour contrôler la largeur. Peut-être pas la solution élégante, mais cela fonctionne pour moi. Salutations! Consiste à ajouter un div comme guide pour obtenir la largeur de la classe .editableform .form-control
Faites BKP avant de faire des changements!
bootstrap-editable.js Sur la ligne 14 ajoutez ce code
var GLOBAL_aux_id_ei = 0;
Sur la ligne 181, ajoutez ce code
var w = $('#div-guide-'+GLOBAL_aux_id_ei).width();
w = w - ((w * 20) / 100);
$('.editableform .form-control').css({"width":""+w+"px"});
Sur la ligne 628, ajoutez ce code et modifiez le code existant
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 Dans la classe .editable-container.editable-inline sur la ligne 158
width: 100%;