This is my first time working with ASP.NET and I must admit, my HTML skills are still pretty basic. Currently, I am using the Bootstrap grid system to create a form that follows this structure:
<div class="container">
<div class="row dataPanel">
<h4><b>1.First question goes here</b></h4>
<div class="col-lg-12">
<asp:RadioButtonList ID="q1Score" CssClass="radioButtonList" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem>
<asp:ListItem Value="-1">N/A</asp:ListItem>
</asp:RadioButtonList>
<br />
Comments:
<asp:TextBox ID="q1CommentBox" TextMode="MultiLine" CssClass="commentBox" runat="server" />
</div>
</div>
</div>
The custom CSS I have created for this form includes the following styles:
.radioButtonList label {
width: 25px;
margin-right: 15px;
margin-left: 2px;
display: compact;
font-size: 10pt;
text-align: center;
}
.commentBox {
border-style: solid;
border-color: dimgray;
width: 100%;
height:50%;
}
.dataPanel {
border: solid;
border-radius: 4px;
border-width: 1.5px;
padding: 20px;
}
Despite trying to wrap the comment box in a div with col-12-lg or row styling, I am having trouble getting it to expand the width of the row. In Bootstrap terms, this should be equivalent to occupying 12 columns, right?
Does anyone have any suggestions on how to resolve this issue?