CODEWITHSUNDEEP
asp.net-mvctwitter-bootstrap
lawrab
lawrab

Reputation: 336

Twitter Bootstrap with MVC padding between inputs

I am using MVC and bootstrap to create a website and have mostly been experimenting with it and found the following:

Whilst creating an in-line form in the navbar I noticed that the spacing between input elements were not correct. I think I figured out it was caused by the markup generated by the Razor engine there is no white space between the elements they are rendered next to each other without any spacing. But am not sure how to resolve it.

Here is a jsfiddle for the invalid behaviour.

Razor

@using (Html.BeginForm("JsonLogin", "Account", FormMethod.Post, new { @class = "navbar-form" }))
{
    @Html.TextBoxFor(m => m.UserName, new { @class = "input-small", placeholder = @Html.DisplayNameFor(m => m.UserName) })
    @Html.PasswordFor(m => m.Password, new { @class = "input-small", placeholder = @Html.DisplayNameFor(m => m.Password) })
}

Html

<form class="navbar-form">
    <input type="text" class="input-small" placeholder="Email"><input type="password"  class="input-small" placeholder="Password">
</form>

Here is a jsfiddle for the valid behaviour.

Html

<form class="navbar-form">
    <input type="text" class="input-small" placeholder="Email">
    <input type="password" class="input-small" placeholder="Password">
</form>

Any thoughts on how to fix this? I am guessing I am missing something with bootstrap. ​

Upvotes: 3

Views: 3851

Answers (2)

StanK
StanK

Reputation: 4770

From what I can tell, you only get that behaviour if the input elements are the direct children of the form element.

try

@using (Html.BeginForm("JsonLogin", "Account", FormMethod.Post, new { @class = "navbar-form" }))
{
<div>
    @Html.TextBoxFor(m => m.UserName, new { @class = "input-small", placeholder = @Html.DisplayNameFor(m => m.UserName) })
    @Html.PasswordFor(m => m.Password, new { @class = "input-small", placeholder = @Html.DisplayNameFor(m => m.Password) })
</div>
}

and you should get whitespace between the input elements.

Upvotes: 3

Matt Mombrea
Matt Mombrea

Reputation: 6831

The textboxes have no left or right margin on them so they should be right next to each other when there is no white space between the input elements. If there are white spaces, an inline-block element will render a 4px margin between elements.

To work around this you can either put the elements on the same line with no space as you have done, or float both elements to the left.

Upvotes: 0

Related Questions