x-editable - adjusting the width of input field

How do you adjust the input width of the popup

it doesn't seem like there is any option for it in

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

Answers


we can use tpl inside array of 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">'),
        ),

    ),

you could use inputclass option to provide a CSS class, where you can add the width for input field, like

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

And css:

.some_class{
   width: 240px;
}

You can avoid having custom Javascript for each element on the page by using the data-inputclass attribute:

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

And CSS:

.some_class{
   width: 240px;
}

If you don't want to change the .css file, you can set the style of the x-editable input field by changing its template:

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

Note the 'tpl' attribute.


if you're doing this with angularjs xeditable you can just use 'e-style' instead of 'style' like:

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

I'm not sure if that would work without angularjs... but it's worth a try


I made a modification in the code to control the width. Maybe not the elegant solution, but it works for me. Greetings! Consist in add a div as a guide to get width for the .editableform .form-control class

Make BKP before make changes!

bootstrap-editable.js On Line 14 add this code

var GLOBAL_aux_id_ei = 0;

On Line 181 add this 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 add this code and modify the existing 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-container.editable-inline class on line 158

width: 100%;

Need Your Help

Check what a running process is doing: print stack trace of an uninstrumented Python program

python debugging process daemon stack-trace

Is there a way on Linux to check what a running Python daemon process is doing? That is, without instrumenting the code and without terminating it? Preferably I'd like to get the name of the module...

When is it OK to use Javascript and when not?

javascript css xhtml accessibility screen-readers

Is it good practice not to use much javascript/jquery? Should we avoid it as much as possible (for good accessibility)?