Hide/unhide value in a list
krileon
2 years 6 months ago - 2 years 6 months ago #326681
by krileon
Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.
Replied by krileon on topic Hide/unhide value in a list
There's a clever way to do this using some CSS overwise you'll need custom JS to have a blur toggle. The below is an example.
Custom HTML Field:Custom CSS (use CBs built in CSS overrides to add this to CB):
Now all you need to do is click the blurred element to reveal it. If the element isn't focused it'll be blurred. Below is how this would look using username as the substituted value. Be sure to replace PASSWORD_FIELD_HERE with whatever your field name is.
Blurred:
Revealed:
The simple CSS trick only works with elements that can be focused, which is why we've set tabindex of 0 to allow it to be focusable. Using an input or textarea element also works. I've also added the "cbClicksInside" CSS class so the userlist will allow clicking without trying to navigate to the users profile.
Custom HTML Field:
<div class="cbClicksInside cbFieldBlur" tabindex="0">
[PASSWORD_FIELD_HERE]
</div>.cb_template .cbFieldBlur {
cursor: pointer;
filter: blur(4px);
}
.cb_template .cbFieldBlur:focus {
filter: none;
}Now all you need to do is click the blurred element to reveal it. If the element isn't focused it'll be blurred. Below is how this would look using username as the substituted value. Be sure to replace PASSWORD_FIELD_HERE with whatever your field name is.
Blurred:
Revealed:
The simple CSS trick only works with elements that can be focused, which is why we've set tabindex of 0 to allow it to be focusable. Using an input or textarea element also works. I've also added the "cbClicksInside" CSS class so the userlist will allow clicking without trying to navigate to the users profile.
Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.
Attachments:
Please Log in to join the conversation.
Moderators: beat, nant, krileon
Time to create page: 0.244 seconds
