I have a web page that has basic registration field like Name, DOB, Address etc. The page has some controls (text box, DOB etc) that will be shown or hidden based on a radio button selection. Currently, when the end user fills up the page using tab key the hidden controls are getting focus and tab out is not working as expected (Current implementation does not have tab indexes set).
I tried manually setting the tab indexes in a incremental order for all the controls. But moving back and forth or after switching between those radio button selections, tab out scenario is not working properly.
Is there any work around to handle this scenario? Any help would be appreciated.
You need to set display: none instead of opacity: 0 so controls are removed completely from the flow. opacity: 0 means that the controls are still there, just invisible, they can still receive focus and input, on the code snippet below, you can still click in the invisible control between the two visible controls.
display: none means the controls are not there anymore so they can't receive focus and input.
You can refer to code snippet below to see the comparison.
.opacity .hidden {
opacity: 0;
}
.display .hidden {
display: none;
}
<h3>Opacity: 0 style</h3>
<form class="opacity">
<input type="text" />
<input type="text" class="hidden" />
<input type="text" />
</form>
<h3>Display: none style</h3>
<form class="display">
<input type="text" />
<input type="text" class="hidden" />
<input type="text" />
</form>
Related
buttons on IEI have created radio buttons in ASP.NET using bootstrap. These buttons are supposed to be disabled which works fine in chrome but in Internet explorer, it creates a gray square around the buttons. I've been able to get it removed on IE by wrapping the input tag with a div disabled tag. However, this does not work in chrome. So I can't get one to work without messing up the other. The code I have included is the one that works with chrome.
input[disabled] {
cursor: not-allowed;
background-color: #cfcfcf;
}
input[type="radio"], input[type="checkbox"] {
box-sizing: border-box;
padding: 0;
}
<div class="form-check">
<input disabled="disabled" checked="checked" class="form-check-input" id="Male" name="GenderSelection" type="radio" value="Y">
</div>
<label for="Male">Male</label>
]2
the issue is with the css.
input[disabled] {background-color:#cfcfcf;}
remove that and it works.
Thanks!
I have an ASP.Net page with several RadioButtonList controls on it.
I want to display this page in a read-only format, but I would like the selected radiobutton in each RadioButtonList to appear "normal" i.e not look disabled but not allow RadioButton to be clickable as I don't want the value to be modifyable.
I'm sure this has been answered somewhere but my googling is failing me at the moment...
How about overlaying a div on top of radio buttons container div with maximum z-index and alpha set to max so that it will appear transparent. This makes radio buttons unclickable
Try this http://jsfiddle.net/chintupawan/ztT5j/
To stop the button from also not beeing clickable you can use a div to overlay over them.
http://jsfiddle.net/heXQf/
<form>
<div class="row">
<div class="block"></div>
<input type="radio" name="sex" value="male" id="rdo"/> Male<br />
<input type="radio" name="sex" value="female" id="rdo"/> Female
</div>
</form>
form{width:300px;position:relative;}
.block{width:100px;display:block;height:100px;position:absolute;top:0;}
$('#rdo').click(function(e) {
e.preventDefault();
});
Try this jQuery:
$('.class-of-radio-button').click(function(e) {
e.preventDefault();
});
Fiddle: http://jsfiddle.net/c_kick/Gkp2Z/
try this
$("input[type!='radio'], select, textarea ").attr('disabled',true);
$("input[type='radio']").click(function(e){
e.preventDefault();
});
I have a web app that has 3 buttons on it, under it there is a textbox with no text on it, I would like to create an event that fills the textbox when a user hovers his mouse over the button, can someone please point me in the right direction
Thank
<input type="button" onmouseover="javascript:document.getElementById('textbox').value='Hello'" />
<input type="text" id="textbox" name="textbox" />
You could simply use jQuery to do this
<input type="button" onmouseover="fillText()" />
<input type="text" id="textbox" name="textbox" />
And the JavaScript/jQuery
function fillText() {
$("#textBox").val = "Your Text";
}
server have no more info about client side, but you could do that with AJAX updatepanel. use a java function to write mouse position in hidden text. then read hidden text in server side with triggers (in condition update mode) or timer (in always update mode).
Friends, Is it possible to keep one text box(or any other asp.net control) above another(let's say total 4 text boxes) in a .aspx page with one text box visible and other 3 invisible(I've done it in windows application)?I've tried with web page but no success?
you must give it a z-index style with a big value, of course z-index only works if only the position style is defined too.
for example:
<input type="text" style="position:absolute;top:0px;left:0px;">
<input type="text" style="position:absolute;z-index:100;top:0px;left:0px;">
<input type="text" style="position:absolute;top:0px;left:0px;">
<input type="text" style="position:absolute;top:0px;left:0px;">
in this example the second textbox will be on top of the others
I need a way to layout controls in a page.
Let me ask you by example.
I have four different action buttons (Edit, Delete, etc..) that do the same actions on any page, but sometimes I want them laid out horizontally and some other times vertically, depending on which page is displaying them.
So I thought of placing all four buttons in a user control and manage their layout using some sort of template control.
Does such a control exist that is as flexible as ListView's template management?
Of course a lazy solution is to place four buttons horizontally in a panel, and another four buttons vertically in another panel, and show/hide the panel that's requested, but I don't want to have two instances of the buttons; I just want one instance of each button, but in different layouts.
Feel free to add more tags to this.
Such thing can be achieved with CSS. I'm bad in CSS but I believe this works:
HTML
<div class="horizontal">
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<input type="button" value="4" />
</div>
Two CSS classes you simply set which you need in the div element (you can wrap your buttons with UserControl and map div's class to UserControl's property)
<head>
<style type="text/css">
.horizontal input
{
margin:0px 2px 0px 2px;
}
.vertical input
{
display:block;
margin:2px 0px 2px 0px;
}
</style>
</head>
Templated control is to strong for such easy task especially when you do not need to change template content.