Vue-material: How to make md-input and md-button display inline?

[arkceajin]

Browser: Chrome
Vue 2 with vue-material-beta

For example:

  <md-content>
    <md-field class="md-alignment-top-left">
     <md-input></md-input>
    </md-field>
    <md-button class="md-alignment-top-right">test</md-button>
  </md-content>

[Samuell1]

Hey, can you please explain what you mean inline? or create some example?

[arkceajin]

@Samuell1 I wish the components display in the same row.
like <span></span> <span></span> not <div></div> <div></div>

I think this kind of layout make the user easily understand inputand buttonare paired.
The button's size is based on the text of the button, and the input will fill remaining space.

Like this

[Samuell1]

You can use Layout (https://vuematerial.io/ui-elements/layout)

<div class="md-layout">
   <div class="md-layout-item">
      input here
   </div>
   <div class="md-layout-item">
      button here
   </div>
</div>

[VdustR]

Or use flex
https://codepen.io/VdustR/pen/mXVyjp

[arkceajin]

@Samuell1 I tried that but the width of md-layout-item are equal, looks really weird. it better displays flex. I wonder why the md-alignment-top-right doesn't work.

[arkceajin]

@VdustR Thanks!

[Samuell1]

@arkceajin md-alignment-top-right works only ifdisplay: flex or md-layout class is on element

[arkceajin]

@Samuell1
https://codepen.io/arkceajin/pen/ZrQGVy
Could you please help check this code, still not work.

[Samuell1]

it needs to be on same element @arkceajin

[VdustR]

That is for parent

  <div class="md-layout box md-alignment-top-right">
    <md-button>TOP RIGHT</md-button>
    <span>SPAN TOP RIGHT</span>
  </div>