While working on a simple postage calculator in Visual Studio with Web Forms (yes, we had to use Web Forms in Class), I included some Bootstrap for styling. However, there was an issue where my RadioButtonList suddenly stopped functioning properly. None of the radio buttons could be selected, and I wasn't sure what caused this problem.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="PostageCalculator._default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="scripts/bootstrap.min.js"></script>
<link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
<title></title>
<style type="text/css">
.auto-style1 {
width: 249px;
height: 250px;
}
#boxiediv {
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.outer-div {
padding: 30px;
text-align: center;
}
.inner-div {
display: inline-block;
padding: 50px;
}
</style>
</head>
<body>
<form id="form1" runat="server" autocomplete="off">
<div class="page-header">
<div class="container-fluid">
<div id="boxiediv" > <img id="boxielogo" alt="Boxie. Easier than it should be." class="auto-style1" src="boxielogo2.png" align="middle"/></div>
<br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br />
<div style="background-color: #4d6684 !important; " class="jumbotron outer-div" id="jbotron1" >
<div id="textboxes" class="row" >
<div class="col-md-4">
<asp:TextBox ID="widthTextBox" value="0" type="number" AutoPostBack="true" runat="server" OnTextChanged="Calculate"></asp:TextBox>
<em> width</em></div>
<div class="col-md-4">
<asp:TextBox ID="heightTextBox" value="0" type="number" AutoPostBack="true" runat="server" OnTextChanged="Calculate"></asp:TextBox>
<em> height</em>
</div>
<div class="col-md-4">
<asp:TextBox ID="lengthTextBox" value="0" type="number" AutoPostBack="true" runat="server" OnTextChanged="Calculate"></asp:TextBox>
<em> length (optional)</em></div>
<br />
</div><!--Closing tag for #textboxes-->
<div id="radiolist" class="inner-div" >
<asp:RadioButtonList AutoPostBack="true" ID="deliveryRadioList" runat="server" OnSelectedIndexChanged="Calculate"
RepeatDirection="Horizontal" >
<asp:ListItem Value="0.15" style="margin-right: 20px">Ground</asp:ListItem>
<asp:ListItem Value="0.25" style="margin-right: 20px">Air</asp:ListItem>
<asp:ListItem Value="0.45" >Next Day</asp:ListItem>
</asp:RadioButtonList>
</div><!-- closing tag for #radios-->
<asp:HiddenField ID="cost" runat="server" Value="0" />
<asp:Label ID="resultLabel" runat="server"></asp:Label>
</div>
</div>
</div>
</form>
</body>
</html>