私は単純な HTML5<progress>
タグを持っています:
<progress max="100" value="80"></progress>
バーは表示されますが、すべて灰色で、完了ステータスはありません (つまり、バーの 80% が青色ではありません)。
タグの使用方法について説明している他のページに移動すると<progress>
、完了ステータスが完全に正常に表示されます。ページに貼り付けると、正しくレンダリングされません。
私はAngularJSとBootstrapを使用しています。それがおそらく何らかの問題を引き起こしているかどうかはわかりませんか?
<progress>
タグが進行状況を正しくレンダリングできないのはなぜですか?
UPDATE (追加コード)
AngularJSを使用しているため、周囲のコードは通常よりも複雑ですが、ここでは...
AngularJSルート ファイルは次のとおりです。
<!doctype html>
<html>
<head>
<!-- Style Includes -->
</head>
<body ng-App="myApp">
<!-- AngularUI-Router View -->
<ui-view></ui-view>
<!-- JavaScript Includes -->
</body>
</html>
私のAngularUI-Routerは、次のビューをui-view
問題のあるページのタグにロードします。
<div class="container">
<div class="row">
<div class="col-md-3 well well-sm">
<ul class="list-group">
<a ui-sref="admin.groups.create" class="list-group-item" ng-class="{ active: isTab('admin.groups.create') }">Create Group Visit <span class="pull-right"><i class="fa fa-plus-circle"></i></span></a>
<a ui-sref="admin.groups.list" class="list-group-item" ng-class="{ active: isTab('admin.groups.list') }">List All Group Visits <span class="badge">[[ allGroups.length ]]</span></a>
</ul>
<h4>Upcoming Group Visits</h4>
<ul class="list-group">
</ul>
<h4>Recent Group Visits</h4>
</div>
<div class="col-md-9">
<ui-view></ui-view>
</div>
</div>
</div>
最後に、バーui-view
を表示する 3 番目のビューが上記のコード ブロックに配置されprogress
ます。
<p>Create the group!!</p>
<progress max="100" value="80"></progress>
だから、私は持っていますが、プログレスバーにつながるAngularUI-Router<!doctype html>
ビューのいくつかのレイヤーがあります。彼らはどういうわけかそれを壊しているようですが、この状況で動作するように説得する何かがあるかどうかはわかりません.