x-editable popover完全不顯示

我正在使用x-editable js。我的x可編輯彈出窗口未完全顯示。x-editable popover完全不顯示

enter image description here

我覺得在z-index的問題，我想它的超級鏈接，但沒有運氣。

<script type="text/javascript"> 
    $(function() { 
    $('.extraSectionTitle').editable({ 
     success: function (response, newValue) { 
      if (response.status == 'error') { 
       return response.msg; 
      } 
     } 
    }); 
    $('.extraSectionDescription').editable({ 
     success: function (response, newValue) { 
      if (response.status == 'error') { 
       return response.msg; 
      } 
     } 
    }); 
    }); 
</script> 

<div class="row-fluid"> 
    <div class="span7"> 
    <div class="accordion-body collapse in"> 
     <div class="row-fluid" id="myDiv"> 
      <div class="box box-color box-bordered"> 
       <div class="box-title"> 
        <h3><i class="icon-th-list"></i> Hi</h3> 

       </div> 
       <div class="box-content nopadding"> 
        <table class="table table-hover table-nomargin table-bordered"> 
         <thead> 
          <tr> 
           <th>Title</th> 
           <th>Description</th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr> 
           <td> 
            <a class="editable editable-click extraSectionTitle" data-original-title="Edit Title" data-pk="1" data-type="text" href="#" data-url="#" data-placement="right" title="Edit Title">ASD ASD ASD ASD ASD </a> 
           </td> 
           <td> 
            <a class="editable editable-click extraSectionDescription" data-original-title="Edit Description" data-pk="${extra?.id}" data-type="text" href="#" data-url="#" data-placement="right" title="Edit Description">DSA DSA DSA DSA DSA </a> 
           </td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div> 
    <div class="span5"> 
    <div class="box box-color box-bordered"> 
     <div class="box-title"> 
      <h3><i class="icon-th-list"></i> Hi</h3> 

     </div> 
     <div class="box-content nopadding">Hello Hi Hello Hi Hello Hi</div> 
    </div> 
    </div> 
</div>

DEMO FIDDLE

來源

2013-10-23 user1690588

一些代碼？你的小提琴不起作用 – DaniP

我已經添加了代碼並固定了小提琴。 – user1690588

嗨的問題是，tootltip是在表內，並與position:absolute所以他正在尋找他與position:relative最接近父被定位。

他發現的父母是類.collapse的div。而這個類有財產

overflow:hidden;

你有兩個解決方案與CSS。

一個在您的css中鍵入這個。啓用div中的溢出視圖。在你的CSS

div.collapse { 
overflow:visible; 
}

兩個類型此。刪除這個div作爲相對父對象。

div.collapse { 
position:static; 
}

你的小提琴http://jsfiddle.net/kGQ2R/6/

來源

2013-10-23 13:51:12 DaniP

非常感謝您快速解釋的答案。第二個選項工作正常。首先也是工作，但如果我點擊另一個div第一個不是崩潰/隱藏（我有幾個可摺疊的div）。 – user1690588

:)我很樂意幫助 – DaniP

非常感謝，我試過選項1，它的工作 – webaba

我知道這是一個遲到的答覆有點的，但我只是有這個問題，並努力解決它以不同的方式可以幫助其他人。

X-editable基於Bootstrap的Popover插件，因此將container: 'body'添加到您的.editable()設置（或任何其他不在overflow:hidden元素內的容器）也將解決此問題。

這很可能只適用於X-editable的Bootstrap版本，但我沒有檢查過。

編輯：

只想補充一點，容器的選擇..

$('#username').editable({ container: 'body', type: 'text', pk: 1, url: '/post', title: 'Enter username' });

來源

2014-07-22 07:48:58 luukx20

感謝您的回覆。你能否提供一個可用的'jsfiddle'，這是非常有幫助的。 – user1690588

這是在x-editable的bootstrap v2版本中工作的。謝謝 – Captain0

'container：'body''爲我固定，沒有它的按鈕和表單域不坐在一條線上。 – martincarlin87

x-editable popover完全不顯示

回答

相關問題