Jeditable - Zeige Editierfeld inline statt Block?

Question

Gibt es eine Möglichkeit, dass Jeditable das Bearbeitungsfeld als Inline-Element statt als Block anzeigt? Ich benutze auch Bootstrap 3. Ich habe versucht, ein "style" -Attribut mit verschiedenen Werten zum JS hinzuzufügen, aber sie scheinen keine Wirkung zu haben?

Hier ist, wie es aussieht, ursprünglich:

   

Aber das ist, wie es erscheint, wenn ich starten Sie den Wert mit Jeditable bearbeiten:

   

Dies ist wie ich möchte, dass es erscheint:

   

---

relevanten HTML:

<div class="col-sm-4"> 
    <span id="songtitle-CD001-1" class="edit-song">Song number 1</span> 
    (<span id="songdura-CD001-1" class="edit-song">00:03:16</span>) 
    <br /> 
    <span id="songtitle-CD001-2" class="edit-song">Song number 2</span> 
    (<span id="songdura-CD001-2" class="edit-song">00:03:46</span>) 
    <br /> 
</div> 

JS:

// Edit song text 
$('.edit-song').editable('templates/edits/edit-song.php', { 
    indicator: 'Saving...', 
    tooltip: 'Click to edit...' 
}); 
$('.edit-song-area').editable('templates/edits/edit-song.php', { 
    type: 'textarea', 
    submit: 'OK', 
    cancel: 'Cancel', 
    indicator: 'indicator', 
    tooltip: 'Click to edit...', 
    style: 'inherit' // I have also tried "display: inline' 
}); 

Ich habe auch versucht, den Stil direkt in den Tag hinzuzufügen:

<span title="Click to edit..." id="songtitle-CD001-1" class="edit-song" style="display:inline;">Song number 1</span> 

Aber das scheint ignoriert zu werden? Auch bei !important nachdem es:

<span title="Click to edit..." id="songtitle-CD001-1" class="edit-song" style="display:inline; !important">Song number 1</span> 

Gibt es eine Möglichkeit das Jeditable Element zu zwingen Inline anzuzeigen?

Answer 1

Ah, vergiss es. Obwohl das Edit-Element ansonsten im ".edit-song-area" definiert ist, muss der display: inline-Part im übergeordneten Element wie folgt sein:

// Edit song text 
$('.edit-song').editable('templates/edits/edit-song.php', { 
    indicator: 'Saving...', 
    tooltip: 'Click to edit...', 
    style: 'display: inline' // <-- Must be here 
}); 
$('.edit-song-area').editable('templates/edits/edit-song.php', { 
    type: 'textarea', // ...even though the other parts are defined here 
    submit: 'OK', 
    cancel: 'Cancel', 
    indicator: 'indicator', 
    tooltip: 'Click to edit...', 
});