Styling ASP.net controls with bootstrap

Question

I am trying to style my quiz with checkbox/radio button lists controls in asp.net to match that of the bootstrap static variants found here: http://getbootstrap.com/javascript/#buttons-checkbox-radio

This works fine using the following lines of code:

<asp:RadioButtonList ID="rblQuestion1" runat="server" RepeatDirection="Vertical" RepeatLayout="Flow" CssClass="btn-group" data-toggle="buttons">
    <asp:ListItem class="btn btn-default radio-inline" Value="1">Answer One</asp:ListItem>
    <asp:ListItem class="btn btn-default radio-inline" Value="2">Answer Two</asp:ListItem>
</asp:RadioButtonList>

But i have three problems:

The items are rendered in steps like so: https://i.sstatic.net/fHOhx.png, I believe the cause to be the "RepeatLayout=Flow" property, but without this element isn't displayed as shown on the bootstrap website http://getbootstrap.com/javascript/#buttons-checkbox-radio
When displayed on a smaller screen, some of the items do not fit as the text within them is quite long, what would be the best way to fix this? Image: https://i.sstatic.net/dQasn.jpg

and lastly:

After the form is submitted, it postbacks to the page disabling the control via VB code, and highlighting the correct answer. However, this removes the element styling

This is the HTML displayed when taken from the browser:

<span id="ContentMain_wizQuestions_rblQuestion1" disabled="disabled" class="aspNetDisabled btn-group" data-toggle="buttons">
<span class="aspNetDisabled">
    <input id="ContentMain_wizQuestions_rblQuestion1_0" type="radio" name="ctl00$ContentMain$wizQuestions$rblQuestion1" value="1" disabled="disabled"><label for="ContentMain_wizQuestions_rblQuestion1_0">Answer One</label></span><br>
        <span class="aspNetDisabled"><input id="ContentMain_wizQuestions_rblQuestion1_1" type="radio" name="ctl00$ContentMain$wizQuestions$rblQuestion1" value="2" disabled="disabled">
            <label for="ContentMain_wizQuestions_rblQuestion1_1">Answer Two</label></span><br>
        <span class="aspNetDisabled"><input id="ContentMain_wizQuestions_rblQuestion1_2" type="radio" name="ctl00$ContentMain$wizQuestions$rblQuestion1" value="3" checked="checked" disabled="disabled">
            <label for="ContentMain_wizQuestions_rblQuestion1_2">Answer Three</label></span><br>
        <span class="aspNetDisabled"><input id="ContentMain_wizQuestions_rblQuestion1_3" type="radio" name="ctl00$ContentMain$wizQuestions$rblQuestion1" value="4" disabled="disabled">
            <label for="ContentMain_wizQuestions_rblQuestion1_3">Answer Four</label>
</span>

I believe the aspNetDisabled span tag, is interferring with the bootstrap styles. How can i make them persist through this, or is there an alternative better way to disable an element?

Thanks

Thanks guys, useless as ever

Bob
– Bob

2016-07-21 14:46:48 +00:00
Commented Jul 21, 2016 at 14:46 — Bob
– Bob, Commented Jul 21, 2016 at 14:46

Chintan Gandhi · Accepted Answer · 2016-10-18 07:22:44Z

1

Read the following MSDN document

That is because of controlRenderingCompatibilityVersion. If your framework version is above 4, then this property will be set default to "pages controlRenderingCompatibilityVersion="4.0"

Change the controlRenderingCompatibilityVersion="3.5" and you can see class="aspNetDisabled" will be removed from html.

Web Control facility after .NET version 3.5

Method 1 :

please add following in your web.config for remove the aspNetDisabled tag

<system.web>
        <pages enableEventValidation="true" controlRenderingCompatibilityVersion="3.5" />
</system.web>

Method 2 :

you can also ended up doing the following, which effectively removes the insertion of the extra class for disabled items.

void Application_Start(object sender, EventArgs e)
{
     // Code that runs on application startup
     WebControl.DisabledCssClass = "";
}

edited Oct 18, 2016 at 7:22

answered Oct 18, 2016 at 7:10

Chintan Gandhi

235 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chintan Gandhi Over a year ago

I think this would be helpful to you bob

Collectives™ on Stack Overflow

Styling ASP.net controls with bootstrap

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related