Geek Answers Handbook

Angular-material: input-group and md-buttons on one line

I'm having trouble trying to include an input group and a couple of buttons on the same line using angular-material .

The following HTML structure produces a result that you can see in the image below, which is not what I want:

 <section layout-align="end center" layout-padding flex> <div layout="row" layout-align="start center" flex> <div class="input-group"> <input type="text" class="form-control" ng-model="monitor.query" placeholder="Search reports" aria-describedby="addon"> <span class="input-group-addon" id="addon"><i class="fa fa-search"></i></span> </div> </div> <section layout-padding> <md-button class="md-primary" data-dismiss="modal" type="submit" id="submit" value="Submit" ng-click="monitor.newReport();">New Report</md-button> <md-button class="md-hollow disabled" data-dismiss="modal" type="button">Export</md-button> </section> </section>

enter image description here

However, if I try to include all the elements in the same layout="row" , the input-group ends up taking up all the space and popping the buttons out of the parent div:

 <section class="no-print" layout-align="end center" layout-padding flex> <div layout="row" layout-align="start center" flex> <div class="input-group"> <input type="text" class="form-control" ng-model="monitor.query" placeholder="Search reports" aria-describedby="addon"> <span class="input-group-addon" id="addon"><i class="fa fa-search"></i></span> </div> <md-button class="md-primary" data-dismiss="modal" type="submit" id="submit" value="Submit" ng-click="monitor.newReport();">New Report</md-button> <md-button class="md-hollow disabled" data-dismiss="modal" type="button">Export</md-button> </div> </section>

enter image description here

Is there a proper way to have an input group and a couple of buttons on the same line using angular-material or do I need to create my own styles?

+6
source share
1 answer

Try using the following code:

 <form layout layout-align="center" layout-padding> <div layout="row" flex> <md-input-container flex class="md-icon-float md-block md-title"> <label>Your font number</label> <!-- below is the material icons --> <md-icon class="material-icons">phone</md-icon> <input type="text"> </md-input-container> <div> <md-button class="md-raised"> <!-- below is the material icons --> <md-icon class="material-icons">search</md-icon> </md-button> </div> </div> </form>

see the sample in the following link http://codepen.io/cmwang-cottageclothing/pen/BjpdVQ?editors=1000

+26
source

More articles:


All Articles