TwitterBootstrapMvc
TwitterBootstrapMvc copied to clipboard
Paddings are missing when Placeholder is not used in inline form
I use the latest version but when I use this sample code
@using (var f = Html.Bootstrap().Begin(new Form().Type(FormType.Inline)))
{
@f.FormGroup().TextBoxFor(x => x.UserNameFilter).Placeholder("Enter...").Label().Class("sr-only")
@f.FormGroup().PasswordFor(x => x.UserNameFilter).Placeholder().Label().Class("sr-only")
@f.FormGroup().CheckBoxFor(x => x.UserNameFilter)
@Html.Bootstrap().SubmitButton().Text("Sign in")
}
Between editors padding is present but when I remove placeholder there are no paddings between them.
@using (var f = Html.Bootstrap().Begin(new Form().Type(FormType.Inline)))
{
@f.FormGroup().TextBoxFor(x => x.UserNameFilter).Label().Class("sr-only")
@f.FormGroup().PasswordFor(x => x.UserNameFilter).Label().Class("sr-only")
@f.FormGroup().CheckBoxFor(x => x.UserNameFilter)
@Html.Bootstrap().SubmitButton().Text("Sign in")
}
could you show me html output of before and after? The only difference there should be in html attribute "placeholder" on the inputs. If that's the case, the issue is not BMVC related.
Here's the output:
<form action="/" class="form-inline" method="post">
<div class=" form-group"><label class="sr-only control-label" for="UserNameFilter">User Name Filter<span class="required" style="visibility:hidden;">*</span> </label><input class="form-control" id="UserNameFilter" name="UserNameFilter" placeholder="Enter..." type="text" value="" /><span class="field-validation-valid" data-valmsg-for="UserNameFilter" data-valmsg-replace="true"></span></div>
<div class=" form-group"><label class="sr-only control-label" for="UserNameFilter">User Name Filter<span class="required" style="visibility:hidden;">*</span> </label><input class="form-control" id="UserNameFilter" name="UserNameFilter" placeholder="User Name Filter" type="password" /><span class="field-validation-valid" data-valmsg-for="UserNameFilter" data-valmsg-replace="true"></span></div>
<div class=" form-group">
<div class="control-label"></div>
<div class="checkbox"><label for="UserNameFilter"><input id="UserNameFilter" name="UserNameFilter" type="checkbox" value="true" /><input name="UserNameFilter" type="hidden" value="false" />User Name Filter<span class="required" style="visibility:hidden;">*</span> <span class="field-validation-valid" data-valmsg-for="UserNameFilter" data-valmsg-replace="true"></span></label></div>
</div>
<button class="btn-default btn" type="submit">Sign in</button>
</form>
<form action="/" class="form-inline" method="post">
<div class=" form-group"><label class="sr-only control-label" for="UserNameFilter">User Name Filter<span class="required" style="visibility:hidden;">*</span> </label><input class="form-control" id="UserNameFilter" name="UserNameFilter" type="text" value="" /><span class="field-validation-valid" data-valmsg-for="UserNameFilter" data-valmsg-replace="true"></span></div>
<div class=" form-group"><label class="sr-only control-label" for="UserNameFilter">User Name Filter<span class="required" style="visibility:hidden;">*</span> </label><input class="form-control" id="UserNameFilter" name="UserNameFilter" type="password" /><span class="field-validation-valid" data-valmsg-for="UserNameFilter" data-valmsg-replace="true"></span></div>
<div class=" form-group">
<div class="control-label"></div>
<div class="checkbox"><label for="UserNameFilter"><input id="UserNameFilter" name="UserNameFilter" type="checkbox" value="true" /><input name="UserNameFilter" type="hidden" value="false" />User Name Filter<span class="required" style="visibility:hidden;">*</span> <span class="field-validation-valid" data-valmsg-for="UserNameFilter" data-valmsg-replace="true"></span></label></div>
</div>
<button class="btn-default btn" type="submit">Sign in</button>
</form>
It's true it seems like the placeholder is the only thing different. What can we do about it?
just in case, try the following code:
@using (var f = Html.Bootstrap().Begin(new Form().Type(FormType.Inline)))
{
@:@f.FormGroup().TextBoxFor(x => x.UserNameFilter).Label().Class("sr-only")
@:@f.FormGroup().PasswordFor(x => x.UserNameFilter).Label().Class("sr-only")
@:@f.FormGroup().CheckBoxFor(x => x.UserNameFilter)
@Html.Bootstrap().SubmitButton().Text("Sign in")
}
If that does not make any difference. I'm not sure if this will make any difference. If it does not, the issue is maybe css related. Something is getting overridden somewhere. Try to fix the issue just by using HTML. When you get it working with pure HTML it will become clear what needs to be done to make it work with BMVC.
did you have any luck figuring this one out?
Nothing yet. Will report immediatelly when I find something.