22

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

Daniel
  • 34,125
  • 17
  • 102
  • 150
  • Related: [How can I use bootstrap's grid columns to set the width of X-Editable inputs?](http://stackoverflow.com/questions/33022900/how-can-i-use-bootstraps-grid-columns-to-set-the-width-of-x-editable-inputs) – adamdport Nov 05 '15 at 14:50

7 Answers7

28

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;
}
Sudhir Bastakoti
  • 99,167
  • 15
  • 158
  • 162
  • 1
    It's a good answer but it doesn't work with 'width: 100%' for instance. To make it work you have to override some styles manually. – Sauleil Aug 11 '16 at 13:14
21

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;
}
Jason Hartfield
  • 310
  • 2
  • 7
  • The only modification I had to make to this was to make the CSS more 'specific' so that it could override the bootstrap CSS. input[type=text].some_class { width:60px; } – IsolatedStorage Jul 20 '16 at 00:59
19

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.

Saša
  • 293
  • 2
  • 11
10

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

rikkitikkitumbo
  • 954
  • 3
  • 17
  • 38
5

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">'),
        ),

    ),
Mahen
  • 760
  • 9
  • 12
  • 1
    Could you mention what language/framework is being used here? If it's pure JS, I don't recognize it. Tags on the OP don't mention anything out of the ordinary. – jcairney Apr 09 '19 at 19:21
  • 1
    @jcairney That looks like Yii to me. – KST Dec 11 '19 at 19:12
1

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%;
Martin Hayon
  • 23
  • 5
0

After trying all the others that didn't work, this is how I got it to work:

Update your "data-tpl" inside your HTML and overwrite the template with a new field and specify your row and cols there:

<a href="#" id="someInputfield" data-tpl="<textarea cols=80 rows=10>"
ZDRuX
  • 13
  • 2