1. rayjbarrett
  2. General
  3. Saturday, March 16 2019, 04:18 PM
Is it possible to use an editor with the text area field (bold, bullet points...) and to have the field have a drop down option (show more). In the example, you will see that I would like to use bullet points and bold and a drop down/show more option for the very long text in the Privacy Policy field. https://www.awesomescreenshot.com/image/3920947/a31293877676f6bc9f58ed42da3e5d8b
admin Accepted Answer
Admin
Hi,
Is it possible to use an editor with the text area field (bold, bullet points...)
Yes, this is possible, you can enable it from Components->Easy Profile->Choose your textarea field->Go to tab "Options Textarea Field"->Set Type parameter (see screenshot)

and to have the field have a drop down option (show more).
This is not possible natively, to do this you need to add some javascript code to your template. If you can give me the site URL of your site (profile page in the screenshot) then we can help you with this code.
Attachments (1)
  1. more than a month ago
  2. General
  3. # 1
rayjbarrett Accepted Answer
Content Protected
  1. more than a month ago
  2. General
  3. # 2
admin Accepted Answer
Admin
I have changed to the text area to the editor but editor options are not displaying on the edit profile page: https://www.awesomescreenshot.com/image/3922928/978db7d99c75182697444beee05f3c41
I have just tried in your staging site and works, see screenshot.

Joomla load the default editor for guests (you can set the public features from Extensions->Plugins->Tiny MCE), but if a user have a preferred editor then it load the user editor

You can add following CSS code
.privacy_policiesValue {height:100px;overflow:hidden;position:relative;}
.privacy_policiesValue:before{
content:"";
width:100%;
height:100%;
position:absolute;
left:0px;
top:0px;
background:linear-gradient(transparent, white);
}
.privacy_policiesValue .readmoretext{
content:"Read More" !important;
position:absolute;
right:5px;
bottom:5px;
text-align:right;
cursor:zoom-in;
}
.privacy_policiesValue.more{height:auto;}
.privacy_policiesValue.more:after,.privacy_policiesValue.more:before,.privacy_policiesValue.more .readmoretext{display:none !important;}


and following Javascript code
jQuery(document).ready(function(){
jQuery('.privacy_policiesValue').append('<span class="readmoretext">Read More</span>');
jQuery('.readmoretext').click(function(){jQuery('.privacy_policiesValue').addClass('more');});
});
Attachments (1)
  1. more than a month ago
  2. General
  3. # 3
rayjbarrett Accepted Answer
Content Protected
  1. more than a month ago
  2. General
  3. # 4
admin Accepted Answer
Admin
The Tiny MCE is set as default editor? try to check this from System->Global Configuration->Default Editor
  1. more than a month ago
  2. General
  3. # 5
rayjbarrett Accepted Answer
That worked.
Can you tell me where to put the Javascript code?
Thank you
  1. more than a month ago
  2. General
  3. # 6
admin Accepted Answer
Admin
Hi,
normally custom code like javascript should be managed by template, if there is no any option then try to contact template support or append the code in some existing javascript file located in /templates/theme-folder/js/
  1. more than a month ago
  2. General
  3. # 7
rayjbarrett Accepted Answer
So would I put both the CSS and Javascript code in my template's custom CSS within the backend of Joomla or
add only the CSS code to the custom CSS in the Joomla backend and the Javascript to the end of my template's file in FTP?
  1. more than a month ago
  2. General
  3. # 8
admin Accepted Answer
Admin
Hi,
So would I put both the CSS and Javascript code in my template's custom CSS within the backend of Joomla or
add only the CSS code to the custom CSS in the Joomla backend and the Javascript to the end of my template's file in FTP?
CSS and JS are different, so the best way is to add CSS code to the custom CSS in the Joomla backend and the Javascript to the end of your template's file.
  1. more than a month ago
  2. General
  3. # 9
rayjbarrett Accepted Answer
Thank you.
That works well. I think I will increase the hight to 150 and place the "Read More" button on the left.
  1. more than a month ago
  2. General
  3. # 10
rayjbarrett Accepted Answer
Would you please take a look at this file? I updated my theme and had to recreate the code. But the "read more" buttons are not working. Thank you.
  1. more than a month ago
  2. General
  3. # 11
rayjbarrett Accepted Answer
I am not sure that the attachment was in the last message.
  1. more than a month ago
  2. General
  3. # 12
admin Accepted Answer
Admin
Hi,
unfortunately missing the attachment, this forum allow you to upload images and archive files (ZIP). Anyway this is CSS and Javascript (so client side), so the best way to allow us to check this is to see your site.

I have just tried in your staging site and the "Read More" button seem to work. Have you updated the template of your staging site or this it is another site?
  1. more than a month ago
  2. General
  3. # 13
rayjbarrett Accepted Answer
The read more button no longer shows. I added the custom code in the theme and in the rokmediaqueries file. Any suggestions?
Thank you
  1. more than a month ago
  2. General
  3. # 14
admin Accepted Answer
Admin
Hi,
can you please post me a page link to check if there is some javascript conflict? to keep it private you can use the form below the reply in "Site Details" tab (we need only "Site Url" )
  1. more than a month ago
  2. General
  3. # 15
rayjbarrett Accepted Answer
In the details I have put our stagging site where I have the code.
  1. more than a month ago
  2. General
  3. # 16
admin Accepted Answer
Admin
Hi, unfortunately I does not find the Javascript part in your page. This maybe due to JCH Optimize Javascript compression.

Anyway try to check that the class in the javascript code is updated like CSS (you have changed the field alias from "privacy_policies" to "privacy_policy" ). Also clean the JCH Optimize cache
  1. more than a month ago
  2. General
  3. # 17
rayjbarrett Accepted Answer
Wow I am quite confused. If I completely disable JCH Optimize Pro the "privacy_policy" is no longer shortened. With it enabled the field is shortened but the "read more" button does not show.
Yes, the alias is "privacy_policy" not "privacy_policies"
I cleared cache for Joomla as a whole.
I do not know where to disable Javascript compression only on JCH Optimize. I did try excluding the provider listing pages on JCH Optimize but it did not help.
  1. more than a month ago
  2. General
  3. # 18
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.