AngularJS-自动对焦会导致md标签向左移得太远

时间:2019-07-19 15:46:16

标签: html angularjs

我一直在尝试使自动对焦功能在我的应用程序中正常工作,这导致了与md-tab一起使用的问题。自动对焦功能可以正常工作,但是会导致选项卡超出屏幕的问题。如图所示:

Tab Issue

删除自动对焦标签后,选项卡将返回其原始状态。因此,我想知道这是什么原因,或者还有另一种使用自动对焦的方法。

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,它就可以正常工作。其中的任何其他信息,任何其他功能都会导致页面显示图片。

0 个答案:

没有答案