CODEWITHSUNDEEP
angularjs
Srikaran Maheshwaram
Srikaran Maheshwaram

Reputation: 35

How to align the angular sidenav in md-toolbar? And the content below it

Here is a codepen link

I'm trying to make an Angular sidenav, that must be aligned in a row with some form (which contains search box) which are in a md-toolbar and below of toolbar.

I am having someother stuff, like in the link above, the p tag text should be immediately after the md-toolbar but my sidenav is occupying much space below and I am not able to adjust the layout.

Can anyone help me fixing this out?

Upvotes: 1

Views: 446

Answers (1)

Srikaran Maheshwaram
Srikaran Maheshwaram

Reputation: 35

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>

Upvotes: 1

Related Questions