In my browser
In primeflex doc
And yes i've already installed with the new stack, Angular 12 and Prime flex 3
<div class="card">
<h5>Vertical and Grid</h5>
<div class="formgrid grid">
<div class="field col">
<label for="firstname2">Firstname</label>
<input id="firstname2" type="text" class="inputfield w-full">
</div>
<div class="field col">
<label for="lastname2">Lastname</label>
<input id="lastname2" type="text" class="inputfield w-full">
</div>
</div>
</div>
anyone have the same problem ?
I was facing the same issue. I noticed that class card is given in the primeflex portal which is part of main.scss written by https://www.primefaces.org/primeflex and when we use primeflex in our application and if we see in primeflex.css, it does not have card class but, grid is there in primeflex.css
Related
I'm creating a Reactive form in Angular 6.
In typescript file I'm getting the form instance and form controls.
after that iterating through the form controls and printing the user given values.
When do ng serve in the console of the browser I'm getting the error.
Here is the code.
html
<div >
<h2>Login</h2>
<form class='form' [formGroup]='loginForm' (ngSubmit)='onSubmit()'>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username"
placeholder="Username"
[ngClass]="{ 'is-invalid': submitted && f.username.errors }"/>
<div *ngIf="submitted && f.username.errors" class="invalid-feedback">
<div *ngIf="f.username.errors.required">Username is required</div>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password"
placeholder="Password"
[ngClass]="{ 'is-invalid': submitted && f.password.errors }"/>
<div *ngIf="submitted && f.password.errors" class="invalid-feedback">
<div *ngIf="f.password.errors.required">Password is required</div>
</div>
</div>
<div class="form-group">
<label><input type="checkbox"> Remember me</label>
</div>
<div class="form-group">
<button [disabled]="loading" type="submit" class="btn btn-
primary">Login</button>
</div>
My form fields are displaying whole screen. Please see the attached image.
But I want to display all the controls to the center of the screen.
i.e. I need place left,right,top and bottom equal space.
Please help me in solving this issue.
The error throws because of the wrong formGroup name. In the ts file you have created the formGroup name as loginFormGroup and in the html the formGroup name is 'loginForm'. change it like this
<form class='form' [formGroup]='loginFormGroup' (ngSubmit)='onSubmit()'>
give your top most div class suppose makeItCenter and add following css
.makeItCenter {
width: 50rem;
height:100vh;
display:flex;
align-items: center;
justify-content:center;
}
place the whole form tag in
<div class="row">
<div class="col-sm-6 col-lg-offset-3">
set your form here
</div>
</div>
this is simple bootstrap
I have an angular 2 component for displaying a bootstrap 3 button group. The component can either have a label or it can stand alone.
My solution was to use two ng-contents controlled by an *ngIf however, it refuses to display either of the ng-contents and does not throw an error.
Here's btn-multi.html:
<div class="form-group"
*ngIf="label">
<label class="control-label col-lg-2 col-md-3">
{{ label }}
</label>
<div class="col-lg-10 col-md-9">
<div class="btn-group">
<ng-content></ng-content>
</div>
</div>
</div>
<div class="btn-group"
*ngIf="!label">
<ng-content></ng-content>
</div>
And here is how it is used:
<btn-multi label="Some Label"
[(value)]="someValue">
<btn [value]="true">Yes</btn>
<btn [value]="false">No</btn>
</btn-multi>
And this is it working with just the one ng-content:
I'm currently on angular 2 beta-15.
Thanks!
NgIf is getting in the way of including the content since ng-content is being rendered after NgIf is evaluated.
You need to take another approach on it, maybe something like this:
<div [ngClass]="{'form-group': label}">
<label *ngIf="label" class="control-label col-lg-2 col-md-3">
{{ label }}
</label>
<div [ngClass]="{'col-lg-10 col-md-9': label}">
<div class="btn-group">
<ng-content></ng-content>
</div>
</div>
</div>
And there are also even better ways to do it, it all depends on how you want this component to be consumed.
FYI, just did this on the fly so its not tested, but just to give you a general idea.
I recently updated the Angular UI bootstrap. When page load I am getting this error-
Error: [$compile:tplrt] Template for directive 'uibTypeaheadPopup'
must have exactly one root element.
uib/template/typeahead/typeahead-popup.html
My template file which has the input tag has proper root element.
<div>
<div class="form-row">
<div class="form-cell"><label class="control-label">Cc : </label></div>
<div class="form-cell">
<input name="ccClientInput" type="text" ng-model="asyncSelected"
uib-typeahead="address as address.SearchDisplay for address in clientCcSearch.getClients($viewValue)"
typeahead-loading="loadingLocations"
typeahead-editable="false"
typeahead-wait-ms="300"
placeholder="Search for colleagues"
class="clientcc-search">
<div>
<span ng-repeat="client in CcClients">
<span class="clientcc">
<span class="client-tooltip" tooltip tooltip-contents="createTooltip(client)">{{client.Name}}</span>
<span ng-click="removeClientCC($index)" class="cursor-pointer ccCl">
<i class="icon-remove-on-s"></i>
</span>
</span>
</span>
</div>
</div>
</div>
The problem is that, You have not closed one of the <div> element.
Issue was spelling mistake in the tpls while adding it to grunt.
Thanks,
RZ
I am using bootstrap accordion in angular js. The panels are opening If I click on the heading directly but I need to add plus/minus symbols for each heading. Please help me out in achieving the functionality like If I click plus icon, panel should be open and If I click on minus symbol, the panel should be closed. Thanks in advance.
Sorry, I Cannot able to add fiddle or plunker as the data is coming from my local database.
<uib-accordion close-others="oneAtATime" class="accordion-data">
<uib-accordion-group heading="title from database" ng-repeat="values are coming from database">
<div class="row">
<div class="col-md-12">
<div class="row row-head">
<div class="col-md-6 col-xs-6">
</div>
</div>
<div class="row item-head accordion-content" ng-repeat="values are coming from database">
<div class="col-md-4 col-xs-4"><input type="checkbox" ng-model="check" >data from database
</div>
<div class="col-md-8 col-xs-8 service-data">
<div class="row">
<div class="col-md-2 col-xs-2"></div>
<div class="col-md-2 col-xs-2">
<input type="number" class="form-data" ng-disabled="!check">
</div>
<div class="col-md-2 col-xs-2">
<input type="number" name="times" class="form-data" ng-disabled="!check">
</div>
<div class="col-md-2 col-xs-2">
<input type="text" class="form-data" ng-disabled="!check" ng-readonly="true" >
</div>
<div class="col-md-2 col-xs-2">
<input type="text" class="form-data" ng-disabled="!check" ng-readonly="true" >
</div>
<div class="col-md-2 col-xs-2">
<input type="text" class="form-data" ng-disabled="!check" ng-readonly="true" >
</div>
</div>
</div>
</div>
</div>
</div>
</uib-accordion-group>
</uib-accordion>
I don't know the specifics about your implementation, but you could make use of the CSS :before pseudo-element like I have done in this simple fiddle.
If you have a way of selecting the accordion header by the open/closed state, then you can do something similar to this:
.accordion li.open:before {
content: '- ';
}
.accordion li.closed:before {
content: '+ ';
}
glyphicon glyphicon-plusIf you want to handle this in javascript, you could use the collapse event described here.
shown.bs.collapse will fire when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
hidden.bs.collapse will fire when a collapse element has been hidden from the user (will wait for CSS transitions to complete).
$('#yourCollapseDiv').on('shown.bs.collapse', function () {
$(".glyphicon").removeClass("glyphicon glyphicon-minus").addClass("glyphicon glyphicon-plus");
});
$('#yourCollapseDiv').on('hidden.bs.collapse', function () {
$(".glyphicon").removeClass("glyphicon glyphicon-plus").addClass("glyphicon glyphicon-minus");
});
It uses glyphicons to display the + and -
When i using textarea below the ng-repeat in angular js - ionic . The text area is not working properly and some time lost it focus also. Please provide me solution for that this is my code :
<div class="title">Comments</div>
<ul class="comment_list">
<li ng-repeat="x in comments ">
<a><img no-image ng-src="{{profile_img_path.image_url_tiny+x.User.image}}" alt="" class="pro_img"></a>
<div class="pro_deatil" >
<h2> {{x.User.name}} </h2>
<p>{{x.CommentDish.comment}}</p>
</div>
<div class="pro_like" >
</div>
<div class="clearfix"></div>
</li>
</ul>
<div class="comment">
<textarea name="comment" rows="5" cols="10" ng-model="comment_data.comment" placeholder="Enter Comment" class="post_txt_area" overflow-scroll="true"></textarea>
<div> <a ng-click="postComment()" class="event_btn">Comment</a> </div>
</div>
Please help me if anyone has solution for this issue....