You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am using angular-schema-form with angular-schema-form-bootstrap, and I am managing my form through the tab array template provided in this package.
When using ng-animate in the Angular.JS project, an insidious problem occurs with the tabarray: the form fields within the tab are not displayed until the "add" button is clicked.
Expected behaviour
I expect them to be shown.
Actual behaviour
The form fields within the tab are not displayed until the "add" button is clicked.
As you can see editing the Plunker, the problem can be solved importing the bootstrap decorator inside "angular-schema-form". The one in this repo is bugged.
One can also disable ng-animate.
How to solve the problem
The problem as described in the Angular issue provided above, exists when one uses ng-animate and specifies more than one interpolated value in the "class" attribute of an element, in conjuction of ng-class.
In this particular situation ng-class is never evaluated.
This is the case of: /0.2.0/src/tabarray.html
where we have
<div class="tab-pane clearfix tab{{selected.tab}} index{{$index}}"
sf-field-model="ng-repeat"
ng-repeat="item in $$value$$ track by $index"
ng-show="selected.tab === $index"
ng-class="{active: selected.tab === $index}">
Here there are two interpolated variables inside "class" (selected.tab and $index), and ng-class is never evaluated.
So the tab-pane doesn't get the active class, that gives to it display:block over the default "display:none".
I suggest you to remove the tab{{selected.tab}} in order to solve the problem.
I'll send a pull request to do it.
After doing that everything will work fine (I have already tested it locally).
The text was updated successfully, but these errors were encountered:
patriziotufarolo
changed the title
Conflict with ng-animate, caused by a known bug in angular
Conflict between tabarray and ng-animate, caused by a known bug in angular
Nov 21, 2016
patriziotufarolo
added a commit
to patriziotufarolo/angular-schema-form-bootstrap
that referenced
this issue
Nov 21, 2016
@patriziotufarolo
Hi Patrizio I made a comment in the PR, happy to accept, I've already been changing this whenever I find them in the decorator. Once I have alpha 3 ready I will try to push the version of bootstrap decorator compatible as well.
Sorry for not monitoring this correctly, I have added the angular-schema-form-bootstrap-lead group now.
Bug
Hi everybody
I am using angular-schema-form with angular-schema-form-bootstrap, and I am managing my form through the tab array template provided in this package.
When using ng-animate in the Angular.JS project, an insidious problem occurs with the tabarray: the form fields within the tab are not displayed until the "add" button is clicked.
Expected behaviour
I expect them to be shown.
Actual behaviour
The form fields within the tab are not displayed until the "add" button is clicked.
Gist/Plunker/Demo
Link to the plunkr
Related issues
This is related to (angular/angular.js#10811)
Other info
As you can see editing the Plunker, the problem can be solved importing the bootstrap decorator inside "angular-schema-form". The one in this repo is bugged.
One can also disable ng-animate.
How to solve the problem
The problem as described in the Angular issue provided above, exists when one uses ng-animate and specifies more than one interpolated value in the "class" attribute of an element, in conjuction of ng-class.
In this particular situation ng-class is never evaluated.
This is the case of:
/0.2.0/src/tabarray.html
where we have
Here there are two interpolated variables inside "class" (
selected.tab
and$index
), andng-class
is never evaluated.So the tab-pane doesn't get the active class, that gives to it
display:block
over the default "display:none".I suggest you to remove the
tab{{selected.tab}}
in order to solve the problem.I'll send a pull request to do it.
After doing that everything will work fine (I have already tested it locally).
Best regards,
Patrizio Tufarolo
@json-schema-form/angular-schema-form-bootstrap-lead
The text was updated successfully, but these errors were encountered: