angularjs中的标签无法正常工作

Question

包含指令内指令的选项卡。它正常工作，但唯一选中的标签完全呈现，而另一个仅部分呈现在屏幕上。

这是我的代码：

angular.module('myApp')
  .directive('q2022Tabs', ['$rootScope', function ($rootScope) {
    return {
      restrict: 'EA',
      transclude: true,
      scope: {
        max: '=',
        label: '='
      },
      require: "q2022PieRadarChart" + "q2022RadarChart",
      template: `
            <form name="outerForm" class="tab-form-demo">
              <uib-tabset active="activeForm">
              <uib-tab index="1" heading="Radar Chart">
                <div q2022-radar-chart data="$root.radarChartData" e="$root.selectedTime" format="$root.radar_format" class="legend shadow" ng-hide="$root.radarChartData==undefined || $root.radarChartData.length==0" style="display:block;position:absolute;width:440px;height:360px;top:40px;right:0px;background-color:white;border:#d0d0d0;border-style: solid;border-width:1px;z-index:10"></div>
              </uib-tab>
              <uib-tab index="2" heading="Pie Radar Chart">
                <div q2022-pie-radar-chart data="$root.radarChartData" e="$root.selectedTime" format="$root.radar_format" class="legend shadow" ng-hide="$root.radarChartData==undefined || $root.radarChartData.length==0" style="display:block;position:absolute;width:440px;height:360px;top:40px;right:0px;background-color:white;border:#d0d0d0;border-style: solid;border-width:1px;z-index:10"></div>
              </uib-tab>
              </uib-tabset>
            </form>
        `
    };
  }])
  .controller('ExController', ['$scope', '$rootScope', function ($scope, $rootScope) {

  }])