0

I am trying to show an Edit button and then sub buttons switch out when clicked.

The issue is during animation, both sections become half height. The might be a clash with the Bootstrap css, or some combination i have tried with the spans/divs. Cannot figure out.

Also I think slide animation might be using float which might have some impact.

Hoping can resolve with change to the html (either chaning divs/spans or other, order?), instead of some css override, if possible?

[Edit]

on click hide button and show some others

[cancel] [other] [save]

jsfiddle: http://jsfiddle.net/1s8e5kj5/2/

css:

<div class="col-xs-9">
<div style="display:inline-block">
    <button class="btn btn-default" data-bind="click: TempRunFunction">run</button>
</div>
<span>
    <span id="view-edit">
        <button class="btn btn-primary" onclick="showEdit();">Edit</button>
    </span>
    <span id="view-edit-buttons" class="" style="display:none;">
        <button class="btn btn-success">Save</button>
        <button class="btn btn-warning">Arrange</button>

js

var speed = 1000;

function showEdit() {
  $('#view-edit').hide('slide', { direction: 'left' }, speed);
  $('#view-edit-buttons').show('slide', { direction: 'left' }, speed);
}

function hideEdit() {
  $('#view-edit').show('slide', { direction: 'left' }, speed);

css: none overridden bootstrap v3

ideally:

[Edit]
[Edi..[canc..
[Ed.[cancel] [ot..
[cancel] [other] [save]

many thanks

1
  • 1
    can you post your css here?
    – Daria M
    Nov 23, 2015 at 14:37

3 Answers 3

3

Add pull-left class to buttons' container, and use complete function.

var speed = 1000;

function showEdit() {
    $('#view-edit').hide('slide', {direction: 'left'}, speed/4, function(){
        $('#view-edit-buttons').show('slide', {direction: 'left'}, speed);
    });
}

function hideEdit() {
    $('#view-edit-buttons').hide('slide', { direction: 'left' }, speed, function(){
        $('#view-edit').show('slide', {direction: 'left'}, speed/4);
    });
}

http://jsfiddle.net/1s8e5kj5/4/

1
  • love it, thank you very much.
    – Maze
    Nov 24, 2015 at 9:28
0

Add this to your CSS:

#view-edit, #view-edit-buttons {
    margin-bottom: 20px;
}

Solves the funky display effect the animation is adding to your span.

It would be worthwhile for you to test as thoroughly as possible in case this display issue occurs in more than one way.

0

You'll need to add a display:inline-block; to the span wrapping both the things you are animating. I created a class called btn-container and applied it to the span wrapping both these things.

Next you should add this style:

#view-edit, #view-edit-buttons{
    position:absolute;
    top:0;
}

...which helps position the button wrappers properly so the animations can work.

See demo here

Not the answer you're looking for? Browse other questions tagged or ask your own question.