TwitterBootstrapMvc icon indicating copy to clipboard operation
TwitterBootstrapMvc copied to clipboard

Paddings are missing when Placeholder is not used in inline form

Open krzysiek-b opened this issue 11 years ago • 5 comments

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")
}

krzysiek-b avatar Dec 15 '13 20:12 krzysiek-b

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.

DmitryEfimenko avatar Dec 15 '13 23:12 DmitryEfimenko

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?

krzysiek-b avatar Dec 16 '13 17:12 krzysiek-b

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.

DmitryEfimenko avatar Dec 16 '13 18:12 DmitryEfimenko

did you have any luck figuring this one out?

DmitryEfimenko avatar Dec 18 '13 06:12 DmitryEfimenko

Nothing yet. Will report immediatelly when I find something.

krzysiek-b avatar Dec 18 '13 17:12 krzysiek-b