x-editierbares Popover nicht vollständig gezeigt

Question

Ich verwende x-editable js. Mein x-editierbares Popover wird nicht vollständig angezeigt.

Ich denke Problem in z-index, ich habe es auf Hyperlink versucht, aber ohne Erfolg.

<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

Answer 1

Hallo das Problem ist, dass die tootltip in einer Tabelle befindet und mit position:absolute so suchte er für seinen engstenen Elternteil mit position:relative positioniert werden.

Das übergeordnete Element, das er findet, ist das div mit Klasse .collapse. Und diese Klasse hat die Eigenschaft

overflow:hidden; 

Sie haben zwei Lösungen mit CSS.

Ein geben Sie das in Ihrem CSS ein. Aktiviert die Anzeige des Überlaufs im div.

div.collapse { 
overflow:visible; 
} 

Zwei Art dies in Ihrem CSS. Entferne dieses div als relativen Elternteil.

div.collapse { 
position:static; 
} 

Ihre Fiddle http://jsfiddle.net/kGQ2R/6/

Answer 2

Ich weiß, das so etwas wie eine späte Antwort, aber ich habe nur mit diesem Problem zu kämpfen und löste es auf eine andere Weise, die anderen Menschen helfen können.

X-editierbare basiert auf Bootstrap des Popover Plugin, so container: 'body' auf Ihre .editable() Einstellungen hinzugefügt (oder einen anderen Behälter, die nicht in Ihrem overflow:hidden Elemente ist) wird auch dieses Problem beheben.

Dies wird höchstwahrscheinlich nur mit der Bootstrap-Version von X-editable funktionieren, aber ich habe das nicht überprüft.

Edit:

Fügen Sie einfach diesen Container Option ..

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