Growing ActionSheet (.k-animation-container)

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<div id="v1" data-role="view" data-layout="mobile-view" data-model="viewModel" data-title="Groups">
    <!-- Listview is for aesthetic purposes !-->
    <ul id="lv1" data-role="listview" data-style="inset"></ul> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div id="button">
        <a id="btn" data-role="button" data-rel="actionsheet" href="#as1" class="km-button">Open ActionSheet</a>
    </div>
    <div id="button">
        <a id="btn" data-role="button" data-rel="actionsheet" href="#as1" class="km-button">Open ActionSheet</a>
    </div>
     <div id="button">
        <a id="btn" data-role="button" data-rel="actionsheet" href="#as1" class="km-button">Open ActionSheet</a>
    </div>
    
        <ul id="as1" data-role="actionsheet">
        <p id="actionSheetTitle">ActionSheet iOS Title</p>
        <ul id="aslv1" style="text-align: center" data-role="listview" data-style="inset">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </ul>
    
</div>

CSS

#button {
    text-align: center;

}
#actionSheetTitle {
    text-align: center;
    margin-top: 10px;
    font-size: 1.4em;
}

JavaScript

var app;

$(document).ready(function() {
    //Start the mobile application
    app = new kendo.mobile.Application($(document.body), { 
        transition: "slide"
    });
});