CSS doesn't get applied in a component template

Question

i have the following table component and i am using angulardart 0.11 and dart 1.4

     @Component(
            selector: 'table-component',
            publishAs: 'ctrl',
            template: '''<table class="table table-striped table-bordered table-condensed">
                            <thead>
                               <tr>
                                 <th ng-repeat="col in ctrl.ItemsSource.ColumnDefs">{{col.displayName}}</th>
                               </tr>
                            </thead>
                             <tbody>
                               <tr ng-repeat="item in ctrl.ItemsSource.Items">
                                 <td ng-repeat="col in ctrl.ItemsSource.ColumnDefs">
                                    {{item.properties[col.name].value}} 
                                 </td>
                               </tr>
                            </tbody>
                         </table>'''
        )
        class TableComponent {

             Scope scope;
             ItemsCollection ItemsSource;

         TableComponent(this.scope) {

           var columnDefs =[new ColumnDef(name:"id",displayName:"ID",isPrimaryKey:true),
                            new ColumnDef(name:"firstname",displayName:"First Name"),
                            new ColumnDef(name:"lastname",displayName:"Last Name"),
                            new ColumnDef(name:"language",displayName:"Language")];

           var items = [new DynamicItem({'id':new DynamicProperty<int>('id',0),
                                         'firstname':new DynamicProperty<String>('firstname','Some'),
                                         'lastname':new DynamicProperty<String>('lastname','One'),
                                         'language':new DynamicProperty<String>('language','English')}),
                        new DynamicItem({'id':new DynamicProperty<int>('id',1),
                                         'firstname':new DynamicProperty<String>('firstname','Another'),
                                         'lastname':new DynamicProperty<String>('lastname','One'),
                                         'language':new DynamicProperty<String>('language','Italian')})];

           this.ItemsSource = new ItemsCollection(columnDefs,items);


       }
 }

the template has some bootstrap css classes applied, but when it get rendered the css doesnt get applied in the component and here is what i get enter image description here

the first table is from the component and the second is an html table and both have same css classes applied, so why doesnt the css classes get applied to my component?

Günter Zöchbauer · Accepted Answer · 2014-05-29 12:55:01Z

4

When you have added the Bootstrap CSS to the page it won't work. The Angular.dart components by default create a shadowDOM around your components content. Bootstrap doesn't support shadowDOM and the selectors won't reach into the shadowDOM.

You can either set the attribute useShadowDom: false (like selector, publishedAs, ...) which creates components without shadowDOM
or you can add the Bootstrap CSS to the component using the attribute cssUrl which makes them scoped styles. You need to add this to every component. The browser should recognize it's the same URL every time and fetch the file only once though.

answered May 29, 2014 at 12:55

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

FPGA Over a year ago

i just tried applyAuthorStyles:true , it works fine i didnt even know it existed

Günter Zöchbauer Over a year ago

It doesn't exist anymore ;-) It is deprecated for several months now and already removed in the latest releases of Dart (Dartium in dev channel release, Chrome and the Polyfills). useShadowDom: false is the Angular.dart workaround for the removed applyAuthorStyles.

Collectives™ on Stack Overflow

CSS doesn't get applied in a component template

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related