how to add input boxes horizontally on button click

Question

I need to add text input boxes aligned horizontally on the click of a button Every time i click "add attribute" a new input box should be created but placed horizontally right the previous input box. Is there a way to do this in vue.js

This adds input boxes, but vertically one below the other, i want them to be horizontally aligned

<hr>
<div class="md-layout">
    <md-button v-on:click="addKey" class="md-raised md-primary">Add Attribute</md-button>
</div>
<md-content class="md-scrollbar" style="max-width:90vh; overflow: auto">
    <div class="md-layout" v-for="value, index in keyList">
        <md-field>
            <md-input type="text" v-model="value.key" v-bind:id="'keyInput' + index" @keyup.enter="searchKey(value.key, index)"
                @focus="updateKey(index)">
            </md-input>
            <md-input type="text" v-model="value.key" v-bind:id="'keyInput' + index" @keyup.enter="searchKey(value.key, index)"
                @focus="updateKey(index)">
            </md-input>
            <md-button class="md-raised md-primary" :id="'keyButton' + index" @click="removeKey(index)"> X </md-button>
        </md-field>
    </div>

This is mostly to do with with the styles you use, are you using angular material design here? — Ms.Tamil
– Ms.Tamil, Commented Jun 21, 2019 at 9:55

Paolo Mossini · Accepted Answer · 2019-06-21 09:55:03Z

1

This CSS should work

input { display: inline; }

answered Jun 21, 2019 at 9:55

Paolo Mossini

1,1042 gold badges16 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Developer Over a year ago

could you please let me know how will it fit in the code i have shared. Thanks

Paolo Mossini Over a year ago

you have to add a <style> tag and put the css inside. In this way all the input elements will be aligned horizontally

Vishal · Accepted Answer · 2019-06-21 11:02:35Z

0

Kindly add flex in display attribute as it provide horizontal alignment to the controls by default.

<md-field style="display: flex;">

edited Jun 21, 2019 at 11:02

answered Jun 21, 2019 at 10:41

Vishal

13 bronze badges

2 Comments

creyD Over a year ago

Could you add some more detail to your answer so that people who come across the same issue, can use your solution as well?

Vishal Over a year ago

Yes sure.. @creyD

Collectives™ on Stack Overflow

how to add input boxes horizontally on button click

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related