Manak Bhardwaj Manak Bhardwaj - 5 months ago 75
AngularJS Question

Alignment of dropdown list and button in same line angular

I have tried many things on styling side and putting it into table nothing worked
I want help in aligning the buttons and dropdown in the same new line

<div style="width:100%">
<div style="width:40%" flex >
<md-select ng-model="someModel">
<md-option ng-value="NoModeSelected">No Mode Selected</md-option>
<md-option ng-value="AllTwitter">All Twitter</md-option>
</md-select>
</div>
<div style="width:20%" flex>enter code here
<md-button ng-click="close()">+</md-button>
</div>
<div style="width:30%`enter code here`">
<div >
<md-input-container class="md-block language"
>
<label translate>Dropdown For Filters</label>
<md-select ng-model="accSettingsCtrl.userSettings.language"
required>
<md-option ng-repeat="lang in accSettingsCtrl.LANGUAGES"
value="{{lang.key}}">
{{lang.name}}
</md-option>
</md-select>
</md-input-container>
</div>


Here is the image of what has been displayed

Answer

You can achieve the same by using bootstrap. Here is the demo : http://codepen.io/shreya1289/pen/beweRy

If you don't want to use bootstrap, then you can apply float:left to the div's.

Comments