Bootstrap and Transitions

For those of you who use Twitter Bootstrap at all, you may have come across this problem already. If you haven't seen this issue, here is an explanation so you know what to expect if it does happen.

The issue occurs when you try to apply a transition to a bootstrap control. Take this code for example:

<div class="editor-field col-md-10">
	<div class="col-md-6">@Html.TextAreaFor(x => x.LongText, new { @class = "form-control expandable" })</div>
	<div class="col-md-6">@Html.ValidatationMessageFor(x => x.LongText)</div>
</div>

So we have a form group which contains a textarea. You might be happy with setting the rows attribute on the textarea so it gives a height the textarea. But sometimes it is nice to have the textarea appear the same height as a text box, but it expands when it received focus. Generally, we would do this with a CSS3 transition. See this CSS code:

.form-control {

    &.expandable {
        .transition(height 1s); // bootstrap transition mixin

        &:focus {
            height: 200px;
        }
    }
}

This CSS sets a transition on the height of a form-control with a class of expandable.

However, if you inspect the element in the browser, you will see that Bootstrap sets transitions on the background-color and border-box attributes. Simply setting the CSS transition property does not override the Bootstrap transition. Even setting !important on the declaration does not do it.

Instead, what you need to do is declare the height of the element AGAIN, prior to setting the transition. So the CSS looks like this:

.form-control {

    &.expandable {
    	height: 45px;
        .transition(height 1s); // bootstrap transition mixin

        &:focus {
            height: 200px;
        }
    }
}

This is evidenced in a GitHub issue (https://github.com/twbs/bootstrap/issues/4207) which explains the issue and the fix.

Hopefully that helps someone, because I just spent about 20 minutes trying to work out why my transition was not being applied.

Til next time ...