Hi there,
I need your help I installed the button show more but the button doesn’t follow the size for the text (if that makes sense), please see picture below :
Here is how it looks with the full text :
And here is the copy of the code I used, I probably made a mistake somewhere :
Thanks in advance for your help,
Justine
Do not paste the full text in the textbox. Put there 1 letter only.
In line 10, instead of:
fullText = $w(“#text11”).text;
Use this line:
fullText = “This is my full text full text full text full text”; //use your actual full text.
Thanks for your reply but I’m not sure that I understand what should I do. What do you mean I should only put 1 letter?
I tried to copy paste your line:
fullText = “This is my full text full text full text full text”; //( and here i copied my full text).
But it’s still not working.
Hi,
I’m sorry I have never done that before and I still can’t figure it our.
What do you mean by I should have a very short text as placeholder, where?
And I tried on line 11 to use your code and replace the “this is my full text full…” by my actually text but I always get a error message.
Is there anything easy I can do?
Thanks for your help.
Justine
What’s the error message? Have you put the full message inside " " ?
J.D. method works easily, in fact both ways work as shown here.
Code for original left side changed to 20 on short text.
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
$w.onReady(function () {
// how many characters to include in the shortened version
const shortTextLength = 20;
// read the full text and store it in the fullText variable
fullText = $w("#myTextElement").text;
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText = fullText.substr(0, shortTextLength) + "...";
// set the contents of the text element to be the short text
$w("#myTextElement").text = shortText;
});
export function myButton_click(event) { //making sure that you have added the onClick event in properties
// check the contents of the text element
if ($w("#myTextElement").text === shortText) {
// if currently displaying short text, display the full text
$w("#myTextElement").text = fullText;
$w("#myButton").label = "Show less";
} else {
// if currently displaying full text, display the short text
$w("#myTextElement").text = shortText;
$w("#myButton").label = "Show more";
}
}
Code for J.D. method.
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
$w.onReady(function () {
// how many characters to include in the shortened version
const shortTextLength = 20;
// read the full text and store it in the fullText variable
fullText = "This is my full text for the textbox element on my page for show more and show less option, with only one character left in the actual textbox element on my page.";
// grab the number of characters defined in shortTextLength and store them in the shortText variable
shortText = fullText.substr(0, shortTextLength) + "...";
// set the contents of the text element to be the short text
$w("#myTextElement").text = shortText;
});
export function myButton_click(event) { //making sure that you have added the onClick event in properties
// check the contents of the text element
if ($w("#myTextElement").text === shortText) {
// if currently displaying short text, display the full text
$w("#myTextElement").text = fullText;
$w("#myButton").label = "Show less";
} else {
// if currently displaying full text, display the short text
$w("#myTextElement").text = shortText;
$w("#myButton").label = "Show more";
}
}
Thanks thats good but my problem is that I have the same as you but the button show more (en voir plus) doesn’t follow the text when you clic show less (en voir moins), please see my code :
@info39235 The problem was that you forgot to close the full text string with a quatation mark : "
