I have made a group of checkboxes with *ngFor and I want if I click on each of them color of them change and if click again color returns to the previous color:
<div *ngFor="let chekb of amenities" class="checkbox col-md-4 nopadding">
<label>
<input class="removebox" type="checkbox" (change)="changecheckbox($event)" name="checked" [(ngModel)]="chekb.checked">
{{chekb.title}}
</label>
</div>
component:
public amenities: checkBoxClass[] = [
{title:"pool",value:"pool" ,checked:false},
{title:"parking",value:"parking", checked:false}
]
Actually it is a checkbox to choose any of them may be one or two or more.
How can I change color of them by click on them?
Thank you very much.
#component({
...
...
/****** added style ******/
style:[
`
mycolor:{background : red}
`
]
})
<div *ngFor="let chekb of amenities;let i=index" //modified
class="checkbox col-md-4 nopadding">
<label [class.mycolor]="chekb.checked"> //modified
<input class="removebox"
type="checkbox"
(change)="changecheckbox($event)"
name="checked"
[(ngModel)]="chekb.checked">
{{chekb.title}}
</label>
</div>
Related
The code inside the signing container something look like this
the label is not moving or getting hide after start typing in the text field
<div className="container">
<form className="while" onSubmit={this.onSubmit}>
<h5 className="grey-text text-darken-3"> Sign In</h5>
<div className="input-field">
<label htmlFor="email">Email</label>
<input type="email" id="email" onChange={this.onChange} />
</div>
<div className="input-field">
<label htmlFor="password">Password</label>
<input type="password" id="password" onChange={this.onChange} />
</div>
<div className="input-field">
<button className="btn pink lighten-1 z-depth-0">Login</button>
</div>
</form>
</div>
Try adding class="active" to the label. it works for me!
Make sure the label comes AFTER the input, as per the documentation.
https://materializecss.com/text-inputs.html
just add this hook in your project!
useEffect(() => {
window.M.updateTextFields()
},[])
it is activate the text fields every time when
component first loading
you can add active className on label
but this
I have a webpage utilizing the current bootstrap. It displays a label and text input box part of a form.
If I include the class="custom-control-input" to the input text field, Bootstrap hides it. Why?
If I don't include, it shows up, but it won't fulfill the full width according to its parent div tag.
The code is:
<div class="container">
<form class="needs-validation" novalidate action="submit_transgene_entry.php" method="post">
<div class="row">
<div class="col-md-2 mb-3">
<label for="comments_fieldID1">field below is shown, but won't extend full width</label>
</div>
<div class="col-md-10 mb-3">
<input type="text" id="comments_fieldID1" name="comments_fieldName">
</div>
</div>
<div class="row">
<div class="col-md-2 mb-3">
<label for="comments_fieldID2">the following field is hidden by custom-control-input</label>
</div>
<div class="col-md-4 mb-3">
<input type="text" id="comments_fieldID2" class="custom-control-input" name="comments_fieldName">
</div>
</div>
<div class="row">
<div class="col-md-3 mb-3">
<input type="submit" name='accept_transgene_entry' class="btn btn-primary btn-lg btn-block" value="Accept Transgene Entry" alt="Accept Transgene Entry"/>
</div>
</div>
</form>
</div>
You can see the code in action at this page
You must use the form-control class instead of custom-control-input.
I've edited your fiddle:
https://jsfiddle.net/2orbj50v/
Just add this in your CSS
#comments_fieldID1 {
width:100%;
}
Reason Behind Hiding this the class "custom-control-input" have some default css value from bootstrap like this, if you change the opacity 1 instead of 0 it will show the original field.
.custom-control-input {
position: absolute;
z-index: -1;
opacity: 0;
}
to make the input field full width just add this css
#comments_fieldID1 {
width:100%;
}
That may be because bootstrap 4 provide customized form elements for
Checkbox
Radio button
Range
Select
Upload
Toggle
And for these to work you have to wrap it around a <div> with class="custom-control custom-checkbox". The following is the example if you want to use custom-checkbox. But it won't work if you replace checkbox with text
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Custom checkbox</label>
</div>
And for your first input box, you can simply make it's with to be 100%. Like shown below:
#comments_fieldID1{
width:100%;
}
Best Answer : Use form-control for your #comments_fieldID1 element
Or you can add css in your css file :
#comments_fieldID1 {
width: 100%;
}
I am trying to use AngularJS and Bootstrap css, by following the below example link:
http://www.tutorialsteacher.com/angularjs/angularjs-form-with-bootstrap . I have followed the same UI. However, I have few additional controls such as Datetimepicker for Bootstrap 3 * version : 4.15.35 - Eonasdan/bootstrap-datetimepicker, so which will 4 controls in one row -
label datepicker label timepicker
How should the UI and CSS be defined 4 controls in row?
Also, if using ng-repeat -what is the css to be used?
Adding existing code:
<body class="ng-cloak">
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="" >
<div class="container form-horizontal" ng-show="createMenu">
<br />
<div class="form-group">
<label class="col-sm-3 control-label">Season<em style="color:red">*</em></label>
<div class="col-sm-4">
<select name="seasonTypeSelect" required="" ng-model="selectedSeasonType" class="dropdown form-control cl-sm-6" ng-options="season.SeasonTypeName for season in seasons" ng-change="updateImageUrl(selectedSeasonType)">
<option value="">-- Select --</option>
</select>
</div>
<div class="col-sm-3">
<span class="error" ng-show="submitted == true && mainForm.seasonTypeSelect.$error.required">Please select season.</span>
</div>
</div>
<div class="form-group">
<label for="firstName" class="col-sm-3 control-label">Name<em style="color:red">*</em></label>
<div class="col-sm-4">
<input type="text" maxlength="150" class="form-control" required="" ng-model="nName" id="nName" name="nName" />
</div>
<div class="col-sm-3">
<span class="error" ng-show="submitted == true && mainForm.nName.$error.required">Please enter Name.</span>
</div>
</div>
</form>
</div>
</body>
I want to add a ng-repeat, which has label, textbox, textarea, delete icon in one row.
I also want to add the Eonasdan datetime picker, which has label, date control, label time control in one row.
How should the above be aligned ?
I want to add a Textfield input-group-addon. The problem is that when I use this class with a glyphicon the icon is not positioned right next to textfield see the image below.
Maybe someone has some hints for me - why is that?
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="name2"></label>
<div class="col-md-4">
<input id="name2" name="name2" type="text" placeholder="" class="form-control input-md">
</div>
</div>
<!-- Multiple Radios (inline) -->
<div class="form-group">
<label class="col-md-4 control-label" for="gender">Geschlecht</label>
<div class="col-md-4">
<label class="radio-inline" for="gender-0">
<input type="radio" name="gender" id="gender-0" value="1" checked="checked">
männlich
</label>
<label class="radio-inline" for="gender-1">
<input type="radio" name="gender" id="gender-1" value="2">
weiblich
</label>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="gender">Geburtsdatum</label>
<div class="col-md-4">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker2').datetimepicker({
language: 'de'
});
});
</script>
</div>
</div>
Your code works fine with Bootstrap only (see this fiddle http://jsfiddle.net/WNAB8/1/)
The problem is in your own css. Use developer tools (F12) to find out what gives margin-right for the input or margin-left for the addon. Or optionally paste in your custom css so we can help you.
Update:
It definitely is because of given max-width for inputs. If for some reason you want to use max-width anyway, one solution is to give the max-width to .input-group:
.input-group {
max-width: 280px;
}
Demo: http://jsfiddle.net/WNAB8/5/
In your fiddle you are overriding bootstrap's textarea maxwidth option. Remove this from CSS:
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
Working example
If you want to change the width of your text areas, change it using the form layout. From your layout you should look at the horizontal form and width can be changed by placing the input into a div controlled with the col-*:
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
My code as follows, generated by a software and I cannot change any of the values.
<div class="cred-field cred-field-ticket-month-or-course">
<div class="cred-label">Month or Course</div>
<div id="cred_form_3584_1_wpcf-ticket-month-or-course-radios" class="myzebra-radios">
<div class="myzebra-radios-single">
<label class="myzebra-style-label">
<input id="cred_form_3584_1_wpcf-ticket-month-or-course_wpcf-fields-radio-option-a6da15467aeb84f539c0dc1cd766ccd6-2" class="myzebra-control myzebra-radio myzebra-prime-name-wpcf-ticket-month-or-course" type="radio" checked="checked" value="wpcf-fields-radio-option-a6da15467aeb84f539c0dc1cd766ccd6-2" name="wpcf-ticket-month-or-course">
<span class="myzebra-radio-replace"></span>
</label>
<label id="cred_form_3584_1_label_wpcf-ticket-month-or-course_wpcf-fields-radio-option-a6da15467aeb84f539c0dc1cd766ccd6-2" for="cred_form_3584_1_wpcf-ticket-month-or-course_wpcf-fields-radio-option-a6da15467aeb84f539c0dc1cd766ccd6-2">per month</label>
</div>
<div class="myzebra-radios-single">
<label class="myzebra-style-label">
<input id="cred_form_3584_1_wpcf-ticket-month-or-course_wpcf-fields-radio-option-f63eb739e2a6499a882c8e82aa35b028-1" class="myzebra-control myzebra-radio myzebra-prime-name-wpcf-ticket-month-or-course" type="radio" value="wpcf-fields-radio-option-f63eb739e2a6499a882c8e82aa35b028-1" name="wpcf-ticket-month-or-course">
<span class="myzebra-radio-replace"></span>
</label>
<label id="cred_form_3584_1_label_wpcf-ticket-month-or-course_wpcf-fields-radio-option-f63eb739e2a6499a882c8e82aa35b028-1" for="cred_form_3584_1_wpcf-ticket-month-or-course_wpcf-fields-radio-option-f63eb739e2a6499a882c8e82aa35b028-1">per course</label>
</div>
</div>
</div>
<div style="clear: both;"></div>
I need help in putting this radio button side by side (horizontally).
I cannot do this because it will affect other radio buttons on the same page. Is there any other techniques?
.myzebra-radios-single {
float: left;
}
You can use css cover,
<div id="cred_form_3584_1_wpcf-ticket-month-or-course-radios" class="myzebra-radios">
add class 'single', like this:
<div id="cred_form_3584_1_wpcf-ticket-month-or-course-radios" class="myzebra-radios single">
and css code:
.single .myzebra-radios-single{ float:none;}
the single class can be added to any .myzebra-radios-single father in front of the class
addclass like this:
$('#cred_form_3584_1_wpcf-ticket-month-or-course-radios').addClass('single');
the id should be unique
you can target
#cred_form_3584_1_wpcf-ticket-month-or-course-radios .myzebre-radios-single
that is, the class that you want to target, but only if it is a descendant of the given id