I am trying to bind an ion-input from an array, but when I want to change the value on the screen, the input disappear. I mean, if I put the pointer into the text-area, the pointer is gone and I have to put again.
But, if I remove the [(ngModel)] the pointer is never gone.
Here I let the code of the ion-input.
<ion-col *ngFor="let x of totalExercices[ex].maquina.repeticions; let ma = index;">
<ion-input type="number"
[(ngModel)]="totalExercices[ex].maquina.repeticions[ma]"
style="background-color:#f4f4f4;">
</ion-input>
</ion-col>
On the following images, if we fix on the element 20. If I want to delete the number, when the 0 is gone, the pointer is gone too.
trying to delete the number
And looks like this:
Deleted the 0, but I have to put again the pointer there.
As I said, I guess that the problem is the ngModel.
Pherhaps there are some other ways to change the value of that input withous the ngModel?
Thank you so much!
Well, After searching the issue, I've finded the solution. If we bind a NgModel using an array, it load every time, so the list is reloaded every time we do some change.
The solution is the track by See the solution on the following link:
https://forum.ionicframework.com/t/2-way-data-binding-to-an-array-element-in-an-ngfor-ionic-2-rc1/67977/2
Related
How could I show a Badge on Fab button? I tried it like this, but it displays it behind my content, as i can see it in DOM.
<Badge badgeContent={addedItems} color="secondary">
<Fab
variant="extended"
color="primary"
aria-label="add"
onClick={handleAdd}
>
<Icon>shopping_cart</Icon>
</Fab>
</Badge>
Your code is ok, addedItems value is probably 0, which causes the badge to be invisible.
You can refer to the below CodeSandbox example with your code, I hard coded badgeContent to be greater than 0 and it works.
If addedItems value is the issue and that is not your desired behavior, you can provide showZero={true} prop to Badge:
<Badge showZero={true} badgeContent={addedItems} color="secondary">
I'm trying to build a canvas app with color picker using jscolor.
Here are what I've done:
Included the file jscolor.js
Created a button with class="jscolor"
Code for the button:
<button id="strokeCol" class="jscolor {valueElement:'color_value'}" onchange="config.changeStrokeCol(this.jscolor)">
Stroke Color
</button>
When I select a color from the picker I can see the background color of the button changing in developer tool, but in RGB value. Read it somewhere else that I can simply get the HEX by specifying $('element').val(), but in my case it just gives me "" (blank).
The HTML also has no value attribute triggered by the click, not to say being updated. The examples only shows that I can specify a default value (which can't be updated as well).
Have I missed anything? Or has jscolor been updated to provide only RGB value through the background color?
The only workaround I can think of is allowing the HEX code to be displayed inside the button then use .html() to get the value, but it seems so unnecessary.
Problem solved when class is inserted to the
<input> tag. Strange!
I am writing an opensocial gadget. My structure is something like this:
<div style="height:200px;overflow:auto;">
<div id="dComment">Comments are loaded here.</div>
</div>
I update the content of the "dComment" every second, and its content gets some scrolling.
In my gadget I have specified <Require feature="dynamic-height"/>
When I use gadgets.windows.adjustHeight() it calculates the height of the content regardless that I have made some part of it hidden through adjusting a height for my outer div. As a result I see a huge white space below my content !!!
I know that I can specify height for adjustHeight function. But then it means that on every update I have to calculate the height of the gadget myself, and I don't want to do it (if possible).
Can someone explain to me why it happens and how can I solve it ?
Instead of visibility:hidden use display:none
I've got a problem with the css nth-child selector.
I have a grid of 3x3 elemtens inside a container. Those elements have a class called .square.
With .square:nth-child(3n+1) I select every first element of the row and color it green.
With .square:nth-child(3n+3) I select every last element of the row and color it red.
This works fine, until there is any element(<br> for example) that is outputted before the grid. With every new <br>, the order moves up by one, as is the <br> was considered a .square.
As I understand the .nth-child, it should select every third element of the .square class. Why does it apply that to any element, and how can I achieve my inital goal?
Thanks in advance
http://www.hier-krieg-ich-alles.de/shop.php?cat=26491127728
The problem occurs on the boxes in the middle.
Sounds like you want nth-of-type.
Related selectors which you may find useful are :first-of-type, :last-of-type, :nth-last-of-type and :only-of-type.
nth-child working only with html element, nth-child css don't know class and id, if you want set nth-child for class, add some custom attribute for that class using jquery..
like
jQuery('.square:nth-child(3n+3)').attr("act","dummy");
then use css
div[act='dummy']{
border : 1px solid red;}
I have the three following lines and the first two line gets all the images on the document and hides all, but then when I add the third line shows all the images.
What I need its to hide only the images with the attribute alt=minimize and alt=maximize but for some reason hides all the images.
$('img').attr('alt', 'minimize').css("display","none");
$('img').attr('alt', 'maximize').css("display","none");
$('img').attr('alt', 'logo').css("display","inline");
I am using IE7, but it should be compatible with IE6 and IE8.
Any help would be very much appreciated.
Thanks.
I'm thinking you are not using the attr function correctly, might you be looking for the attribute equals selector?:
$('img[alt=minimize]').css("display","none");
What you did with your code was,
Select all images
Change their alt attribute to 'minimize'
Hide them
Select all images
Change their alt attribute to 'maximize'
Hide them
Select all images
Change their alt attribute to 'logo'
Hide them
what you do: you take every img in document and set alt to logo and then set display: inline;.
Note, that attr('alt',string) doesn't filter all images to those with alt=string, but rather sets alt attribute to string on all images.
What you want to use is this:
$('img[alt="minimize"]').css...
$('img[alt="maximize"]').css...
$('img[alt="logo"]').css...
In the call $('img').attr('alt', 'logo').css("display","inline"); the "attr" doesen't filter the set of dom elements You catch with $("img").
If you want to hide everithing but not the image with the attribute 'alt' = 'logo' I think You can:
give it an Id of logo and then calling: $("img").not("#logo").hide()
from the jquery website:
hide():
The matched elements will be hidden
immediately, with no animation. This
is roughly equivalent to calling
.css('display', 'none'), except that
the value of the display property is
saved in jQuery's data cache so that
display can later be restored to its
initial value. If an element has a
display value of inline, then is
hidden and shown, it will once again
be displayed inline.
and
attr( attributeName )
Returns: String
Description: Get the value of an
attribute for the first element in the
set of matched elements.
If instead you want to hide all the maximize and minimize images (both share the "imize" part of the attribute):
$(parentElement).find("img[#attr $= '*imize']").hide()
OP is referring to
http://dev.w3.org/csswg/css3-values/#attr
alt I think is simply a string type, not "logo" whatever that is, that is not a data type.
try that. in fact, you can look up alt in the html5 img
http://www.w3.org/TR/html5/the-img-element.html#the-img-element
http://www.w3.org/TR/html5/the-img-element.html#attr-img-alt
http://www.w3.org/TR/html5/the-img-element.html#alt
(in order of reference clicking, last one is the target)
even if this isn't the exact answer (it should be), it should be a step in the right direction.
I am actually trying myself to figure out how to reference a css property within css with attr() - it's mentioned within the top URL. if I had my druthers, I could be using css calc() along with it, but that's draft. maybe I can get it to work...