我试图制作一个Angular sidenav,它必须与某个形式(包含搜索框)排成一行,这些形式位于工具栏的md-toolbar
及以下。
我还有其他一些东西,比如上面的链接,p
标记文字应该在md-toolbar
后面,但我的sidenav占据了很多空间,我无法调整布局
任何人都可以帮我解决这个问题吗?
答案 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>