My listbox is appearing differently in Chrome, Firefox and IE.
How can I make them look alike. I want 1px border
<asp:CheckBoxList ID="cbStatus" runat="server" RepeatColumns="4">
<asp:ListItem Text="Approved" Value="A"></asp:ListItem>
<asp:ListItem Text="Declined" Value="D"></asp:ListItem>
</asp:CheckBoxList>
Checkbox is one of those elements that will always render differently by different browsers. If you want the look to be unified I suggest one of jQuery plugins that turns ordinary checkboxes into styled controls.
For example your checkboxlist renders this HTML to browser:
<table id="cbStatus" border="0">
<tr>
<td><input id="cbStatus_0" type="checkbox" name="cbStatus$0" /><label for="cbStatus_0">Approved</label></td>
<td><input id="cbStatus_1" type="checkbox" name="cbStatus$1" /><label for="cbStatus_1">Approved w/ Requirements</label></td>
<td><input id="cbStatus_2" type="checkbox" name="cbStatus$2" /><label for="cbStatus_2">Declined</label></td><td></td>
</tr>
</table>
Using PrettyCheckable plugin you can issue a single command to style it::
$('input[type="checkbox"]').prettyCheckable();
And here is what it looks like after: http://jsfiddle.net/WuFg9/
You can adjust the styles to whatever you want, borders, colors etc. etc.
Related
I need to increase the space between the labels (which overlap with my resized radio buttons) and the radio buttons. The code snippets I have found only address the labels being to the left or right of the button. My labels are above the radio button, and now the two line labels (like "neither dislike or like", which spans two lines) are getting overlapped by the radio button. Thank you!
a screenshot of my radio buttons
Add this javascript to your Qualtrics question:
Qualtrics.SurveyEngine.addOnload(function()
{
var qid = this.questionId;
var radioCells = $(qid).select('td.ControlContainer');
var limit = radioCells.length;
for(i=0;i<limit;i++) {
radioCells[i].style.paddingTop = "25px";
}
});
Adjust the "25px" as necessary. You should consider upgrading to the new Qualtrics themes where the radio buttons go away and the labels become clickable buttons.
jsfiddle
As I am not sure if you are using bootstrap or any other layout framework, here is a solution with a simple table layout.
td {
width:100px;
text-align: center;
}
<!--EMMET string table>(tr>(td>label[for=radio$]{myradio$})*5)+(tr>(td>input#radio$[type='radio'][name=myradio])*5)-->
<table>
<tr>
<td><label for="radio1">myradio1</label></td>
<td><label for="radio2">myradio2</label></td>
<td><label for="radio3">myradio3</label></td>
<td><label for="radio4">myradio4</label></td>
<td><label for="radio5">myradio5</label></td>
</tr>
<tr>
<td><input type="radio" id="radio1" name="myradio"></td>
<td><input type="radio" id="radio2" name="myradio"></td>
<td><input type="radio" id="radio3" name="myradio"></td>
<td><input type="radio" id="radio4" name="myradio"></td>
<td><input type="radio" id="radio5" name="myradio"></td>
</tr>
I'm confused with the alignment setting of the radio button list in asp.net, it shows in visual basic like this.
But if i compile it, it shows in my browser like this.
My code for this radio button list.
<td align="right" colspan="2">
<asp:RadioButtonList TextAlign="left" ID="RadioButtonList1" runat="server">
<asp:ListItem Text="Fixed Cost" Selected="true" Value="1"></asp:ListItem>
<asp:ListItem Text="Per Guest Charge" Value="2"></asp:ListItem>
<asp:ListItem Text="Percentage" Value="3"></asp:ListItem>
</asp:RadioButtonList>
</td>
How come this happened? I want to get the view like in visual basic, please help.
--- Update ---
This is the result if i change the alignment into "right".
Here's the HTML.
<tr>
<td align="right" colspan="2">
<table id="ctl00_MainContent_RadioButtonList1" border="0">
<tr>
<td><input id="ctl00_MainContent_RadioButtonList1_0" type="radio" name="ctl00$MainContent$RadioButtonList1" value="1" checked="checked" /><label for="ctl00_MainContent_RadioButtonList1_0">Fixed Cost</label></td>
</tr><tr>
<td><input id="ctl00_MainContent_RadioButtonList1_1" type="radio" name="ctl00$MainContent$RadioButtonList1" value="2" /><label for="ctl00_MainContent_RadioButtonList1_1">Per Guest Charge</label></td>
</tr><tr>
<td><input id="ctl00_MainContent_RadioButtonList1_2" type="radio" name="ctl00$MainContent$RadioButtonList1" value="3" /><label for="ctl00_MainContent_RadioButtonList1_2">Percentage</label></td>
</tr>
Have you tried setting <asp:RadioButtonList TextAlign="right" - you have TextAlign="left"?
I think your result HTML (being <table> in your addition above) is not guaranteed - ASP.NET may emit <span> in other cases/browsers.
Your best option seems to be assigning a CssClass <asp:RadioButtonList ... CssClass="yourClass"> in combination with some jQuery or direct styling of the possible elements.
See this broader discussion and also the accepted answer in this thread.
I have an asp:RadioButtonList named rblDependants
which renders as follows and a panel pnlDependants and I need to hide it when radio button selection is "No" and show it when its "Yes". I have tried a few snippets from the forums and none seem to work fine. Can anyone help me pls....!
<table id="ctl00_ContentPlaceHolder1_ctl02_rblDependants" border="0" style="border-width:0px;">
<tr>
<td><input id="ctl00_ContentPlaceHolder1_ctl02_rblDependants_0" type="radio" name="ctl00$ContentPlaceHolder1$ctl02$rblDependants" value="Yes" /><label for="ctl00_ContentPlaceHolder1_ctl02_rblDependants_0">Yes</label></td>
</tr><tr>
<td><input id="ctl00_ContentPlaceHolder1_ctl02_rblDependants_1" type="radio" name="ctl00$ContentPlaceHolder1$ctl02$rblDependants" value="No" checked="checked" /><label for="ctl00_ContentPlaceHolder1_ctl02_rblDependants_1">No</label></td>
</tr>
</table>
<div id="ctl00_ContentPlaceHolder1_ctl02_pnlDependants">
<div class="QuestionWrapper">
<div class="Question">
<label for="">No. of Dependants</label>
</div>
<div class="Answer">
<input name="ctl00$ContentPlaceHolder1$ctl02$txtNoOfDependants" type="text" maxlength="2" id="ctl00_ContentPlaceHolder1_ctl02_txtNoOfDependants" />
</div>
<div class="ClearFloat"></div>
</div>
Something like this should work:
$("table[id$=_rblDependants] :radio").change(function() {
$(this).closest('table').next().toggle(this.checked && this.value == 'Yes');
}).change();
This would work for any number of repeated controls since it finds the <div id="X_pnlDependants"> relatively. All we're doing it taking an <table> who's ID ends-with _rblDependants, taking any :radio buttons inside it and binding to their .change() event. Then either of them is changed it's checking that the result was value="Yes" and it was .checked, if that's the case show the panel, otherwise hide it, via .toggle(bool).
The .closest() and .next() are to go up to the <table> then to the next element, the <div>, since that's what you want to hide/show. The .change() on the end is to trigger the handler initially, so if "No" is initially checked, it hides the <div> on load.
You can give it a try here
I've noticed there is no OnClientClick() property for the radiobuttonlist in the ASP.NET control set. Is this a purposeful omissiong on Microsoft's part?
Anyway, I've tried to add OnClick to the radio button list like so:
For Each li As ListItem In rblSearch.Items
li.Attributes.Add("OnClick", "javascript:alert('jon');")
Next
But alas, it doesn't work. I've even checked the source in firebug, and there is no javascript shown in the radiobuttonlist. Does anyone know how to get this very simple thing working? I'm using ASP.NET control adpaters so don't know if that has anything to do with it.
(I wish asp.net/javascript would just work out the box!!!)
I found I could just add a onclick attribute to the RadioButtonList and it would fire the javascript client side as expected.
<asp:RadioButtonList ID="RadioButtonList1" runat="server" onclick="alert('RadioButtonListSelectChange');">
<asp:ListItem Text="One" Value="1"/>
<asp:ListItem Text="Two" Value="2"/>
</asp:RadioButtonList>
You could then write a client script that could determine the currently selected list item.
The onclick attribute function very good in ListItem object. Try in this way:
li.Attributes.Add("onclick", "javascript:showDiv()")
That function to me.
Not really an answer but a few weird observations on the other suggestions. I'll preface this by saying this is a RadioButtonList in an ASP.Net 4.0 app with RepeatDirection=Vertical
1) Adding onclick='myJsFunction(this);' attributes to the ListItems worked fine for me except after a different item on the page causes a post back (a button action for example), the attributes on the ListItems don't get rendered in the result of the postback. They get rendered to start, but not when there's a button action. Go figure.
2) Apparently our legacy code was relying on some murky, less than canonical behavior on the RadioButtonList/ListItem that gets very muddy on postback. If you put an id attribute on a ListItem, ASP.Net 2.0+ will add a span tag around the radio button and put your id value there. If you add an onclick attribute on it, that will go on the radio button - at least when Page.IsPostBack == false.
<asp:RadioButtonList ID="proceedChoice" runat="server" RepeatDirection="Vertical">
<asp:ListItem id="Close_Case_Y" Value="Y" onclick="SelectResolveType(this);" Text="I want to close this case." runat="server" />
<asp:ListItem id="Close_Case_N" Value="N" onclick="SelectResolveType(this);" Text="I want to cancel this and start over." runat="server" />
</asp:RadioButtonList>
renders as
<table id="...proceedChoice" border="0">
<tr>
<td><span id="Close_Case_Y"><input id="..._proceedChoice_0" type="radio" value="Y" onclick="SelectResolveType(this);" /><label for="..._proceedChoice_0">I want to close this case.</label></span></td>
</tr><tr>
<td><span id="Close_Case_N"><input id="..._proceedChoice_1" type="radio" value="N" onclick="SelectResolveType(this);" /><label for="..._proceedChoice_1">I want to cancel this case and start over.</label></span></td>
</tr>
</table>
After a postback from some other button, though the same template renders as
<table id="...proceedChoice" border="0">
<tr>
<td><input id="..._proceedChoice_0" type="radio" value="Y" /><label for="..._proceedChoice_0">I want to close this case.</label></td>
</tr><tr>
<td><input id="..._proceedChoice_1" type="radio" value="N" /><label for="..._proceedChoice_1">I want to cancel this case and start over.</label></td>
</tr>
</table>
But here's where it gets really weird: if you tack on other attributes to ListItem other than id and onclick, just those attributes get preserved. For example if I add hidden="hidden" to one of the ListItems, it gets rendered like this after postback
<table id="...proceedChoice" border="0">
<tr>
<td><span hidden="hidden"><input id="..._proceedChoice_0" type="radio" value="Y" /><label for="..._proceedChoice_0">I want to close this case.</label></span></td>
</tr><tr>
<td><input id="..._proceedChoice_1" type="radio" value="N" /><label for="..._proceedChoice_1">I want to cancel this case and start over.</label></td>
</tr>
</table>
Because it's a list control, there isn't a OnClientClick event. Either use a postback (SelectedIndexChange) or write javascript to grab the click for each radio button.
foreach (PlaceType t in query.ToList())
{
ListItem li = new ListItem(#"<img src=""" + t.ImageRelativePath + #"""/><br/>" + t.PlaceTypeText, t.PlaceTypeID.ToString());
li.Attributes.Add("onclick", "javascript:placeTypeChange('" + t.ImageRelativePath + "')");
rblPlaceTypes.Items.Add(li);
}
So in there I'm
a) Iterating over the results of a EF query.
b) Creating a new list item, and adding it to my radio button list (rblPlaceTypes).
c) The constructor is putting an image in so that displays.
d) the li.Attributs.Add is putting the javascript wireup in.
At the moment I have something like this
<asp:Repeater ID="rptEventsList" DataSourceID="srcQuestionList" runat="server">
<ItemTemplate>
<td><span><%# Eval("orderBy").ToString()%>)</span></td>
<td><%# Eval("question").ToString()%></td>
<td><asp:RadioButton ID="RadioButton1" runat="server" /></td>
<td><input name="question<%# Eval("orderBy").ToString()%>" type="radio" id="True" value="True" class="styled" /></td>
<td><input name="question<%# Eval("orderBy").ToString()%>" type="radio" id="False" value="False" class="styled" /></td>
</tr>
</ItemTemplate>
</asp:Repeater>
And in the code behind I capture the values as Request.Form("question1") for example and this all works fine.
Now I am wondering how to add validation to this, I think I have to apply changes to a RadioButton control but I can't see how I could add my dynamic RadioButton names in there with my id from stored procedure.
Also I would like to add the validation to the top of the screen as a validation summary.
Look into Validation Server Controls.