如何在md工具栏中对齐角度sidenav?以及它下面的内容

时间:2016-01-15 03:50:25

标签: angularjs

Here is a codepen link

我试图制作一个Angular sidenav,它必须与某个形式(包含搜索框)排成一行,这些形式位于工具栏的md-toolbar及以下。

我还有其他一些东西,比如上面的链接,p标记文字应该在md-toolbar后面,但我的sidenav占据了很多空间,我无法调整布局

任何人都可以帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:1)

Got it fixed. Actually i was trying to keep the sidenav content in the md-toolbar itself ,but when i separated it the issue fixed. here's the code

header.html file

<md-toolbar ng-controller="toolBarController">
    <div class="md-toolbar-tools">
      <img src="img/logo/oxkey.png">
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <div id="right">
                <form class="navbar-form" role="search">
                    <div class="input-group">
                        <div class="input-group-btn">
                            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                        </div>
                        <input type="text" class="form-control" placeholder="Search Properties" name="q">


                    </div>
                    </form>
            </div>
        </div>

        <button type="button" class="btn btn-info">For Landlords</button>



      <md-button class="md-icon-button" ng-click="toggleRight()" ng-hide="isOpenRight()" class="md-primary">
          Menu
      </md-button>

</md-toolbar>

sidenav.html     

  <md-toolbar class="md-theme-light">
    <h1 class="md-toolbar-tools">Menu</h1>
  </md-toolbar>
  <md-content ng-controller="RightCtrl" layout-padding="">
    <form>
      <md-input-container>
        <label for="testInput">Test input</label>
        <input type="text" id="testInput" ng-model="data" md-autofocus="">
      </md-input-container>
    </form>
    <md-button ng-click="close()" class="md-primary">
      Close 
    </md-button>
  </md-content>

</md-sidenav>