popover x-editable non mostrato completamente

Question

Sto usando x-editable js. Il mio popover x-editable non è mostrato completamente.

penso problema in z-index, ho provato su collegamento ipertestuale, ma senza fortuna.

<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

Hi il problema è che il tootltip è all'interno di una tabella e con position:absolute così che stava cercando il suo più stretto genitore con position:relative da posizionare.

Il genitore che trova è il div con classe .collapse. E questa classe ha la proprietà

overflow:hidden; 

Hai due soluzioni con css.

Uno digita questo nel tuo css. Abilita la visualizzazione dell'overflow nel div.

div.collapse { 
overflow:visible; 
} 

Due tipo di questo nel vostro CSS. Rimuovi questo div come genitore relativo.

div.collapse { 
position:static; 
} 

vostro violino http://jsfiddle.net/kGQ2R/6/

Answer 2

So che questo è un po 'di una risposta in ritardo, ma ero solo alle prese con questo problema e risolto in modo diverso che può aiutare altre persone.

X-modificabile si basa su plug Popover di Bootstrap, in modo da aggiungere ai vostri container: 'body'.editable() impostazioni (o qualsiasi altro contenitore che non è all'interno del vostro elemento overflow:hidden) sarà anche risolvere questo problema.

Questo molto probabilmente funzionerà solo con la versione Bootstrap di X-editable ma non l'ho verificato.

Edit:

solo aggiungere che l'opzione contenitore ..

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