我一直在尝试使自动对焦功能在我的应用程序中正常工作,这导致了与md-tab一起使用的问题。自动对焦功能可以正常工作,但是会导致选项卡超出屏幕的问题。如图所示:
删除自动对焦标签后,选项卡将返回其原始状态。因此,我想知道这是什么原因,或者还有另一种使用自动对焦的方法。
HTML:
<md-content>
<md-tabs md-stretch-tabs="auto" md-dynamic-height md-border-bottom>
<md-tab label="Entitlements" ng-disabled="isNewSite">
<md-content class="md-padding">
</md-content>
</md-tab>
<md-tab label="Information">
<md-content class="md-padding">
<div class="col-xs-6 col-md-6">
<div class="widget">
<div class="widget-header">
<span class="widget-caption header-title">Address</span>
<div class="widget-buttons">
<a href="" widget-expand class="blue"></a>
</div><!--Widget Buttons-->
</div>
<div class="widget-body">
<form class="form-horizontal" name="siteDetailsForm">
<fieldset>
<div class="form-group"
ng-class="{ 'has-error' : siteDetailsForm.siteName.$invalid && !siteDetailsForm.siteName.$pristine }">
<label for="siteName"
class="col-lg-4 col-sm-4 col-xs-4 control-label no-padding-right">
Site Name</label>
<div class="col-lg-7 col-sm-7 col-xs-7">
<input show-on-focus type="textarea" class="form-control"
auto-focus >
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</md-content>
</md-tab>
<md-tab label="Users" ng-disabled="isNewSite">
<md-content class="md-padding">
</md-content>
</md-tab>
</md-tabs>
</md-content>
HTML的大小已减小,但是原因是,如果我要删除最后一个选项卡中的信息,而只是保留md-tab,它就可以正常工作。其中的任何其他信息,任何其他功能都会导致页面显示图片。