I've tried with:
<form name="form" class="form-horizontal form-article" role="form" data-ng-submit="save()">
<div class="col-md-12">
<div class="form-group">
<div>
<input type="text" class="form-control" placeholder="Title" required="required" data-ng-model="article.title">
</div>
<span>*</span>
</div>
</form>
and
.form-article .form-group div:after {
color: red;
content: '*';
}
but the result is always
with like:
<form name="form" class="form-horizontal form-article" role="form" data-ng-submit="save()">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-10">
<input type="text" class="form-control" placeholder="Title" required="required" data-ng-model="article.title">
</div>
<span class="col-md-2">*</span>
</div>
</form>
but the result is very ugly :(
Demo Fiddle
Try using:
.form-group div{
position:relative;
margin-right:15px;
}
.form-group div:after{
position:absolute;
content:'*';
color:red;
right:-10px;
top:0;
}
nb. You also hadnt closed one of your div tags in your posted code.
Create a CSS class
.required-field:after {
color: #d00;
content: "*";
position: absolute;
margin-left: 3px;
top: 10px;
}
Use it just the label which is required
<div class="form-group">
<label for="EmployeeName" class="control-label required-field col-sm-2">Employee Name</label>
<div class="col-sm-4">
#Html.TextBoxFor(m => m.EmployeeName, new { #class = "form-control", ng_model = "Employee.EmployeeName", alpha_numeric = "", required = "true" })
</div>
<label for="" class="control-label required-field col-sm-2">Birth Date</label>
<div class="col-sm-4">
#Html.TextBoxFor(m => m.BirthDate, new { #class = "form-control", ng_model = "Employee.BirthDate", required = "true" })
</div>
Related
I have next function:
changeStateSelect() {
if ($('#idAsignaturaGlobal').prop('checked')) {
$('#idAsignatura').prop('disabled', true);
$('#idAsignatura').prop('required', false);
} else {
$('#idAsignatura').prop('disabled', false);
$('#idAsignatura').prop('required', true);
}
}
and next CSS:
.form-horizontal select:disabled {
cursor: not-allowed !important;
background-color: red !important;
border-color: red !important;
}
But it is not working. I tryed it adding it into the function with .css but neither... I do not understand why it happening this... Why could it be?. Thank you.
EDIT: This is my HTML code (Is React JS + Bootstrap)
<form role="form" class="form-horizontal text-center" method="GET" action="">
<fieldset class="scheduler-border">
<div class="form-group">
<label for="idAsignatura" class="control-label col-xs-12 col-sm-2 col-md-2 col-lg-2 label-select2">Asignatura: </label>
<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10">
<select name="nAsignatura" id="idAsignatura" class="js-states form-control select2" required></select>
</div>
</div>
<div class="checkbox checkbox-primary">
<input type="checkbox" name="nAsignaturaGlobal" id="idAsignaturaGlobal" onChange={this.changeStateSelect} value="true"/>
<label for="idAsignaturaGlobal">
Incidencia con la asignatura
</label>
</div>
</fieldset>
</form>
EDIT: I added your actual problem
Your problem is here:
<input type="checkbox" name="nAsignaturaGlobal" id="idAsignaturaGlobal" onChange={this.changeStateSelect} value="true"/>
You have onChange when it should be onchange="changeStateSelect()"
Demo
function changeStateSelect() {
if ($('#idAsignaturaGlobal').prop('checked')) {
$('#idAsignatura').prop('disabled', true);
$('#idAsignatura').prop('required', false);
} else {
$('#idAsignatura').prop('disabled', false);
$('#idAsignatura').prop('required', true);
}
}
.form-horizontal select:disabled {
cursor: not-allowed !important;
background-color: red !important;
border-color: red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" class="form-horizontal text-center" method="GET" action="">
<fieldset class="scheduler-border">
<div class="form-group">
<label for="idAsignatura" class="control-label col-xs-12 col-sm-2 col-md-2 col-lg-2 label-select2">Asignatura: </label>
<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10">
<select name="nAsignatura" id="idAsignatura" class="js-states form-control select2" required></select>
</div>
</div>
<div class="checkbox checkbox-primary">
<input type="checkbox" name="nAsignaturaGlobal" id="idAsignaturaGlobal" onChange="changeStateSelect()" value="true"/>
<label for="idAsignaturaGlobal">
Incidencia con la asignatura
</label>
</div>
</fieldset>
</form>
I am having issues trying to make this form responsive. Whenever I make my screen smaller, my form won't resize. I am using bootstrap, but I am not sure how to make that happen. I also don't know how to align "email" label with the other labels.
<html>
<head>
<title>Title</title>
</head>
<style>
#myform {
border: 1px outset #ccc;
background: #fff repeat-x;
padding: 50px;
margin: 20px auto;
width: 500px;
height: 450px;
font-size: 14px;
-moz-border-radius: 4px;
}
#myform h3 {
text-align: left;
margin: 0 0 10px 0;
}
#inputs label,
#inputs input,
#inputs textarea,
#inputs select {
display: block;
width: 300px;
float: left;
margin-bottom: 10px;
}
#inputs input {
height: 40px;
}
#inputs label {
text-align: right;
width: 75px;
padding-right: 20px;
}
#inputs br {
clear: left;
}
#agree {
font-size: 10.5px;
}
</style>
<body>
<div class="container">
<form id="myform" action="#">
<h3>Your Information</h3>
<div id="inputs">
<!-- username -->
<label for="username">Firstname</label>
<br/>
<input id="username" type="text" placeholder="Fullname" /><br />
<!-- password -->
<label for="password">Password</label>
<br/>
<input id="password" type="password" placeholder="Password" />
<br />
<!-- email -->
<label for="email">Email </label>
<br/>
<input id="email" type="text" placeholder="Email" />
</div>
<p>
<button type="button" class="btn btn-primary btn-lg btn-block">
Proceed
</button>
</p>
<label id="agree">
By registering you agree to Elephant's Terms of Service and Privacy Policy.
<input type="checkbox" id="check" title="Required to proceed" />
</label>
</form>
</div>
<body>
</html>
As you already use bootstrap take advantage of bootstrap css classes. Here is official documentation about forms (https://v4-alpha.getbootstrap.com/components/forms/). One of form solution would be:
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Form Name</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="username">username:</label>
<div class="col-md-4">
<input id="username" name="username" type="text" placeholder="Username" class="form-control input-md" required="">
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="password">password:</label>
<div class="col-md-4">
<input id="password" name="password" type="password" placeholder="password" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="email">email:</label>
<div class="col-md-4">
<input id="email" name="email" type="text" placeholder="email" class="form-control input-md" required="">
</div>
</div>
<!-- Multiple Checkboxes -->
<div class="form-group">
<label class="col-md-4 control-label" for="checkboxes"></label>
<div class="col-md-4">
<div class="checkbox">
<label for="checkboxes-0">
<input type="checkbox" name="checkboxes" id="checkboxes-0" value="1">
By registering you agree to Elephant's Terms of Service and Privacy Policy.
</label>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton">Single Button</label>
<div class="col-md-4">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Button</button>
</div>
</div>
</fieldset>
</form>
Why .form-group-sm reduces a .form-control but not a .control-label except when inside a .form-horizontal? This forces a custom css or the use of <small> tag with the <label> tag. Is it by design or a missing?
From bootstrap.css:
.form-group-sm .form-control { ... }
.form-horizontal .form-group-sm .control-form { ... }
Sample code:
<form class="form-horizontal">
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>
Hi its a very basic question i just want to know when hover on one element the style of other changes how can I achieve this ?
<form id="numerical" class="row">
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
<button type="submit" id="btn" class="row">Submit</button>
</form>
Like when i hover on button border-color of all the input changes.
I only want this with css no js or jQuery.
It is possible to do this but not with your current code.
Below is code of this working, the hover element will have to be before the elements you want to change. It works by going down and not up, so if this button is at the bottom you will not be able to see the same effect as the effect does not effect elements that are already rendered.
button:hover ~ div input {
border: 1px solid red;
}
<form id="numerical" class="row">
<button type="submit" id="btn" class="row">Submit</button>
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
</form>
We can select other elements siblings by using the ~ selector.
The ~ combinator separates two selectors and matches the second
element only if it is preceded by the first, and both share a common
parent.
More here
Here is the button at the bottom, as you can see it will not work.
button:hover ~ div input {
border: 1px solid red;
}
<form id="numerical" class="row">
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
<button type="submit" id="btn" class="row">Submit</button>
</form>
for a pure css solution you need to move the <button>-tag in front of the inputs you want to change, but then it'll work like this
button:hover ~ .form-group input {
border-color: red;
}
<form id="numerical" class="row">
<button type="submit" id="btn" class="row">Submit</button>
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
</form>
that is possible only if the inputs after the button
<form id="numerical" class="row">
<button type="submit" id="btn" class="row">Submit</button>
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
</form>
and the css:
#btn:hover ~ .form-group input {
background: #000;
}
after that you can use position absolute for the button
and this is demo
http://jsfiddle.net/u7tYE/6037/
try this
<form id="numerical" class="row">
<label for="btn" class="label"></label>
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
<button type="submit" id="btn" class="row">Submit</button>
</form>
<style>#numerical{
position: relative;
}
.form-group {
margin-bottom:10px;
}
#numerical .label {
position: absolute;
bottom: 0;
left: 0;
height: 32px;
width:102px;
}
.label:hover ~ .form-group input {
border: solid 2px red;
}
#btn{
background:blue;
color:#fff;
height:30px;
width:100px;
} </style>
Fiddle
My HTML has a class called .required that is assigned to required fields.
Here is the HTML:
<form action="/accounts/register/" method="post" role="form" class="form-horizontal">
<input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' />
<div class="form-group required">
<label class="col-md-2 control-label">Username</label>
<div class="col-md-4">
<input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" required="required" title="" type="text" />
</div>
</div>
<div class="form-group required"><label class="col-md-2 control-label">E-mail</label><div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">Password</label><div class="col-md-4"><input class="form-control" id="id_password1" name="password1" placeholder="Password" required="required" title="" type="password" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">Password (again)</label><div class="col-md-4"><input class="form-control" id="id_password2" name="password2" placeholder="Password (again)" required="required" title="" type="password" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">first name</label><div class="col-md-4"><input class="form-control" id="id_first_name" maxlength="30" name="first_name" placeholder="first name" required="required" title="" type="text" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">last name</label><div class="col-md-4"><input class="form-control" id="id_last_name" maxlength="30" name="last_name" placeholder="last name" required="required" title="" type="text" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label"> </label><div class="col-md-4"><div class="checkbox"><label><input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service</label></div></div></div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-star"></span> Sign Me Up!
</button>
</div>
</div>
</form>
I added the following to my CSS;
.form-group .required .control-label:after {
content:"*";color:red;
}
Still that does not give a red * around the required fields. What am I missing here? Isn't there a direct way in Bootstrap 3 to introduce * to required fields?
EDIT
The * in terms and conditions does not appear immediately to a checkbox. How to fix this?
Use .form-group.required without the space.
.form-group.required .control-label:after {
content:"*";
color:red;
}
Edit:
For the checkbox you can use the pseudo class :not(). You add the required * after each label unless it is a checkbox
.form-group.required:not(.checkbox) .control-label:after,
.form-group.required .text:after { /* change .text in whatever class of the text after the checkbox has */
content:"*";
color:red;
}
Note: not tested
You should use the .text class or target it otherwise probably, try this html:
<div class="form-group required">
<label class="col-md-2 control-label"> </label>
<div class="col-md-4">
<div class="checkbox">
<label class='text'> <!-- use this class -->
<input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
</label>
</div>
</div>
</div>
Ok third edit:
CSS back to what is was
.form-group.required .control-label:after {
content:"*";
color:red;
}
HTML:
<div class="form-group required">
<label class="col-md-2"> </label> <!-- remove class control-label -->
<div class="col-md-4">
<div class="checkbox">
<label class='control-label'> <!-- use this class as the red * will be after control-label -->
<input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
</label>
</div>
</div>
</div>
Assuming this is what the HTML looks like
<div class="form-group required">
<label class="col-md-2 control-label">E-mail</label>
<div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div>
</div>
To display an asterisk on the right of the label:
.form-group.required .control-label:after {
color: #d00;
content: "*";
position: absolute;
margin-left: 8px;
top:7px;
}
Or to the left of the label:
.form-group.required .control-label:before{
color: red;
content: "*";
position: absolute;
margin-left: -15px;
}
To make a nice big red asterisks you can add these lines:
font-family: 'Glyphicons Halflings';
font-weight: normal;
font-size: 14px;
Or if you are using Font Awesome add these lines (and change the content line):
font-family: 'FontAwesome';
font-weight: normal;
font-size: 14px;
content: "\f069";
.form-group .required .control-label:after should probably be .form-group.required .control-label:after. The removal of the space between .form-group and .required is the change.
use simple css,
.myform .required:after {
content: " *";
color: red;
font-weight: 100;
}
<form class="myform">
<div class="col-md-12">
<label for="xxx_fname" class="form-label required">First Name</label>
<input type="text" class="form-control" id="xxx_fname" >
</div>
<div class="col-md-12">
<label for="xxx_lname" class="form-label required">Last Name</label>
<input type="text" class="form-control" id="xxx_lname" >
</div>
</form
The other two answers are correct. When you include spaces in your CSS selectors you're targeting child elements so:
.form-group .required {
styles
}
Is targeting an element with the class of "required" that is inside an element with the class of "form-group".
Without the space it's targeting an element that has both classes. 'required' and 'form-group'
This CSS worked for me:
.form-group.required.control-label:before{
color: red;
content: "*";
position: absolute;
margin-left: -10px;
}
and this HTML:
<div class="form-group required control-label">
<label for="emailField">Email</label>
<input type="email" class="form-control" id="emailField" placeholder="Type Your Email Address Here" />
</div>
This works for me:
CSS
.form-group.required.control-label:before{
content: "*";
color: red;
}
OR
.form-group.required.control-label:after{
content: "*";
color: red;
}
Basic HTML
<div class="form-group required control-label">
<input class="form-control" />
</div>
I modified the css, as i am using bootstrap 3.3.6
.form-group.required label:after{
color: #d00;
font-family: 'FontAwesome';
font-weight: normal;
font-size: 10px;
content: "\f069";
top:4px;
position: absolute;
margin-left: 8px;
}
the HTML
<div class="form-group required">
<label for="return_notes"><?= _lang('notes') ?></label>
<textarea class="form-control" name="return_notes" id="return_notes" required="required"></textarea>
</div>