search

DmitryEfimenko / TwitterBootstrapMvc

Fluent implementation of ASP.NET-MVC HTML helpers for Twitter Bootstrap.
Apache License 2.0
221 stars 78 forks source link

Items are not aligned properly in inline radiobuttonlist #375

Closed vanithav closed 9 years ago

vanithav commented 9 years ago

I use the RadioButtonsFromEnum method and it all works fine. I am using the option DisplayInlineBlock(). The two items are not aligned properly. The first item goes down by almost 10 px. Html output is given below.

<div class="col-md-4 col-sm-6 col-xs-12">
            <div class=" form-group"><label class="control-label" for="Gender">Sex<span class="required" style="visibility:hidden;">*</span> </label><div class="input-list-container"><div class='radio checkbox-inline'><label for="Gender_0"><input id="Gender_0" name="Gender" type="radio" value="Male" />Male<span class="required" style="visibility:hidden;">*</span> </label></div><div class='radio checkbox-inline'><label for="Gender_1"><input id="Gender_1" name="Gender" type="radio" value="Female" />Female<span class="required" style="visibility:hidden;">*</span> </label></div></div><span class="field-validation-valid" data-valmsg-for="Gender" data-valmsg-replace="true"></span></div>    
        </div>

Thanks, Vanitha

DmitryEfimenko commented 9 years ago

The html rendered out looks consistent. There are no extra elements that would push first item down. This means the problem is the css. It may be the case that you have some special css rule that messes up the thing. In either case, all elements have classes that you can hook up into and fix the issue by couple lines of css. Notice classes input-list-container, and checkbox-inline. Work with them.