jquery - work - x-editable-ajustando el ancho del campo de entrada

x-editable example

Question

¿Cómo se ajusta el ancho de entrada de la ventana emergente?

No parece que haya ninguna opción para ello en

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

Answer 1

Podemos usar tpl dentro de una variedad de opciones.

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

Hice una modificación en el código para controlar el ancho. Tal vez no sea la solución elegante, pero funciona para mí. ¡Saludos! Consiste en agregar un div como guía para obtener el ancho de la clase .editableform .form-control

¡Haz BKP antes de hacer cambios!

bootstrap-editable.js en línea 14 agregue este código

var GLOBAL_aux_id_ei = 0;

En la línea 181 agregar este código

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

En la línea 628 agrega este código y modifica el código existente

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 en la clase .editable-container.editable-inline en la línea 158

width: 100%;

Answer 3

Puede evitar tener Javascript personalizado para cada elemento en la página usando el atributo data-inputclass:

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

Y CSS:

.some_class{
   width: 240px;
}

Answer 4

Si no desea cambiar el archivo .css, puede configurar el estilo del campo de entrada editable en x cambiando su plantilla:

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

Tenga en cuenta el atributo ''tpl''.

Answer 5

podría usar la opción inputclass para proporcionar una clase CSS, donde puede agregar el ancho para el campo de entrada, como

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

Y css:

.some_class{
   width: 240px;
}

Answer 6

si está haciendo esto con angularjs xeditable, puede usar ''e-style'' en lugar de ''style'' como:

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

No estoy seguro si eso funcionaría sin angulos ... pero vale la pena intentarlo