+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Password field (/showthread.php?tid=4295)
Password field - benjii - 13.10.2022
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
RE: Password field - admin - 13.10.2022
See this: https://forum.logicmachine.net/showthread.php?tid=2339
RE: Password field - benjii - 13.10.2022
(13.10.2022, 13:02)admin Wrote: 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 ?
RE: Password field - admin - 13.10.2022
This is CSS not JS.
RE: Password field - benjii - 13.10.2022
(13.10.2022, 14:13)admin Wrote: This is CSS not JS.
Thought so.
How can I use it then ?
RE: Password field - admin - 13.10.2022
Vis. graphics > Edit Custom CSS
RE: Password field - benjii - 13.10.2022
(13.10.2022, 14:17)admin Wrote: 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 ?
RE: Password field - Daniel - 13.10.2022
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: "*****" ;
}RE: Password field - benjii - 13.10.2022
(13.10.2022, 15:10)Daniel Wrote: Try this CSS
keep the JS as before.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: "*****" ;
}
Hey thanks!
almost worked look
however it is still showing the text
RE: Password field - Daniel - 13.10.2022
do you have two elements on top of each other?
RE: Password field - admin - 14.10.2022
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: "*****";
}RE: Password field - benjii - 14.10.2022
(14.10.2022, 06:07)admin Wrote: 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