Font awesom icons - stuck. (Stacking)

General
21

You may find this page helpful:

There are other examples in the Node-RED Cookbook.

You have to extract the msg property to a scope variable which means that Angular can react to it.

1 Like
22

try

        <span class="fa-stack">
          <i class="fa fa-signing fa-2x fa-flip-horizontal fa-stack-1x" style="color:yellow;"></i>
          <i ng-if="msg.showBan" class="fa fa-ban fa-2x fa-stack-2x" style="color:red;"></i>
        </span>

or

        <span class="fa-stack">
          <i class="fa fa-signing fa-2x fa-flip-horizontal fa-stack-1x" style="color:yellow;"></i>
          <i ng-show="msg.showBan" class="fa fa-ban fa-2x fa-stack-2x" style="color:red;"></i>
        </span>
1 Like
23

Thanks.

That is some serious reading.

24

Thanks too Steve.

Um, but what do I send into the template node to change the icon?

msg.showBan true or false?

(Sorry)

I'm not seeing a difference between the two blocks of code.

25

Easy to find out, but working through it logically.

both versions use msg.showBan

breaking that down, to show and ban is a clue but the real nuts and bolts are

ng-show="msg.showBan" which means "show this element when msg.showBan is truthy (e.g. not zero, not false, not '', true, 1, 44, "hello ted")

26

ng-if

ng-show

27

Ah! Sorry.

Looking good. My test worked, now applying to the real machine.

:slight_smile:

28

:rofl:

Yes, AngularJS is a serious framework. One of the reasons I've never personally rated it for much of what happens when using Node-RED.

That page was my attempt at summarising some of the key things you might need to do when going beyond the simple stuff where D1 hides Angular from you.

This is also one of the reasons that UIBUILDER was born in the first place. If you are going to have to learn complex stuff, you might as well learn something that is as close to vanilla HTML/CSS as possible so that it has the widest possible use for you.

All of the frameworks suffer from the same issue. Namely that you reach a cliff edge as the complexity of your app increases and eventually you end up fighting the framework instead of it supporting you. This isn't so bad if everything you do is in the framework and if you have a team. It is pretty bad if you are a solo and only have to dip into the framework occasionally.

29

Used:

<span class="fa-stack">
          <i class="fa fa-signing fa-2x fa-flip-horizontal fa-stack-1x" style="color:yellow;"></i>
          <i ng-show="msg.showBan" class="fa fa-ban fa-2x fa-stack-2x" style="color:red;"></i>
        </span>

Working!

Thanks @Steve-Mcl
And thanks to @TotallyInformation for the link to read.

30

(Sorry)

So looking at the two ways you posted.....

<i ng-if="msg.showBan"......
and
<i ng-show="msg.showBan".....

The line above stacks the signing.
That is somehow always shown.

Then the msg.showBan is looked at (true/false) and if true the second line is stacked onto it.
I get that.

I'm not quite understanding the workings of the second way.
Alas that's the one I copied and used. It works.
I'll (try) to understand how it work rather than trying the other way.
(Not saying this is the better option, but SOD's law....)

Ok, the first way you posted with the if
I kind of get that.
ng-if msg.showBan is true the rest of the line happens.

So the second way.....

ng-show.
So that shows the rest of the line if msg.showBan is true.

Yeah?

31

No, it "shows" the element. The WHOLE THING from <i through to the end part />

emphasis on element


Some advise if you dont mind - try to learn the parts of an element it will help future you and will make your questions clearer.

image

2 Likes
32

To further clarify:

ng-if means add/remove the full element from the DOM (e.g. looking at the HTML source - the element will not even be present if ng-if is falsey

ng-show means show/hide full element from the user (e.g. looking at the HTML source - the element WILL be there but it will be hidden from user view (probably sets display style to hidden or similar))

1 Like
33

Ok, thanks.

Thanks for the clarity of terms.

I believe I was kind of right - what I was meaning to say - and what you just said.
I just didn't get the terms right.

That is what I meant.

The line starts with an <i and ends with a </i>

But I guess I need to use the right terms.
The start of knowledge is calling things by their correct name. :wink:

Ok, I think I can understand that.

if puts the code in the DOM but show puts it in, but it may/not be shown.

I'll need to think about it more.

But again: Thanks.
And sorry for the slow reply.
Dinner was begging.

34

I like that infographic Steve, where was it from? I'd like to "borrow" it for the UIBUILDER documentation. :grinning:

35

That's correct. You can map this directly to CSS attributes visibility and display. The main thing is that an invisible element still impacts the DOM layout (e.g. may take up space) whereas display:none does not. This has potential knock-on performance and usability impacts due to DOM reflow, the whole thing is described in more detail here:

1 Like
36

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.