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>
Related
i'm writing a page for a mobile version of a website and i'd like to insert a checkbox with label Dark Theme, when an user check this box change background color (of entire website) to black and text color to white, i found many part of codes in internet but it doesn't works, i don't know why.
For Example i tried this:
#select1:checked ~ div .wrapper{
background-color:black;
color: white;
}
<div class="wrapper">
<input id="select1" name="check1" type="checkbox" />
<label for="select1">Dark Theme</label>
</div>
Can you help me?
Thank you
this code is the example of Change background Color
<div id= "genre">
What do you bust a move to?
<br>
<br>
<form name="music" method="post" action="">
<p>
<input type="radio" name="music" value="radio" onClick="changeColour('b')">Doo
<br>
<input type="radio" name="music" value="radio" onClick="changeColour('r')">Rock
<br>
<input type="radio" name="music" value="radio" onClick="changeColour('p')">Pop
<br>
</form>
</div>
function changeColour(value)
{
var color = document.body.style.backgroundColor;
switch(value)
{
case 'b':
color = "#FF0000";
break;
case 'r':
color = "#0000FF";
break;
case 'p':
color = "#FF00FF";
break;
}
document.body.style.backgroundColor = color;
}
Jsfiddle
Change div background color by using css
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.wrapper{
width:50px;
height:50px;
background-color:#000;
}
#select2:checked ~ .wrapper{
background-color:#060;
}
#select3:checked ~ .wrapper{
background-color:#0000FF;
}
</style>
</head>
<body>
<input id="select1" name="check1" type="checkbox" checked />
<label for="select1">Dark Theme</label>
<input id="select2" name="check1" type="checkbox" />
<label for="select2">Green Theme</label>
<input id="select3" name="check1" type="checkbox" />
<label for="select3">Blue Theme</label>
<div class="wrapper"></div>
</body>
</html>
The only way you can get it through pure CSS is the following snippet:
#select1:checked~div.wrapper {
background-color: black;
color: white;
}
<input id="select1" name="check1" type="checkbox" />
<label for="select1">Dark Theme</label>
<div class="wrapper">
Some text here
</div>
NOTE: Using JS is the correct way to achieve what you are expecting.
I have tried styling my form submit button, but it isn't responding to any CSS styling. I tried using its class individually and also id individually and even both the class and id together, but nothing is working. I've attached the code:
HTML/PHP
if ($_POST['submit']) {
$member_username = "username";
$member_password = "pass****";
$username = $_POST['username'];
$password = $_POST['password'];
if ($username == $member_username && $password == $member_password) {
$_SESSION['username'] = $username;
header('Location: secret.php');
} else {
echo 'Incorrect username or password';
}
}
?>
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel=stylesheet />
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<title>Topaz</title>
</head>
<body>
<div class="index">
<div class="indexcontainer">
<h1>Topaz</h1>
<div class="indexform">
<form action="index.php" method="POST">
<input class="textbox" type="text" name="username" placeholder="Username" /><br /><br /><br />
<input class="textbox" type="password" name="password" placeholder="Password" /><br /><br /><br />
<input class="submit" id="submit" type="submit" name="submit" value="Login" />
</form>
</div>
</div>
</div>
</body>
</html>
CSS
.submit {
width: 200px;
}
#submit {
width: 200px;
}
Its probably just relative pathing to the style sheet, hit F12 (for chrome, though may need to enable dev console, google if needed) and see whether the network panel or console panel show a 404 error for one or more files.
The actual css applies fine
<!DOCTYPE html>
<html>
<head>
<!--
<link href="style.css" rel="stylesheet" />
-->
<style>
.submit{width:200px; color:red;}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<title>Topaz</title>
</head>
<body>
<div class="index">
<div class="indexcontainer">
<h1>Topaz</h1>
<div class="indexform">
<form action="index.php" method="POST">
<input class="textbox" type="text" name="username" placeholder="Username" />
<br />
<br />
<br />
<input class="textbox" type="password" name="password" placeholder="Password" />
<br />
<br />
<br />
<input class="submit" id="submit" type="submit" name="submit" value="Login" />
</form>
</div>
</div>
</div>
</body>
</html>
Ensure that "style.css" is on the same level as the php or html file that is actually being hit, or use relative pathing.
Also its good form to validate your html and css, as unrelated syntax mistakes can break styling.
For html: https://validator.w3.org/
For css: https://jigsaw.w3.org/css-validator/
But these likely wont be able to pickup on pathing issues, just syntax, so ensure you use the developer console for whatever browser your using.
You can try to add an inline style to have precedent over the external style sheet. Just use the tag and then put in the in the head tag area.
<style>
.submit {
width: 200px;
}
#submit {
width: 200px;
}
</style>
<?
$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
I think this is very basic CSS question .
But here is the fiddle and below is the code
http://jsfiddle.net/G6pqC/
<!DOCTYPE html>
<html>
<head>
<style>
#topDiv {
width:280px;
height:500px;
background-color:red;
}
.element{
position:relative;
right :100px;
}
</style>
</head>
<body>
<div id="topDiv">
<input type="button" value="button1" />
<input type="button" value="button2" />
<input type="button" value="button3" />
<input class='element' type="button" value="button4" />
<input type="button" value="button5" />
</div>
</body>
</html>
Can I know how I can move button5 to the first line and as a last element ? I moved button 4 to right and now I have place in the first line , But still button5 is going to the next line . Any one please ?
Thanks for your help
Can you increase the width of #topDiv? Like this:
#topDiv {
width:320px;
height:500px;
background-color:red;
}
http://jsfiddle.net/G6pqC/1/
Here you go - Check this Demo
#topDiv {
width:280px;
height:500px;
background-color:red;
}
input[type="button"]{ margin: 0 0 0 -4px; }
input[type="button"]:first-child { margin: 0; }
Okay, loaded it in Firefox and now I'm seeing it. Just adjust the font size on the buttons.
.element{
font-size:11px;
float:left;
margin-right:5px;
}
#topDiv {
width:280px;
height:500px;
background-color:red;
position:relative;
}
.moved{position:absolute;right:150px;}
<!DOCTYPE html>
<html>
<body>
<div id="topDiv">
<input class='element' type="button" value="button1" />
<input class='element' type="button" value="button2" />
<input class='element' type="button" value="button3" />
<input class='element moved' type="button" value="button4" />
<input class='element' type="button" value="button5" />
</div>
</body>
</html>
#topDiv {
width:280px;
height:500px;
background-color:red;
}
.element{
float: right;
}
<!DOCTYPE html>
<html>
<body>
<div id="topDiv">
<input class='element' type="button" value="button1" />
<input class='element' type="button" value="button2" />
<input class='element' type="button" value="button3" />
<input class='element' type="button" value="button4" />
<input class='element'type="button" value="button5" />
</div>
</body>
</html>
not sure if this is what ur after but there.
I've got three items on the top of my web page. I expect them to be located left, center, and right. However, that one in the center is a bugger (partially because it's created late in the game). I've tried the auto margin tricks with no luck. I've tried relative positioning but can't get it perfectly centered (and it draws on its neighbors). In the full code below, can you get the "showInMiddle" centered? You need to click the login button for that item to show up. Ideally, the items would wrap if the page was too narrow but still maintain their alignment (rather than drawing on top of each other or all on the left).
<!DOCTYPE html>
<html>
<head>
<title>This is dumb</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://knockoutjs.com/js/knockout-2.1.0.js"></script>
</head>
<body style="font-family: 'Segoe UI'; margin: 5px 20px;">
<header style="width: 100%">
<h4 id="showOnLeft" style="font-size: 1.1em; display: inline;">I'm the title</h4>
<span id="showInMiddle" data-bind="visible: LoggedIn">
I'm supposed to be in the middle with my two buttons.
<button>B1</button>
<button>B2</button>
</span>
<div id="showOnRight" style="display: inline; float: right">
<form id="someLoginForm" style="display: inline;" data-bind="visible: !LoggedIn(), submit: login" action="" method="post">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<input type="submit" value="Login" />
</form>
<form id="someLogoutForm" style="display: inline;" data-bind="visible: LoggedIn(), submit: logout" action="" method="post">
<span>Howdy</span>
<input type="submit" value="Logout" />
</form>
</div>
<nav><hr/></nav>
</header>
<script type="text/javascript">
function LoginViewModel() {
var self = this;
self.LoggedIn = ko.observable(false);
self.login = function (formElement) { self.LoggedIn(true); };
self.logout = function (formElement) { self.LoggedIn(false); };
}
ko.applyBindings(new LoginViewModel());
</script>
</body>
</html>
You cannot center a span because it's an inline element which doesn't know its width by default.
You can simply replace span with div like this (watch the inline CSS):
<div id="showInMiddle" data-bind="visible: LoggedIn" style="text-align:center ">
I'm supposed to be in the middle with my two buttons.
<button>B1</button>
<button>B2</button>
</div>
This is quick - I am off to go home. Try adjusting the width where the login form is concerned. You need to be aware that the total of floatdiv should never exceed the total of container or it will go wrong.
<!DOCTYPE html>
<html>
<head>
<title>
This is dumb
</title>
<style>
#container {
width:900px;
margin: auto 0;
overflow: auto;
}
.floatdiv {
float:left;
margin:0;
}
</style>
</head>
<body style="font-family: 'Segoe UI'; margin: 5px 20px;">
<div id="container">
<div class="floatdiv" style="font-size: 1.1em; width:200px">
I'm the title
</div>
<div class="floatdiv" id="showInMiddle" data-bind="visible: LoggedIn" style="text-align:center; width:300px ">
<button>
B1
</button>
<button>
B2
</button>
</div>
<div class="floatdiv" id="showOnRight" style="width:300px; float:right; text-align:right">
<form id="someLoginForm" style="" data-bind="visible: !LoggedIn(), submit: login" action="" method="post">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<input type="submit" value="Login" />
</form>
<form id="someLogoutForm" style="" data-bind="visible: LoggedIn(), submit: logout" action="" method="post">
<span>
Howdy
</span>
<input type="submit" value="Logout" />
</form>
</div>
</header>
</div>
</body>
</html>
It ends up that this works flawlessly when you use a table. Who knew?
<!DOCTYPE html>
<html>
<head>
<title>This is dumb</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://knockoutjs.com/js/knockout-2.1.0.js"></script>
<style type="text/css">
table, tr, td, h4, div { margin: 0px; padding: 0px; }
</style>
</head>
<body style="font-family: 'Segoe UI'; margin: 5px 20px;">
<header style="width: 100%">
<table style="width: 100%; border-width: 0px;">
<tr>
<td><h4 id="showOnLeft" style="font-size: 1.1em;">I'm the title</h4></td>
<td>
<div id="showInMiddle" data-bind="visible: LoggedIn" style="text-align: center;">
I'm supposed to be in the middle with my two buttons.
<button>B1</button>
<button>B2</button>
</div>
</td>
<td>
<div id="showOnRight" style="text-align: right;">
<form id="someLoginForm" style="display: inline;" data-bind="visible: !LoggedIn(), submit: login" action="" method="post">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<input type="submit" value="Login" />
</form>
<form id="someLogoutForm" style="display: inline;" data-bind="visible: LoggedIn(), submit: logout" action="" method="post">
<span>Howdy</span>
<input type="submit" value="Logout" />
</form>
</div>
</td>
</tr>
</table>
<nav><hr/></nav>
</header>
<script type="text/javascript">
function LoginViewModel() {
var self = this;
self.LoggedIn = ko.observable(false);
self.login = function (formElement) { self.LoggedIn(true); };
self.logout = function (formElement) { self.LoggedIn(false); };
}
ko.applyBindings(new LoginViewModel());
</script>
</body>
</html>