I have a following .aspx page
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test Control</title>
<style type="text/css">
input[type="radio"][checked] +label
{
font-weight: bold;
color: Green;
}
input[type="radio"][disabled] +label
{
font-weight: bold;
color: Green;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="radio" name="abc" value="val1" disabled="disabled"/>val1<br/>
<input type="radio" name="abc" value="val2"/>val2
<input type="radio" name="abc" value="val3"/>val3
</div>
</form>
</body>
</html>
Am I doing anything wrong here?
because the css styles that I defined in the tag are not getting implied on the page.
Here's the JSFiddle for the said sample
As per the code the disabled button should be of green color but it is not..
similarly for the checked one
You haven't declared labels for the radio buttons...Do this.
<input id="abc1" type="radio" name="abc" value="val1" disabled="disabled"/><label for="abc1">val1</label><br/>
<input id="abc2" type="radio" name="abc" value="val2" checked="checked"/><label for="abc2">val2</label>
You should put radio button text in label
<input type="radio" id="val1" name="abc" value="val1" disabled="disabled"/>
<label for="val1">val1</label>
And then you can use your css selectors
input[type="radio"]:checked+label
{
font-weight: bold;
color: Green;
}
input[type="radio"]:disabled+label
{
font-weight: bold;
color: Green;
}
Related
When I enter 1 character in my input, I would like to display an error message min 3 char at the bottom of the input.
Like this example:
For now, I have this:
The error message is on the right
I can use a tag <br> but I think there is a better solution?
I tried this solution, but without success, I don't understand what's wrong.
.lastName {
color: blue;
bottom: 10px;
}
input.ng-pristine {
background-color:yellow;
}
input.ng-touched.ng-invalid {
background-color:red;
}
input.ng-touched.ng-valid {
background-color:green;
}
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/angular.js"></script>
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app>
<form name="studentForm" novalidate class="student-form">
<label for="lastName">Last Name</label><br />
<input type="text" name="lastName" ng-minlength="3" ng-maxlength="10" ng-model="lastName" />
<span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.minlength">min 3 chars.</span>
<span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.maxlength">Max 10 chars.</span><br /><br />
<input type="submit" value="Save" />
</form>
</body>
</html>
You can make the input a block level element by giving display: block;
input {
display: block;
}
input.ng-pristine {
background-color:yellow;
}
input.ng-touched.ng-invalid {
background-color:red;
}
input.ng-touched.ng-valid {
background-color:green;
}
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/angular.js"></script>
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body ng-app>
<form name="studentForm" novalidate class="student-form">
<label for="lastName">Last Name</label><br />
<input type="text" name="lastName" ng-minlength="3" ng-maxlength="10" ng-model="lastName" />
<span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.minlength">min 3 chars.</span>
<span ng-show="studentForm.lastName.$touched && studentForm.lastName.$error.maxlength">Max 10 chars.</span><br />
<input type="submit" value="Save" />
</form>
</body>
</html>
I'm new to the ARIA thing and from what I've read on the internet about it nothing says something should be installed in order for this to work. I've tried a very simple example but nothing happens except pure html5 with a little css that I wrote in the style tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<h1>ARIA<h1>
<style>
input:focus + [role="tooltip"] {
display: block;
position: absolute;
top: 100%;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>Login form</legend>
<div>
<label for="username">Your username</label>
<input type="text" id="username" aria-describedby="username-tip" required />
<div role="tooltip" id="username-tip">Your username is your email address</div>
</div>
<div>
<label for="password">Your password</label>
<input type="text" id="password" aria-describedby="password-tip" required />
<div role="tooltip" id="password-tip">Was emailed to you when you signed up</div>
</div>
</fieldset>
</form>
</body>
</html>
I'm clearly doing something wrong, so can someone please tell me what exactly? :D
I am trying to include a CSS to my JSP and I tried a lot of suggestions from the internet but none of them works for me.
Grateful if anyone can help!
My JSP class:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="${pageContext.request.contextPath}/css/Login.css" rel="stylesheet" type="text/css"/>
<title>Login</title>
</head>
<body>
<p>test</p>
<s:form action="loginAction" method="post">
<s:textfield type="text" label="User Name:" name="username"/>
<s:password type="text" label="Password: " name="password"/>
<s:submit value="login" type="submit"/>
</s:form>
</body>
</html>
My CSS class:
p {
font-family: verdana;
font-size: 20px;
color: red;
}
My directory:
WebContent
- css/Login.css
- WEB-INF
- ... jsp -s
...
<?
$time = $_POST['time'];
echo 'you have choosen '. $time;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.radio > input[type=radio]{
position:absolute;
margin-left:-99999px;
}
input[type=radio] + span{
cursor:pointer;
border:2px solid transparent;
}
span.active{
background-color:green;
}
.but1{
background-color:#009;
color:#FFF;
border:none;
border-radius:15px;
width:200px;
height:50px;
font-size:18px;
font-weight:bold;
border-radius:15px;
text-align:center;
padding:8px;
font-family:Verdana, Geneva, sans-serif;
float:left;
margin-left:10px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form action="Untitled3.php" method="post">
<label class="radio" for="fb1">
<input id="fb1" type="radio" name="time" value="all day" checked />
<span class="but1 active">Available<br>All day</span>
</label>
<label class="radio" for="fb2">
<input id="fb2" type="radio" name="time" value="between 8-12"/>
<span class="but1">Between<br>8am - 12am</span>
</label>
<label class="radio" for="fb3">
<input id="fb3" type="radio" name="time" value="between 12-4" />
<span class="but1">Between<br>12pm - 4pm</span>
</label>
<input name="submit" type="submit" value="send" />
<script type="text/javascript">
$('.radio').click(function(){
if( $(this).find('input').is(":checked") ){
$('.radio span').removeClass('active');
$(this).find('span').addClass('active');
}
});
</script>
</form>
</body>
</html>
Why is it that when I add the submit button, the CSS doesn't work in IE, but fine in all other browsers. When I remove the button, the CSS works fine in all browsers?
Please help, this problem is driving my nuts, IE should be banned.
Live code with the button is http://goo.gl/LbSWQG
Silly IE9 screwed up my layout of my aspx page.
In chrome it looks perfect:
However in EI9, it messed up my layout and made it look like this:
I've figured out why it looks the way it does. Apparently IE9 encapsulated my "save Note" button, description label, and description textbox in a div and made it float right. And the reason why the maincontent holder is displayed double, is because IE duplicated it but in the duplicated contentholder, it has not controls or anything in it. Just the background color.
Here is the html it generated:
<div class="mainContentHolder">
<span style="display: none;">
<label>File</label>
<label style="width: auto;" id="lblCaseFileID">2011630988 - </label>
</span>
<h3 id="quickNoteHeader">Quick Note: 2011630988 / 10/04/2012 08:47:12 <div style="float: right;">USES CURRENT DATE AND TIME<div></div></div></h3><div style="float: right;"><div>
<span>
<label class="inlineLbl">Description</label>
<input style="width: 82%;" id="txtDescription" name="txtDescription" type="text">
<span style="color: red; display: none;" id="ctl02" class="validation" title="Description is required">*</span>
<input style="width: 75px;" id="saveNote" onclick="saveNewQuickNote()" name="saveNote" value="Save Note" type="button">
</span>
</div>
<input id="hidCaseFileID" name="hidCaseFileID" value="2011630988" type="hidden">
<input id="hidInvestigatorLoggedOnID" name="hidInvestigatorLoggedOnID" value="25" type="hidden">
</div>
<div class="mainContentHolder">
<div style="float: right;">
</div>
And this is my .aspx page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<form id="form1" runat="server">
<div class="mainContentHolder">
<span style="display:none;">
<label>File</label>
<label style="width:auto;" runat="server" id="lblCaseFileID"></label>
</span>
<h3 runat="server" id="quickNoteHeader">Quick Note</h3>
<span>
<label class="inlineLbl">Description</label>
<input type="text" style="width:82%;" id="txtDescription" runat="server" />
<asp:RequiredFieldValidator class="validation" ErrorMessage="*" Display="Dynamic" ControlToValidate="txtDescription" ToolTip="Description is required" runat="server" />
<input type="button" ID="saveNote" style="width:75px;" Value="Save Note" runat="server" onclick="saveNewQuickNote()" />
</span>
</div>
<asp:HiddenField ID="hidCaseFileID" runat="server" />
<asp:HiddenField ID="hidInvestigatorLoggedOnID" runat="server" />
</form>
</body>
Any suggestions? I have no idea why IE did this or how to prevent it/fix it
EDIT:
css:.mainContentHolder
{
margin: 0px;
background-color: #f3f3f3;
border: solid 1px #a1a1a1;
min-width:890px;
width:920px;
height:50px;
}
.mainContentHolder h3
{
font-size:13px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 20px;
margin-right: 1%;
}
.mainContentHolder label
{
font-size: 11px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 20px;
margin-bottom: 10px;
margin-right: 1%;
}
.mainContentHolder input
{
width:70px;
}
.ui-dialog
{
font-size:12px;
}
.ui-widget-header
{
background: #8D122B;
}
.ui-datepicker
{
font-size:12px;
}
#quickNoteHeader
{
color: Green;
}
EDIT - seems as though the layout does work in IE 10. But not IE9
correct your doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
and also set display block and width 100% of span
<span style="display:block;width:100%;">
<label class="inlineLbl">Description</label>
<input type="text" style="width:82%;" id="txtDescription" runat="server" />
<asp:RequiredFieldValidator class="validation" ErrorMessage="*" Display="Dynamic" ControlToValidate="txtDescription" ToolTip="Description is required" runat="server" />
<input type="button" ID="saveNote" style="width:75px;" Value="Save Note" runat="server" onclick="saveNewQuickNote()" />
</span>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<html xmlns="http://www.w3.org/1999/xhtml">
</head>
Is not valid HTML.
You want:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
And don't forget the closing </html> tag.
dear john when i put this code in my local website its working...
i think another css are conflict..