CODEWITHSUNDEEP
htmlformstwitter-bootstrapsubmit
Szere Dyeri
Szere Dyeri

Reputation: 15236

div wrapper for submit button

I have a simple login form:

<form action="/users/login" class="form-inline" id="UserLoginForm" method="post" accept-charset="utf-8">
    <div style="display:none;">
        <input type="hidden" name="_method" value="POST"/>
    </div>
    <input name="data[User][email]" class="input-small" placeholder="E-mail" maxlength="50" type="text" id="UserEmail"/>
    <input name="data[User][password]" class="input-small" placeholder="Password" type="password" id="UserPassword"/>
    <button class='btn' type='submit'>Login</button>
</form>

It is using bootstrap for styling. As for js jquery and AngularJS is loaded.

My issue is, when I display this form my submit button goes to the next line. If I inspect dom I see an <div class="actions">...</div> wrapper around my submit button. This does not happen if I omit type='submit' part from the form definition.

My question who is adding this wrapper and how can I avoid it.

Upvotes: 0

Views: 1984

Answers (1)

Vinayak Phal
Vinayak Phal

Reputation: 8919

If you see the examples of Twitter Bootstrap, I can see they are using two classes for form-inline example. Please check this. fro different types and form with buttons. Try applying well class along with it.

<form class="well form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox"> Remember me
  </label>
  <button type="submit" class="btn">Sign in</button>
</form>

Upvotes: 1

Related Questions