Angular/animate Bootstrap elements (input groups)

Question

Definitely not a CSS transition/guru, but I'm trying to make clicking on an icon slide in the input. I have this working, but as soon as the animation is finished my icon blows up to the width of the containing div and I'm not sure why.

Markup

  <form class="form">
    <div class="input-group col-sm-5">
      <span class="btn btn-default input-group-addon" ng-click="hideInput = !hideInput">
          <span class="glyphicon glyphicon-flag"></span>
      </span>
      <input class="form-control animate-hide" ng-hide="hideInput" />
    </div>
  </form>

Styles

.animate-hide {
  -webkit-transition: all linear 0.75s;
  -o-transition: all linear 0.75s;
  transition: all linear 0.75s;
}
.animate-hide.ng-hide {
  width: 0;
}
.glyphicon-flag {
  color: #d9534f !important;
}

Everything besides the button expanding when the animation complets works great.

DavidG · Accepted Answer · 2015-02-05 02:11:47Z

2

The problem is that the CSS display property of the input-group-addon is set to table-cell by Bootstrap. When your animation is finished, the input is hidden which makes the flag icon expand to take all remaining space. You can fix this in various ways, one simple option is to add an empty span after the input. For example:

<form class="form">
  <div class="input-group col-sm-5">
    <span class="btn btn-default input-group-addon" ng-click="hideInput = !hideInput">
      <span class="glyphicon glyphicon-flag"></span>
    </span>
    <input class="form-control animate-hide" ng-hide="hideInput" />
    <span></span>
  </div>
</form>

Example plunker here: http://plnkr.co/edit/qPvbXtEUzvWfsZPkmVRq?p=preview

answered Feb 5, 2015 at 2:11

DavidG

120k13 gold badges232 silver badges239 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Josh Taylor Over a year ago

You beat me to it :) One thing that I would change though is instead of using a <span> is to use a <div> instead. This way you have a block level element that you can set the height property on to match the height of the Bootstrap input. Here is my implementation: plnkr.co/edit/qzLJExPQ2EQ3sYqs7wdR?p=preview

DavidG Over a year ago

@JoshTaylor That's a good call, I just threw any old element in the to demonstrate the issue & solution.

diplosaurus Over a year ago

@DavidG @JoshTaylor Great recommendations both of you, I appreciate it. I incorporated both techniques and added padding:6px 0; to prevent the input from "snapping" shut at the end of the animation. Final Plunkr: plnkr.co/edit/XbNc3eNLHm7p0RJtzJu9?p=preview

Collectives™ on Stack Overflow

Angular/animate Bootstrap elements (input groups)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related