X編輯 - 調整輸入欄的寬度

它似乎並不像有在

2013-05-09 Daniel

相關：如何使用引導程序的網格列設置X的寬度 - 可編輯輸入？]（http://stackoverflow.com/questions/33022900/how-can-i-use-bootstraps-grid-columns-to-set-the-width-of-x-editable-inputs） – adamdport 2015-11-05 14:50:40

我們可以使用第三方物流內部的選項陣列

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

    ),

來源

2016-03-07 12:08:09 Mahen

你它的任何選項可以使用inputclass選項提供一個CSS類，在這裏你可以添加寬度爲輸入字段，如

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

和CSS：

.some_class{ 
    width: 240px; 
}

來源

2013-05-09 05:28:45

這是一個很好的答案，但它不適用於'寬度：100％'例如。爲了使它工作，你必須手動覆蓋一些樣式。 – Sauleil 2016-08-11 13:14:54

如果你不想改變.css文件，你可以通過改變它的模板設置x編輯輸入字段的樣式：

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

注意「第三方物流」的屬性。

來源

2014-06-05 08:02:49 Oldboy

，如果你與angularjs這樣xeditable你可以使用「E型」而不是「風格」，如：

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

我不知道，如果這樣做沒有angularjs工作...但它是值得一試

來源

2014-07-30 19:23:40 rikkitikkitumbo

最簡單的答案。謝謝。 – 2016-08-01 20:40:06

您可以通過使用數據inputclass屬性避免自定義JavaScript在頁面上的每個元素：

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

和CSS：

.some_class{ 
    width: 240px; 
}

來源

2014-09-08 20:52:27

我不得不對此做出的唯一修改是使CSS更「特定」，以便它可以覆蓋引導CSS。 input [type = text] .some_class { width：60px; } – IsolatedStorage 2016-07-20 00:59:08

我對代碼進行了修改以控制寬度。也許不是優雅的解決方案，但它適用於我。問候！包括添加一個div來獲取.editableform .form-control類的寬度

在做出更改之前做出BKP！

引導-editable.js 在第14行添加以下代碼

var GLOBAL_aux_id_ei = 0;

在第181行添加以下代碼

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

在628行添加該代碼並修改現有的代碼

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-co上線ntainer.editable內聯類158

width: 100%;

來源

2015-09-09 14:26:23

X編輯 - 調整輸入欄的寬度

回答

相關問題