x-editable - adjusting the width of input field

Question

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

Answer 1

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

Answer 2

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

Answer 3

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.