In my ASP.net page, which does have scroll bar, I have placed a customized control in which I have used a HTML check box (it's like hierarchical structure).
When I scroll down the page (to reach to that control) and then I select any item from that check box, the page scrolls up to the top of the page, without causing post back.
How can I stop the scrolling issue from happening?
Note: It only happens with Firefox, it doesn't happens on other browsers i.e IE 8/9 & Chrome.
This is my customized control, which I have used in My another asp.net page,is when i check any of the bellow items. it causes scroll up of page.
<asp:Panel ID="TreeViewPanel" runat="server" style="border: 1px solid #CCC; width: 210px; padding:5px 0;">
<ul id="tree">
<li>
<label>
<input type="checkbox" value="treeHdrCheck1" runat="server"/>Win Exe
</label>
<ul>
<li>
<label>
<input type="checkbox" value="1" runat="server"/>.EXE</label></li>
<li>
<label>
<input type="checkbox" value="2" runat="server"/>.DLL</label></li>
<li>
<label>
<input type="checkbox" value="3" runat="server"/>.OCX</label></li>
<li>
<label>
<input type="checkbox" value="4" runat="server"/>.SYS</label></li>
<li>
<label>
<input type="checkbox" value="5" runat="server"/>.SCR</label></li>
</ul>
</li>
Are you styling your checkboxes?
If you use CSS like
label {
display: block;
overflow: hidden;
}
label input[type="checkbox"] {
position: absolute;
left: -10000px;
top: -10000px;
}
to hide the actual input element from the containing label, then you may need to remove the top: -10000px; part, because Firefox seems to be wanting to scroll the input element into view.
Related
I would like to have 2 radio buttons with the default option being a standard radio button with a text label, and the second option having an input field as the label. Without using javascript I wish to have the second radio be selected if the input field receives focus.
The html looks like the following:
<form method="post" action="/">
<div class="some_style">
<input type="radio" name="n1" value="v1" id="radio_1" checked="checked"/>
<label for="radio_1">Option 1</label>
</div>
<div class="some_style">
<input type="radio" name="n2" value="v2" id="radio_2"/>
<label for="radio_2">
<input name="n3" value="v3"/>
</label>
</div>
</form>
The label will not work like this because the text input receives the focus on click.
So, without javascript you will not be able to achieve what you want I fear.
One trick: You could position the label above the input text and hide it if the checkbox is checked.
But: You will then have to click twice to give the text input the focus. To make this reasonable to the user, you eg. could hide the border if the checkbox is unchecked and show it if checked.
#mylabel {
display: block;
#background-color: red;
position: relative;
width: 200px;
height: 2em;
left: 2em;
top: -2em
}
#radio_2:checked~#mylabel {
display: none;
}
#radio_2:not(:checked)~#n3 {
border: none;
}
label {
cursor: pointer;
}
<form method="post" action="/">
<div class="some_style">
<input type="radio" name="n1" value="v1" id="radio_1" checked="checked" />
<label for="radio_1">Option 1</label>
</div>
<div class="some_style">
<input type="radio" name="n1" value="v2" id="radio_2" />
<input name="n3" value="v3" id="n3" />
<label for="radio_2" id="mylabel"></label>
</div>
</form>
I have this piece of HTML which is updated dynamically with JS. The screen reader only reads out the new value when they get updated. It doesn't say the label of the input who was updated.
<ul class="points-transfer-detail-points-calculation clearfix">
<li>
<label for="points-to-transfer">{{{ pointsToTransferLabel }}}</label>
<input id="points-to-transfer" type="text" aria-controls="brand-points points-left-after-transfer" placeholder="XXX,XXX" {{#if disabled }}disabled{{/if}}>
<p id="points-to-transfer-error" class="points-transfer-detail-form-error" aria-hidden="true" role="alert">{{{ pointsToTransferErrorMessage }}}</p>
</li>
<li>
<label for="brand-points">{{{ brandPointsLabel }}}</label>
<input id="brand-points" type="text" aria-live="polite" aria-atomic="true" disabled>
</li>
<li>
<label for="points-left-after-transfer">{{{ pointsLeftLabel }}}</label>
<input id="points-left-after-transfer" type="text" aria-live="polite" aria-atomic="true" disabled>
</li>
</ul>
I have tried to use aria-labelledby, aria-describedby, role="alert" and aria-label but no results, only the value of the input and never his label.
From all my research on Google and StackOverflow, I didn't manage to found a proper answer.
I'm using NVDA in Firefox as a screen reader.
Thank you for your help.
The only time a label should be read by a screen-reader is when focus is placed on its corresponding field.
Your input fields are all disabled. Therefore the labels wouldn't be read since you can't focus into the fields.
Remove your aria-live and aria-atomic from your input fields. They are unusable on input fields. Aria-live is triggered on DOM change within the container it's assigned to. An input field is not a container. Also, labels shouldn't be announced that way anyway.
If you want to announce a change to the DOM I would suggest injecting content into an empty aria-live div at the bottom of your page and hide it accessibly.
Here is a working example with one static label and 3 dynamic labels. One uses the "disabled" attribute, and one uses aria-disabled so that it can still receive focus. An announcement about the rendering of the new labels is also featured using an accessibly-hidden aria-live container.
This has been tested in NVDA in FF, JAWS in IE, and VO in Safari.
(function () {
function populateLabels () {
document.querySelector('[for="dogsName"]').appendChild(document.createTextNode('Dog\'s Name'));
document.querySelector('[for="catsName"]').appendChild(document.createTextNode('Cat\'s Name'));
document.querySelector('[for="lastName"]').appendChild(document.createTextNode('Last Name'));
}
function announceChange () {
var announcement = "Some new labels have appeared. They are Last Name, Dog's Name, and Cat's Name.",
ariaLiveContainer = document.querySelector('[aria-live]');
ariaLiveContainer.appendChild(document.createTextNode(announcement));
setTimeout(function () {
ariaLiveContainer.innerHTML("");
}, 2000);
}
setTimeout(function () {
populateLabels();
announceChange();
}, 3000);
}());
input {
border: 1px solid black;
}
[disabled],
[aria-disabled="true"] {
border: 1px solid #ccc;
background-color: #eee;
}
.acc-hidden { /* Hide only visually, but have it available for screenreaders */
position: absolute !important;
display: block;
visibility: visible;
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
clip: rect(0 0 0 0);
}
<p>The first label is there on DOM load. The other three labels come in 3 seconds after DOM load. An announcement is made about the updated labels.</p>
<form action="">
<ul>
<li>
<label for="firstName">First Name</label>
<input type="text" name="first-name" id="firstName" />
</li>
<li>
<label for="lastName"></label>
<input type="text" name="last-name" id="lastName" />
</li>
<li>
<label for="dogsName"></label>
<input type="text" name="dogs-name" id="dogsName" disabled /> (uses the disabled attribute -- doesn't receive focus)
</li>
<li>
<label for="catsName"></label>
<input type="text" name="cats-name" id="catsName" aria-disabled="true" /> (uses the aria-disabled="true" attribute -- can receive focus)
</li>
</ul>
</form>
<div class="acc-hidden" aria-live="polite"></div>
I have a drop down that contains options. I would like to partially break & bold some text as well as insert context breaks. I tried using CSS as well as HTML tags but I'm unable to get it. Can someone please suggest a solution?
Thanks in advance
I know this question is a bit old (or not new at least), but I'd like to show a very simple way to emulate a select element rather than using a "replacement plugin" as suggested in How to style the option of a html “select”?.
There are probably many, MANY ways to do this, but I try to keep things extremely simple, so my method of emulation only uses CSS. It is rather bare bones, but I'd like to point out that it is not a complicated thing to do so you might not need a plug in to do it.
Note1: Instead of using <option>, I used <label>. Since <label> is an interactive element, putting something interactive inside (like a <button>) would probably mess it up. Options are normally non-interactive anyway, but just be aware that this simple emulation can't do everything.
Note2: If you want to be able to select multiple options, just do a search for "radio" and replace with "checkbox".
Emulating Select Using Radio - No Collapse
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background-color: black;
color: #28AADC;
}
/* none functional styles. just regular styling */
.radio_select {
background-color: #28AADC;
display: inline-block;
}
<div class="radio_select">
<div>
<input id="rad1" type="radio" name="radio_select" />
<label for="rad1">Option 1</label>
</div>
<div>
<input id="rad2" type="radio" name="radio_select" checked="checked" />
<label for="rad2">Option 2</label>
</div>
<div>
<input id="rad3" type="radio" name="radio_select" />
<label for="rad3">Option 3</label>
</div>
</div>
Radio select emulation - with collapse
Note: this won't work for mobile devices since it uses :hover.
input[type="radio"] {
display: none;
}
/* style this to your heart's content */
input[type="radio"] + label {
display: none;
}
input[type="radio"]:checked + label {
background-color: black;
color: #28AADC;
display: inline-block;
}
.radio_select:hover label {
display: inline-block;
}
/* none functional styles. just regular styling */
.radio_select {
background-color: #28AADC;
display: inline-block;
}
<!-- NOTE: This technique uses hover, so it won't work for mobile devices.
I couldn't think of a pure CSS way to solve that. Sorry. -->
<div class="radio_select">
<div>
<input id="rad1" type="radio" name="radio_select" />
<label for="rad1">Option 1</label>
</div>
<div>
<input id="rad2" type="radio" name="radio_select" />
<label for="rad2">Option 2</label>
</div>
<div>
<input id="rad3" type="radio" name="radio_select" checked="checked" />
<label for="rad3">Option 3</label>
</div>
</div>
I'm trying to get a list of checkboxes to display across the page instead of vertically
I've read numerous posts in SO and others, and it appears I'm doing the correct thing, but my checkboxes refuse to float horizontally. I've tried a number of solutions including inline styling and assigning a different class in the code. Can someone spot my error please?
Cake Code
<?php
echo $this->Form->input('Check.Assessment', array( 'multiple' => 'checkbox')); // checkboxes
?>
Generated HTML
<div class='assessments'>
<div class="input select"><label for="CheckAssessment">Assessment</label><input type="hidden" name="data[Check][Assessment]" value="" id="CheckAssessment"/>
<div class="checkbox"><input type="checkbox" name="data[Check][Assessment][]" value="1" id="CheckAssessment1" /><label for="CheckAssessment1">Blah</label></div>
<div class="checkbox"><input type="checkbox" name="data[Check][Assessment][]" value="2" id="CheckAssessment2" /><label for="CheckAssessment2">Blah Blah</label></div>
<div class="checkbox"><input type="checkbox" name="data[Check][Assessment][]" value="3" id="CheckAssessment3" /><label for="CheckAssessment3">Blah Blah Blah</label></div>
<div class="checkbox"><input type="checkbox" name="data[Check][Assessment][]" value="4" id="CheckAssessment4" /><label for="CheckAssessment4">Blah Blah Blah Blah</label></div>
</div>
CSS
.checkbox
{
float: left;
padding-right: 15px;
}
I fixed a nice demo fiddle for you
https://jsfiddle.net/wgrLfxg3/15/
Just fixed the css display:box like this
.checkbox
{
padding-right: 15px;
display:box;
}
If you want margin between divs just add
padding-bottom:10px
or something like this.
If you want them to float left just set
left:0;
EDIT:
If what you need is to have them inline just add the display:inline-block, here is the demo for this
https://jsfiddle.net/wgrLfxg3/19/
I am using jquery.mobile-1.1.0 for a PhoneGap application. I am getting issue in button css. Jquery has its own button styling but I don't want to use that and want have my own button css. I am also using few jQuery components like tabs, form-search that use jQuery-mobile css so I have to include it in my application.
Here is my html code:
<div data-role="content">
<div class="signup">
<form action="#" id="loginForm">
<fieldset>
<ul>
<li class="first">
<label><span>Email*</span></label>
<input name="loginemail" type="text" id="loginemail" class="input" placeholder="Enter Full Name" />
</li>
<li>
<label><span>Password*</span></label>
<input name="loginpassword" id="loginpassword" type="text" class="input" placeholder="Pick A Password" />
</li>
<li>
<input name="" type="submit" id="loginSubmit" class="button" value="Login" />
</li>
</ul>
</fieldset>
</form>
</div> <!-- signup- div -->
</div><!-- - content -->
</div> <!-- end login page -->
Source while doing inspect element in Firebug jQuery creates an outer layer against that button that eventually disturb my whole button css.
<li><div aria-disabled="false" class="ui-btn ui-shadow ui-btn-corner-all
ui-fullsize ui-btn-block ui-btn-up-c" data-mini="false" data-inline="false"
data-theme="c" data-iconpos="" data-icon="" data-wrapperels="span"
data-iconshadow="true" data-shadow="true" data-corners="true">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Login</span>
</span>
<input aria-disabled="false" name="" id="loginSubmit"
class="button ui-btn-hidden" value="Login" type="submit"></div></li>
Here is my customized button class for css
.button{ width:100% !important; height:69px !important;
float:left !important;
font-size:24px !important;
font-family:"MyriadPro-BoldCond_0",Arial, Helvetica, sans-serif !important;
color:#FFFFFF !important; text-align:center;
background:#ca2c00 !important; border:none !important;
background:-moz-linear-gradient(#ca2c00, #7a1a00) !important;
background: -webkit-gradient(linear, left top, left bottom, from(#ca2c00), to(#7a1a00)) !important;
-pie-background: linear-gradient(#ca2c00, #7a1a00) !important;
background: -o-linear-gradient(#ca2c00, #7a1a00) !important;
-moz-border-radius:0 0 7px 7px !important;
-webkit-border-radius:0 0 7px 7px !important;
border-radius:0 0 7px 7px !important; behavior: url(PIE.htc) !important;
position:relative !important;
cursor:pointer !important;}
Please help. How can I stop jQuery from creating an outer shell around the button and allow it to pick my customized css. Thanks
In jquery mobile ,Input-based buttons and button elements are auto-enhanced, no data-role required. So you have two options to overcome this issue.
Edit the jquery mobile theme, or rather create a customized theme using Theme Roller. You can find the themeroller tool here.
Second option is to set data-role of the input button to none. Ex <input type="button" data-role="none" id="btnId" class="button">.
Hope it helped you.
-- MEJO
The .button class is used by jQuery Mobile, try to use another class name.