I am working with Ionic 4 and trying to get Virtual Scroll to work properly with no success, for long actually.
I find the Docs very unexhaustive and with poor grammar sometimes. As at the ItemHeight part which says:
An optional function that maps each item within their height. When this function is provides, heavy optimizations and fast path can be taked by ion-virtual-scroll leading to massive performance improvements. This function allows to skip all DOM reads, which can be Doing so leads to massive performance
Now, I have no degree from Oxford, but this paragraph is plenty of mistakes, there is no clear explanation and it is confusing.
So now.
Would this ItemHeight be helpful somehow for performance or it can bring to performance issues?
Do I have any chance to get this code to work, cause till now I couldn't
((item: any, index: number) => number)
second number here looks like a typo, isn't it?
I think I found the solution.
The bug was caused by ion tags inside ion-virtual-scroll
So instead of having
<ion-virtual-scroll [items]="list">
<ion-card *virtualItem="let item" (click)="goTo(item)">
...
</ion-card>
</ion-virtual-scroll>
I changed my code to
<ion-virtual-scroll [items]="list">
<div *virtualItem="let item" (click)="goTo(item)">
...
</div>
</ion-virtual-scroll>
which seems to work fine, even with items with different heights and with no
approxItemHeight
attribute definition
Related
The attached screen below works just fine but underneath the covers I have a slight problem ^^
Smartform with both simple and smart fields
Behind the view there's a smartform (no annotations used). Field "Agreement Action Type" and the last two pairs of fields are not smartfields (found no "smartcombo" or something similar to use) they are just pairs of labels and comboboxes and here comes the issue. While the smart fields were all perfectly aligned, comboboxes (aka simple fields I suppose) were not aligned along. In order to solve this for the moment, I used a couple of SAPUI5 formatting classes and...width declaration in pixels in the combo definition within the view. Results works fine, even in different size monitors but, even though I'm currently in the process of learning and understanding the technology, I already know that the latter is a crime against SAPUI5. Is there a way to align smart and simple fields in the same view (or an equivalent dropdown control for smartforms alternatively) or I will have eventually to get rid of my smartform (losing small bonuses like the togglable attribute) and use a simple form instead?
Thanks for taking time to read it.
Regards,
Greg
The GroupElement aggregation manages the SmartLabel for you so try to remove the label inside the GroupElement aggregation like this:
<smartForm:GroupElement label="Label">
<Input type="Text" value="someValue"/>
</smartForm:GroupElement>
On the contrary, if you want to change the appearence of your SmartField, you can use ControlType to configure the internal control.
Hi I have several js/mootools code in a coffee file that I want to combine together as in
$$("#head").setStyle('border-right-color','#e64626');
$$("#head").setStyle('background','#e64626');
$$("#console").setStyle('border-right-color','#e64626');
$$("#console").setStyle('background','#e64626');
Is it possible to combine this into one line?
Although what #sergio gave you is the correct answer and what you wanted, it's probably the wrong thing to do (though his answer is not at fault, its the question that is off).
Setting element inline styles in JavaScript for effects is just not a very good practice. It has its uses in animation/fx but this does not seem to be the case. The reason is that it breaks cascading due to the high specificity and makes it much more difficult to revert, control or change afterwards. It also makes it harder to skin and restyle your app as there's a clear lack of separation of concerns, style in code is rigid.
You need to solve this via CSS
scenario 1: static, non mutable - not very good due to use of ID rather than classes but:
#head, #console {
border-right-color: #e6426;
background-color: #e6426;
}
scenario 2: dynamic, need to differentiate elements on some event such as click, focus, mouseover - though you can solve most of these with pseudos like :focus or :hover, then abstract this into a class:
css:
.highlight-red {
border-right-color: #e6426;
background-color: #e6426;
}
javascript:
var els = $$('#head,#console');
// on whatever event...
els.addClass('highlight-red');
// ... later
els.removeClass('highlight-red');
you will thank yourself later or your successor will or your client, whatever. this has the added benefit that next time you need to change styling or add more rules to differentiate, you have one place to go to. you can even add transitions / animation effects for evergreen browsers.
You can use setStyles() and pass it a object. You can also use , in the string you pass to $$ to select multiple elements. So it would result into:
$$("#head, #console").setStyles({
'border-right-color': '#e64626',
'background': '#e64626'
});
jsFiddle: http://jsfiddle.net/sevvtsx0/
I'm doing a kind of select2 but with much less functionality and we want the form that is above to know about this Control (so we can use $dirty and $invalid).
But I've noted that if you wrap the select that is in the directive's HTML with a div, the $dirty and $invalid of that control stop working. Any idea why ?
Try it out on this http://plnkr.co/edit/UV425G2SMcqRYeX2N4qw?p=preview, go to the select.html file and turn
<select class='form-control' ng-model='selectedval' ng-attr-name='{{name}}' ng-options='item as item.name for item in options' required><option value=''>-- select --</option></select>
into
<div>
<select class='form-control' ng-model='selectedval' ng-attr-name='{{name}}' ng-options='item as item.name for item in options' required><option value=''>-- select --</option></select>
</div>
Ok I asked this as well in https://github.com/angular/angular.js/issues/6862 and got this answer by #caitp:
So your test case is actually running an old version of angular, which
A) does not support the ng-attr-* directives, and B) has a broken
isolate scope implementation.
This is still broken, but in different ways, using angular 1.2.15. You
have a priority issue with the ng-attr-name directive, regardless of
where the control is, and so it gets added to the form
control with the name you aren't expecting.
The reason this "works" with 1.0.8 and without wrapping it in a div,
is because with replace: true in your directive, we merge the
attributes from the directive's compile node (which does contain
name="...") into the root node of the template, so you're sort of
accidentally taking advantage of a poorly documented behaviour of the
compiler, in that case.
Unfortunately, there isn't really a good way to have dynamic form
control names yet (and this is really the root of the problem you're
having), there are a number of PRs adding support for this, and I've
written a hack to decorate the ngModel controller to make this work
(although it might not work anymore, depending on if the new
$interpolate api landed yet or not), you can see that at
http://plnkr.co/edit/hSMzWC?p=preview
So, Matias has an alternative solution for this, it's not clear which
one is going to land --- but in any case, that's about what your issue
is.
In the future it would be good to ask about these on
http://webchat.freenode.net/?channels=angularjs or
https://groups.google.com/forum/#!forum/angular to get answers to
these kinds of support questions (this is not a bug, per se, although
the "issue" you're seeing might be documented better, so PRs welcome
for clarifying that in the compiler docs).
I have a problem with my firefox extension
I have a XUL popup panel with a hbox for the tag cloud, and a JS code to add divs to this hbox:
<hbox id="tag_base" ondblclick="alert('done')"/>
JS:
var root = document.getElementById('tag_base');
var tag = document.createElement('div');
tag.textContent = 'test';
root.appendChild(tag);
var rect = tag.getBoundingClientRect()
alert(rect.top)
I need to get the dimensions of each added div, however, getBoundingClientRect simply refuses to work.
If I remove alerts, it's always zero.
With alerts the story is different:
The first time the alert is called it returns zero, although the div appears on the screen.
Any subsequent alerts return the correct coordinates.
If I set a breakpoint in Chromebug, everything is reported correctly.
If I do not interupt the execution in any way, and run a loop, only zeroes got returned.
This has got me quite confused.
Calling "boxObject" produces the same results, while "getClientRects[0]" is undefined on the first call.
Any hints on what might be causing this will be greatly appreciated.
Note :
Caution, if you use getBoundingClientRect with an element which has display:none then it will return 0, anywhere in the dom.
Although I can't find any documentation on this seemingly fundamental issue, the problem you noticed is most likely because the layout (aka "reflow") process has not yet run by the moment you ask for the coordinates.
The layout/reflow process takes the page's DOM with any styles the page has and determines the positions and dimensions of the elements and other portions of the page (you could try to read Notes on HTML reflow, although it's not targeted at web developers and probably is a bit outdated).
This reflow process doesn't run synchronously after any change to the DOM, otherwise code like
elt.style.top = "5px";
elt.style.left = "15px";
would update the layout twice, which is inefficient.
On the other hand, asking for elements position/dimension (at least via .offsetTop) is supposed to force layout to return the correct information. This doesn't happen in your case for some reason and I'm not sure why.
Please create a simple testcase demonstrating the problem and file a bug in bugzilla.mozilla.org (CC me - ***********#gmail.com).
My guess is that this is related to XUL layout, which is less robust than HTML; you could try creating the cloud in an HTML doc in an iframe or at least in a <description> using createElementNS to create real HTML elements instead of xul:div you're creating with your current code.
Be sure the DOM is ready. In my case, even when using the getBoundingClientRect function on click events. The binding of the events needed to happen when the DOM is ready.
related to this question Zend_Form - Array based elements?
$form = new Zend_Form();
$subForm = new Zend_Form_SubForm();
$subForm->addElement('Text', '1')
->addElement('Text', '2');
$form->addSubForm($subForm, 'element');
$var = '1'; $var2 = '2';
echo $form->getSubForm('element')->$var;
echo $form->getSubForm('element')->$var2;
If I use this way output will wrongly be (or at least not quite expected)
<input type="text" value="" id="1" name="1">
If I use echo $form output will correctly be
<input type="text" value="" id="element-1" name="element[1]">
but I loose flexibility then
I am not saying it's a bug or something just not sure what proper syntax will be.
Thanks
So the answer is rather late, but I recently ran across this issue and though I'd share the reason and possible solutions.
From my research, there are at least 7 bugs in Zend's ticketing system dealing with this problem - though the descriptions vary dramatically.
(SO has prevented me from pasting all of the links, so I'll link one and give you the ticket IDs for the others: ZF-9386, ZF-3567, ZF-9451, ZF-7836, ZF-9409, ZF-7679)
http://framework.zend.com/issues/browse/ZF-10007
The one that best describes the issue, and possible fixes, is 10007 - however, ZF themselves have inexplicably chose not to fix it until 2.0.
The problem stems from the fact that when explicitly using:
$this->form->a->b->c->d notation, d will forget every one of it's ancestor subforms, except for it's immediate "c". When you have a big form with custom behavior, this is quite burdensome because you may want to render the whole subform "d" without calling out it's specific descendents, but you may want it in a certain spot or the Zend Decoraters may not be able to pull it without a bunch of work or at all.
I should think this would be a common problem in the subform world, since by definition you're working with complex forms and excepting the most generic of forms hardly any of it would be linear or clearly separated by dt/dd or other clean markup.
There are three ways I found to deal with this issue.
The first is the fine patch contributed in 10007 - this won't work for me because it only works with printing a subform directly and not individual elements - which is about 50% of my use case. Not knowing ZF well enough, I did not pursue extending this functionality to elements as well.
The second is to forgo all custom html around the elements and add enough decorators to satisfy the layout. Although mine are structured well with TRs/TDs, etc., I just couldn't justify the time nor the decision to 100% ZFify our most complex forms - because someday it could be that ZF would not be the best choice.
The third is a much more cut and dry tradeoff, which is what I chose: I would forgo the convience of being able to echo the $this->form->a->b->c->d subform, and instead individually echo all of my elements in their apppropriate spots (like echo $this->form->a->b->c->d->element1 and echo $this->form->a->b->c->d->element2). This keeps my HTML out of the decorators which has its tradeoffs, but keeps my forms in ZF, which is all I want. With this solution, you can now call setElementsBelongsTo() on the d subform and use array notation to get the submission to behave properly, like so:
$objSubFormD->setElementsBelongTo('[a][b][c]').
Please be mindful that I've dumbed down these examples almost beyond practicality so the (dis)advantages may not be immediately clear for each one, I've only given what I perceive to be options and what I chose as a solution. I also feel my solution gives me the best upgrade path to ZF 2.0.