CODEWITHSUNDEEP
cssasp.nettwitter-bootstrap
King_Fisher
King_Fisher

Reputation: 1203

Bootstrap CSS for RadiobuttonList

Radion button : 

   <div class="control-group">
    <label class="control-label">Mode</label>
    <div class="controls">
        <asp:radiobuttonlist id="RadioButtonList1" cssclass="radio" autopostback="true" title="Please Select Mode of Payment"
          repeatdirection="Horizontal"
          onselectedindexchanged="RadioButtonList1_SelectedIndexChanged">
            <asp:listitem>Cash</asp:listitem>
            <asp:listitem>Cheque</asp:listitem>
            <asp:listitem>Demand Draft</asp:listitem>
            <asp:listitem>Net Banking</asp:listitem>
        </asp:radiobuttonlist>
    </div>
   </div>

I have applied the Bootstrap css for:

Everything looks fine, except for radiobutton list, which looks terrible:

enter image description here

How to solve this ?

Upvotes: 10

Views: 43981

Answers (3)

Abhilash Thomas
Abhilash Thomas

Reputation: 863

There are plenty of option you can choose, but i feel the best is in my experience is below.

  1. First set style in the top of your form as shown below

    <style>
    .radiostyle {
      height: auto;
    }

    .radiostyle label {
        margin-left: 3px !important;
        margin-right: 10px !important;
    }
</style>

  2. Second you should apply the clss to the ASP.NET RadioButtonList control

Upvotes: 2

abiNerd
abiNerd

Reputation: 2033

I could not use a <label> and <input type="radio">

So this is what I used:

<asp:RadioButtonList ID="popiRadios" RepeatLayout="Flow" RepeatDirection="Horizontal" runat="server">
                        <asp:ListItem class="radio-inline" Value="1" Text="Cash" Selected="True"></asp:ListItem>
                        <asp:ListItem class="radio-inline" Value="0" Text="Cheque"></asp:ListItem>
                    </asp:RadioButtonList>

And it came out like this:

enter image description here

Upvotes: 16

4dgaurav
4dgaurav

Reputation: 11506

Demo

Add 'radio inline' class to the 'label'

html

<form>
    <div class="form-inline">
        <div class="controls-row">
            <label class="control-label">Mode</label>
            <label class="radio inline">
                <input type="radio" value="1" />First</label>
            <label class="radio inline">
                <input type="radio" value="2" />Second</label>
            <label class="radio inline">
                <input type="radio" value="1" />Third</label>
            <label class="radio inline">
                <input type="radio" value="2" />Fourth</label>
            <label class="radio inline">
                <input type="radio" value="1" />Fifth</label>
            <label class="radio inline">
                <input type="radio" value="2" />Sixth</label>
        </div>
    </div>
</form>

Upvotes: 0

Related Questions