CODEWITHSUNDEEP
javascriptcssangularjshtml
robin
robin

Reputation: 1925

Angular Js Tool Bar issue

I am having a toolbar directive using angular material, I am using a transclude at the end of the directive and I want the transcluded element to come at the right end of the banner. But what ever I do, it wont work, its coming after the elements of the directive?

The code for template is like below.

<md-toolbar>
      <div class="md-toolbar-tools">

                <h2>
                        <a  ui-sref="#">Test - <span ng-bind="header.title"></span></a>    
                </h2>
          <span flex="5"></span>    
          <div ng-transclude></div>
      </div>
    </md-toolbar>

Please find the example here. I wan to move Test123 to the right most end of the toolbar. Please help me

Upvotes: 0

Views: 96

Answers (2)

Gary Torres
Gary Torres

Reputation: 550

You are in the right track. In your banner.html you need to modify the <span flex="5"> to <span flex> this will make it expand all the way to the right instead of just 5 units and push everything inside the ng-transclude with it.

<md-toolbar>
  <div class="md-toolbar-tools">
    <h2>
        <a ui-sref="#">Test - <span ng-bind="header.title"></span></a>    
    </h2>
    <span flex></span>
    <div ng-transclude></div>
  </div>
</md-toolbar>

Also notice I cleaned up the index.html file so you can easily add content in between the banner tags.

<banner header-title="Title 1 Test">
    <span>Test 123</span>
</banner>

You can see the full solution here

If you are interested, you can find more information about the md-toolbar directive in the official documentation.

Upvotes: 0

BobDoleForPresident
BobDoleForPresident

Reputation: 552

Try this as your banner.html:

<md-toolbar>
  <div class="md-toolbar-tools">

            <h2>
                    <a  ui-sref="#">Test - <span ng-bind="header.title"></span></a>    
            </h2>
      <span flex="5"></span>    
      <div ng-transclude style="position:absolute;right:0;top:16"></div>
  </div>
</md-toolbar>

Not sure if this was what you were looking for but it does do what you asked.

Upvotes: 1

Related Questions