CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Philip O'Brien
Philip O'Brien

Reputation: 4266

Form elements flowing out of Modal & incorrectly aligned with each other

I'm trying to create a simple modal form that would allow a user to enter a recipe and corresponding ingredients. I'm doing it as an express app (so using Jade) but I have converted the Jade to HTML and made a fiddle.

Strangely enough when running the app locally (accompanying screenshot)the alignment errors are different to the ones produced by the fiddle.

local error

Excuse the HTML mess, I'm new enough to it and guilty of throwing whatever looked reasonable in the docs together.

The modal body HTML (what I imagine to be the offending piece of code) is shown below

<div class="modal-body">
  <form id="submitRecipe" role="form" method="post" class="form-horizontal">
    <div class="row">
      <div class="form-group">
        <input type="text" name="recipeName" placeholder="recipe name" autocomplete="off" class="form-control"/>
      </div>
    </div>
    <div class="row">
      <div class="form-group">
        <div class="form-inline recipeRow">
          <div class="form-group">
            <input type="text" name="ingredient" placeholder="ingredient" class="form-control"/>
          </div>
          <div class="form-group">
            <input type="text" name="quantity" placeholder="quantity" class="form-control"/>
          </div>
          <div class="form-group">
            <select class="form-control">
              <option>g</option>
              <option>tsp</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <input id="add-row" type="button" name="add-row" value="Add row" class="btn btn-default"/>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

Here is the updated fiddle applying James King's suggestion

Upvotes: 0

Views: 469

Answers (1)

James King
James King

Reputation: 1917

Take out all the <div class="row"> and remove class="form-horizontal" from your form.

All the .row are giving you negative margins left and right, causing you to overflow the modal

Upvotes: 1

Related Questions