CODEWITHSUNDEEP
css
Jake Choi
Jake Choi

Reputation: 151

Putting a form element on another line

I'm trying to set up my form so that the text input is on one side, and two buttons take up the rest of the side, one on top and the other on the bottom.

I've tried to use br, but this has not done anything. I'm also doing this on Angular 7.0 if it matters.

HTML

<form class="form" (ngSubmit)="onSubmit()">
   <input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo">
   <input type="submit" value="Submit" class="btn">
   <input type="reset" value="Reset" class="btn">
</form>

CSS

.form {
   display: flex;
}

.form input[type='text'] {
   flex: 10;
   padding: 5px;
   height: 40px;
}

.form input[type='submit'] {
   flex: 2;
   height: 20px;
   display: block;
}

.form input[type='reset'] {
   flex: 2;
   height: 20px;
   display: block;
}

Currently, all three are side by side, like this. I want the two buttons to be on top of each other.

Upvotes: 1

Views: 1153

Answers (4)

disinfor
disinfor

Reputation: 11558

If you don't want to change your markup, you can use display: grid.

form {
  display: grid;
  grid-template-areas: 'form topbutton' 'form bottombutton'
}

input[type="text"] {
  grid-area: form;
}

input[type="submit"] {
  grid-area: topbutton;
}

input[type="reset"] {
  grid-area: bottombutton;
}
<form class="form" (ngSubmit)="onSubmit()">
   <input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo">
   <input type="submit" value="Submit" class="btn">
   <input type="reset" value="Reset" class="btn">
</form>

Upvotes: 2

DanieleAlessandra
DanieleAlessandra

Reputation: 1555

A more solid solution may use flexbox:

div.row {
  display: flex;
  width: 100%;
  /* you may add height if you need it */
  /* height: 125px; */
}
div.row > * {
  flex: 1 1 80%;
}
div.row > .buttons {
  flex: 1 1 20%;
  display: flex;
  flex-direction: column;
}
div.row > .buttons > * {
  flex: 1 1 auto;
}
<form class="form" (ngSubmit)="onSubmit()">
  <div class="row">
    <input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo">
    
    <div class="buttons">
      <input type="submit" value="Submit" class="btn">
      <input type="reset" value="Reset" class="btn">
    </div>
    </div>
</form>

Upvotes: 1

humbleChamp
humbleChamp

Reputation: 19

I've never used Angular, but I usually use two br afterward with html and it works fine, alternatively you could use css to manually change the location of each element with style and margin (top,left,etc.). ie: like so:

 br example:
<form class="form" (ngSubmit)="onSubmit()">
<input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo"><br><br>
<input type="submit" value="Submit" class="btn"><br><br>
<input type="reset" value="Reset" class="btn"><br><br>
</form>


  css example:
 <form class="form" (ngSubmit)="onSubmit()">
<input style=margin-top:90px type="text" name="title" [(ngModel)]="title" placeholder="Add Todo"><br><br>
<input style=margin-top:100px type="submit" value="Submit" class="btn"><br><br>
<input style=margin-top:110px type="reset" value="Reset" class="btn"><br><br>
</form>

Upvotes: -1

Obsidian Age
Obsidian Age

Reputation: 42384

Add display: block to your input elements to have them occupy a new line.
You can also divide the elements into two columns by wrapping the desired elements in <div> classes (in this case of .left and .right), and floating them both to the left.

This can be seen in the following:

.left, .right {
  width: 50%;
  float: left;
}

.right input {
  display: block;
}
<form class="form" (ngSubmit)="onSubmit()">
  <div class="left">
    <input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo">
  </div>
  <div class="right">
    <input type="submit" value="Submit" class="btn">
    <input type="reset" value="Reset" class="btn">
  </div>
</form>

Upvotes: 0

Related Questions