I ran chrome's lighthouse accessibility test on a page I'm working on and it says
Form elements do not have associated labels
for all the checkboxes used on the page. They are in a large grid and have no labels.
Ex:
<asp:CheckBox ID="cbNotApplicable" runat="server" AutoPostBack="true" OnCheckedChanged="cbNotApplicable_CheckedChanged" onClick='javascript:needToConfirm = false;' ToolTip="Answer all questions Not Applicable" />
If I add a Text attribute, the accessibility warning goes away, but a <label> is added and visible, which I do not want.
Is there an alternate way to make the asp:CheckBox accessible?
Try this way
<asp:Label ID="test" runat="server"
AssociatedControlID="cbNotApplicable"> <asp:CheckBox ID="cbNotApplicable" runat="server" AutoPostBack="true" OnCheckedChanged="cbNotApplicable_CheckedChanged"
onClick='javascript:needToConfirm = false;' ToolTip="Answer all questions Not Applicable" /> </asp:Label>
Or, try this below link suggestions to hide label by using CSS
https://stackoverflow.com/a/13482643/2218635
Related
I use PNM Sequence. And I need to make one grid column as the mandatory field.
I know how to make it with any separate control. E.g. I can type:
<sq8:GridBoundColumn DataField="txtField" HeaderText="txtField"
SortExpression="txtField" UniqueName="txtField" FilterControlAltText="">
<ColumnValidationSettings>
<RequiredFieldValidator ForeColor=""></RequiredFieldValidator>
</ColumnValidationSettings>
</sq8:GridBoundColumn>
And I can use this Validator for the TextBox:
<sq8:Label runat="server" Text="Field:" ID="Label1" Width="100%"></sq8:Label>
<nobr>
<sq8:TextBox runat="server" ID="txtField" Width="100%"></sq8:TextBox>
<sq8:RequiredFieldValidator runat="server"
ErrorMessage="RequiredFieldValidator"
ID="RequiredFieldValidator4"
ControlToValidate="txtField"
SetFocusOnError="True">*</sq8:RequiredFieldValidator>
</nobr>
<sq:BindableControl runat="server" TargetControlID="txtField"
DataField="txtField"></sq:BindableControl>
And it works. User can't send the form because he gets an error - the field is empty.
But I need to do the same with grid.
When I open "Edit columns" in Grid Wizard I can't see any property as "mandatory" or something like this.
And the code with RequiredFieldValidator doesn't work with a grid column. If I try to use it:
<Columns>
<sq8:GridBoundColumn DataField="txtFieldGrid" HeaderText="txtFieldGrid"
SortExpression="txtFieldGrid" UniqueName="txtFieldGrid"
FilterControlAltText="">
<sq8:RequiredFieldValidator runat="server"
ErrorMessage="RequiredFieldValidator"
ID="RequiredFieldValidator4"
ControlToValidate="txtFieldGrid"
SetFocusOnError="True">*</sq8:RequiredFieldValidator>
<sq:BindableControl runat="server" TargetControlID="txtFieldGrid"
DataField="txtFieldGrid"></sq:BindableControl>
</sq8:GridBoundColumn>
</Columns>
In this case, I have an error:
Is there some method for grid column validation? Or it's impossible with a grid?
Maybe I can use some javascript?
I am using a multiline textbox as following:
<asp:TextBox runat="server" TextMode="MultiLine" Height="200" Width="500" ReadOnly="true" Font-Names="calibri" Text="Terms and Conditions Next text will go over.. >
What I need to do is to only make Terms and Conditions in bold. Rest of the sentence is not in bold. I tried using a span with a style of bold but that did not affect anything.
How do I do styling for a Textbox? Keep in mind this is a read only textbox.
If i understand you right, u need this
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/HTMLEditorExtender/HTMLEditorExtender.aspx
<script>
function onContentsChange() {
alert('contents changed');
}
</script>
<asp:TextBox runat="server"
ID="txtBox1"
TextMode="MultiLine"
Columns="50"
Rows="10"
Text="Hello <b>world!</b>" />
<ajaxToolkit:HtmlEditorExtender
ID="htmlEditorExtender1"
TargetControlID="txtBox1"
OnClientChange="onContentsChange"
runat="server" >
</ajaxToolkit:HtmlEditorExtender>
what you need is more than a regular textbox, you should either use devexpress or ajax toolikt, or some other ajax libraries.
you might consider looking for library that gives you rich formatting abilities
I have an ASP.Net page which renders checkboxes as below
But when I re-size the screen, the controls are crammed together and the checkboxes & their associated text move into different lines and it wouldn't make much sense.
I would like to know if there is a way to keep the checkboxes together.
Heres the Code:
<asp:Repeater ID="rpFiles" runat="server" DataSource='<%# Eval("Files") %>' OnPreRender="rpFiles_PreRender" >
<ItemTemplate>
<asp:PlaceHolder ID="phFile" runat="server">
<asp:CheckBox ID="cbVisibility" AutoPostBack="false" runat="server" Text='<%# string.Format("{0} ({1})", Eval("FileName"), Eval("FileType").ToString().ToUpper()) %>' Checked='<%# !((bool)DataBinder.Eval(Container.DataItem, "IsHidden")) %>' />
<asp:HiddenField ID="hfFileID" Value='<%# Eval("FileID") %>' runat="server" />
</asp:PlaceHolder>
</ItemTemplate>
</asp:Repeater>
Thanks for your input guys. Tried working on your lines. width and min-width were not working but the idea of div was important, +1 for that.
I have used this instead
<asp:PlaceHolder ID="phFile" runat="server">
<div style="display:inline-block; padding-right:15px"><asp:CheckBox ID=...
and that fixes it.
If it's a CheckBoxList then the width must be constrained somehow? Set a fixed width to prevent the collapse.
<div style="min-width:600px;">
<!-- check boxes ->
</div>
Note that this width is just arbitrary; play around with it...
UPDATE: now that I see your markup, just set a width on the repeater.
Suppose you have code
<!--CheckboxCatering Order(PDF)--!>
Then update your code like
<div style="width:300px;"><!--checkboxCatering Order(PDF)--!></div>
It will solve your problem
I've a problem with asp:image and asp:imagebutton alternate text: it's not visible when I move the mouse over the image. I declared the object in that way:
<asp:ImageButton ID="ButtonStatus"
ImageUrl='<%# IIF(Eval("Active")=1,"../images/folders/actived.png","../images/folders/deactivate.png")%>' CommandName="ChangeStatus" CommandArgument='<%# Eval("id_repository") %>' OnCommand="FolderCommand"
Enabled = '<% #iif(mySecurity.Admin=1, "True", "False") %>' Width="24px" AlternateText="Change the status"
runat="server" />
and for asp:image
<asp:HyperLink runat="server" ID="url_groups" NavigateUrl="~/action/Group_manager.aspx?action=2">
<asp:Image id="img_groups" runat="server" ImageUrl="~/Images/folders/group_config.png" AlternateText="Group manager"
EnableViewState="false" ImageAlign="Middle" Width="32px" CssClass="navigation" />
</asp:HyperLink>
Could you help me? I tried to search on web but I wasn't able to find any post or suggestion to fix that problem
thanks,
Andrea
It's browser dependent whether the alt text gets shown when you mouse over an image. If you set the ToolTip parameter on a .NET Image or ImageButton it will render a title attribute which shows across pretty much every browser.
Here's an example from a site I'm currently working on:
<asp:HyperLink ID="ReplyLink" runat="server" NavigateUrl='<%# Eval("SrcAddr", "~/msp/send.aspx?to={0}") %>'>
<asp:Image ID="ReplyIcon" runat="server" ImageUrl="~/images/email_go.png" AlternateText="Reply" ToolTip="Reply" />
</asp:HyperLink>
I think you're mixing up the alt attribute with the title attribute. Alt is shown when the user doesn't accept images and for screen readers whereas the title attribute is shown as tool tip when you hover the image.
If have the below markup.
<asp:checkbox id="chkTVLic" runat="server" text="TV Licence" oncheckedchanged="chkDocs_CheckChanged"
autopostback="true" CausesValidation="false" />
<asp:panel id="pnlTVLic" runat="server" visible="false">
<div class="toggle-item-link1 document-date">
<asp:panel id="pnlTVLicIssueDate" runat="server">
<p>
Please enter the date of issue
</p>
<div class="fm-req">
<asp:textbox id="txtTVLicIssueDate" cssclass="tb size2" runat="server" onblur="return true;"></asp:textbox>
<cc2:calendarextender id="caleTVLicIssueDate" runat="server" targetcontrolid="txtTVLicIssueDate"
popupbuttonid="ibnTVLicIssueDate" popupposition="BottomLeft" animated="true"
format="dd/MM/yyyy">
</cc2:calendarextender>
<asp:imagebutton id="ibnTVLicIssueDate" runat="server" imageurl="../images/img-calendar-day.png"
alternatetext="Calendar" tooltip="Pick Date" cssclass="date-picker" />
<asp:requiredfieldvalidator id="rfvTVLicIssueDate" CssClass="error" runat="server" controltovalidate="txtTVLicIssueDate"
display="Dynamic" errormessage="Required" setfocusonerror="true" validationgroup="TVLic"></asp:requiredfieldvalidator>
<asp:comparevalidator id="cmvTVLicIssueDate" CssClass="error" runat="server" errormessage="Not a valid date"
controltovalidate="txtTVLicIssueDate" operator="DataTypeCheck" type="Date" setfocusonerror="true"
validationgroup="TVLic" display="Dynamic" cultureinvariantvalues="true"></asp:comparevalidator>
<asp:customvalidator id="cuvTVLicIssueDate12Months" CssClass="error" runat="server" controltovalidate="txtTVLicIssueDate"
validationgroup="TVLic" display="Dynamic" onservervalidate="cuvDocIssueDate12Months_ServerValidate"
errormessage="Document must be less than 12 months old."></asp:customvalidator>
</div>
</asp:panel>
<asp:panel id="pnlTVLicApprove" runat="server">
<asp:LinkButton id="lbnTVLicApprove" runat="server" CssClass="screen-hide"
alternatetext="Confirm TV Licence" tooltip="Confirm TV Licence" Text="OK" CausesValidation="false" OnClick="lbnApproveConfirm_Click" />
<asp:imagebutton id="ibnTVLicApprove" runat="server" imageurl="../images/img-accept-doc-off.png"
alternatetext="Approve" tooltip="Approve" cssclass="approval-btn" causesvalidation="true" validationgroup="TVLic" OnMouseDown="HandleApproveClick('TVLic','lbnTVLicApprove');return false;" OnClientClick="HandleApproveClick('TVLic','lbnTVLicApprove');return false;" />
<span class="approval-label">Accept document:</span></asp:panel>
</div>
</asp:panel>
The app is written in c# but i havn't posted any actual code as all the user code related to this markup seems to work fine.
The problem is the CheckBox chkTVLic has causes validation set to false and autopostback set to true. So whatever happens when i check and uncheck the checkbox it should postback. Most of the time this is exactly what it does and the result is to show and hide pnlTVLic when it is checked and unchecked. However if any on the validators within the panel fire, the checkbox does not cause a postback the first time. It will on all subsequent times but never the first. However it should ALWAYS cause a postback. What could be stopping it. Before someone asks there is no use written client side code, everything is pure .net markup and c# code.
I don't see why it shouldn't postback when you check/uncheck the checkbox, but if the only purpose of that checkbox is to hide/unhide a panel, I would rather do it in javascript. Doing a full postback to the server just for hiding some panel seems really bad.
In javascript you can do this to hide the panel:
document.getElementById('<%=pnlTVLic.ClientID%>').display='none';
And this to show it:
document.getElementById('<%=pnlTVLic.ClientID%>').display='block';
It's going to be so much faster and better. Just put a regular checkbox instead of the ASP.NET one and subscribe to the onclick event.
Sorry, one more comment:
I think you are wrong when you say that the checkbox should ALWAYS cause a postback. No, if one of the validators fires inside the panel, the checkbox will not cause a postback until the condition is satisfied.
This is what I did and it worked.
on checkbox onclick event I disabled all the validation controls and immediately did Page_ClientValidate(); and it worked.