akserg / angular.dart.ui

Port of Angular-UI to Dart.
angulardartui.com
Other
101 stars 37 forks source link

Accordion render issue when initialized off screen #156

Open devin-fisher opened 9 years ago

devin-fisher commented 9 years ago

I been having an issue using accordions inside different tabs. The accordion in initially active tab work as expected but the nonactive tabs contain non-functioning accordions. They don't open right nor close right.

Spent some time trying to figure out but I'm new to dart, angular and angular-ui. To much is a back box at this point to be of much service. But bellow is code that demonstrates the issue in the least amount of code I could mange.

test.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="packages/angular_ui/css/angular.css">
    <title>test</title>
  </head>

  <body>   
    <div style="padding: 10px 10px 10px 10px;">
      <tabset>
        <tab heading="Test" active="true"  >
          <div >
            <div >
              <accordion >
                <accordion-group >
                  <accordion-heading>
                        Configured
                  </accordion-heading>
                      This is just some content to illustrate fancy headings.
                </accordion-group>
              </accordion>
            </div>
          </div>
        </tab>
        <tab heading="Test2" active="false"  >
          <div >
            <div >
              <accordion >
                <accordion-group >
                  <accordion-heading>
                        Configured
                  </accordion-heading>
                      This is just some content to illustrate fancy headings.
                </accordion-group>
              </accordion>
            </div>
          </div>
        </tab>
      </tabset>
    </div>
    <script type="application/dart" src="test.dart"></script>
    <!-- for this next line to work, your pubspec.yaml file must have a dependency on 'browser' -->
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

test.dart

import 'package:angular/application_factory.dart';
import 'package:angular_ui/angular_ui.dart';

void main() {
  applicationFactory()
    .addModule(new AngularUIModule()) // The angular-ui module
    .run();
}