Password field

[benjii]

Hey everybody,

I'm looking to display a login widget on the visualisation, containing a username box and a password box
my question is, how to put a password field in the visualisation ? Meaning not showing the password as it is being typen in, like with * or # for example

Thanks in advance

[admin]

See this: https://forum.logicmachine.net/showthread.php?tid=2339

[benjii]

See this: https://forum.logicmachine.net/showthread.php?tid=2339

Thanks a lot 

---

I tried to implement the Javascript Code at the end of the thread

Code:

.password .value {
  color: transparent;
  position: relative;
}

.password .value:after {
  color: #333;
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  content: "*****";
}

and used 'password' as an additional class to the objects but didn't work
do you know the reason why ?

[admin]

This is CSS not JS.

[benjii]

This is CSS not JS.

Thought so.
How can I use it then ?

[admin]

Vis. graphics > Edit Custom CSS

[benjii]

Vis. graphics > Edit Custom CSS

hmm it doesn't work
while typing it is working but not masking the value
maybe I'm doing something wrong
Do you have an Idea ?

[Daniel]

Try this CSS

Code:

.password.item-value {
  color: transparent ;
  position: relative ;
}

.password.item-value:after {
  color: #333;
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  width: 50px;
  content: "*****" ;
}

keep the JS as before.

[benjii]

Try this CSS

Code:

.password.item-value {
  color: transparent ;
  position: relative ;
}

.password.item-value:after {
  color: #333;
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  width: 50px;
  content: "*****" ;
}

keep the JS as before.

Hey thanks!
almost worked look 

however it is still showing the text

[Daniel]

do you have two elements on top of each other?

[admin]

Try this CSS:

Code:

.password.item-value {
  color: transparent !important;
  width: 50px;
}
.password.item-value:after {
  color: #333;
  position: absolute;
  left: 3px;
  right: 0;
  top: 8px;
  width: 50px;
  content: "*****";
}

[benjii]

Try this CSS:

Code:

.password.item-value {
  color: transparent !important;
  width: 50px;
}
.password.item-value:after {
  color: #333;
  position: absolute;
  left: 3px;
  right: 0;
  top: 8px;
  width: 50px;
  content: "*****";
}

Yes perfect! This worked! Thanks a lot