Search code examples
twitter-bootstrap-3jeditable

Jeditable - show edit box inline instead of block?

Is there a way to make Jeditable display the edit box as an inline element instead of a block? I'm also using Bootstrap 3. I have tried adding a "style" attribute with various values to the JS, but they don't seem to have any effect?

Here's how it looks originally:

  Original

But this is how it appears when I start to edit the value with jeditable:

  Result

This is how I would want it to appear:

   Expectation

relevant 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' 
});

I also tried to add the style directly into the tag:

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

But that seems to be ignored? Even with !important after it:

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

Is there some way to force the jeditable element to display inline?

Solution

  • Ah, nevermind. Even though the edit element is otherwise defined in the ".edit-song-area", the display: inline part must be in the parent element, like this:

    // 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...',
});