Hi.
I followed the instructions from this page to create a “show more” link (static text) in this page https://www.consultoriopsicologico.co/copia-de-reservas-20-dcto
using the instructions from https://support.wix.com/en/article/wix-code-tutorial-creating-a-show-more-link (see below the code I’m using in my page)
It looks ok in the deskptop version but in the mobile version, it only looks ok in the preview (see video attached #1) (part of the text shows up and hide).
The problem is that when I see the page using a smartphone, it shows a blank space (with size around 8 lines of text) between the button and the text.
I’m wondering what the problem could be and if there’s a solution for this. I tested it several times, adjusted the frames, the size of the page and moved the button inside and right outside the frame. but the with no change.
I’ll appreciate any help.
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
let fullText; // variable to hold the full text
let shortText; // variable to hold the short version of the text
$w.onReady(function () {
//TODO: write your page related code here...
// how many characters to include in the shortened version
const shortTextLength = 1040;
// read the full text and store it in the fullText variable
fullText = $w("#text14").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("#text14").text = shortText;
});
export function button2_click(event) {
//Add your code for this event here:
// check the contents of the text element
if ($w("#text14").text === shortText) {
// if currently displaying short text, display the full text
$w("#text14").text = fullText;
$w("#button2").label = "Mostrar menos";
} else {
// if currently displaying full text, display the short text
$w("#text14").text = shortText;
$w("#button2").label = "Mostrar mas";
}
}
try group the button and text together
@mikemoynihan99 i tried that but the behavior is the same. Didn’t fix the issue. It’s been more than a week. Still waiting to see of some one from the moderators or the staff will give me a suggestion.
@andrezst10
On your mobile editor, look at the text box that you are showing the short and full text in, when it is showing as short text where is the bottom of that text box at? You might need to play around with the height of that text box and try viewing it whilst at short and full text options.
Has it moved up close to the bottom of the short text and above the button? Or is it still showing the depth of this text box as when it is showing the full text? This could be causing the white gap space with the other text box below the button being lined up currently with the bottom of your text box as it is at it’s maximum depth when the full text is shown.
If it is your text box height then try aligning everything up for when you have the short text on view in your editor, so then when you preview it or view it on a mobile device and then click on the button to read more, it should then show the rest of the text whilst pushing the button and the text box below it further down the page as it increases in height to allow for the full text to be shown.
Although on this page, do you need this option as there isn’t that much more text added when you go from short to full text. I would really use this option when I have more text to hide, like maybe another paragraph or a couple of paragraphs and not just a few extra lines.
I hope this maybe solves your issue, fingers crossed.
Hi thanks your reply. I don’t think that it’s possible. Because in editor mode, I haven’t seen an option to change how i visualize the text between shorter OR full text. It only shows the whole text. (am i missing an option here?). Thus, the size of the text box can’t be reduced beyond where the text ends.
Regarding how much text i want to hide, i wish i could hide half of it but this was. The only size that worked for deskptop without having the same issue as mobile. I didn’t notice the problem on mobile after the fact.
When you are on that page in your editor, go to preview and look at the page in the mobile preview.
Then, if it is showing as the full text option, simply click on the button to display the short text version and then go back to the editor to view it as in short text mode.
I had to do this when adding music albums to my site as on the mobile editor it would only show a set number of tracks and then automatically add a ‘more tracks’ link at the bottom of the shown tracks. So, at that point I am only able to edit the page with the album track lists collapsed.
Only after viewing these album pages in the mobile preview, then clicking on the ‘more tracks’ link which would show the full extended album track lists and then going back into the editor, did it then show me the full list and I was able to edit the elements around it when the album track lists were at.
So, unfortunately for yourself it is a pain having to go to preview and change from short or long text and then having to go back to the editor, however that is how I workaround it.
Yeah i get what you are saying. But in my case, it doesn’t show the text collapsed in the editor, only the whole text. So it seemes like that’s the issue. . And it makes sense that it should show it collapsed in the editor, to resize the box at its minimum. In the video that I linked in my. Original post you can see how i see it in preview mode( i have used preview, click show more, going back to editor many many times).
Perhaps the object (the text box.) is corrupted? I had a similar problem with a text box. It didn’t have the show more function / code, but no matter how i tried to resize it showed extra space in the published page. The solution was to delete the box and paste the text in a new one. I’ll try to do that tomorrow. Thanks for the info.
Well it seems that Wix might have a little bug in their system then as I had similar when trying to move my footer up above a collapsed element to get rid of white space, plus you’ve had similar with having to cut and paste with your own text box.
See my post here and the reply I got from Marina Della Paolera pointed me to this post here which gave me the answer of deleting the collapsed strip and moving the footer to suit and to then paste the collapse strip back in.
So maybe the next time we get an issue like this, we first just try cutting the offending element and then pasting back into the page again to see if it fixes the issue, before we go looking for answers in this Wix Code Forum or through Wix Support.
Anyways, I hope you can get your issue sorted and you can edit your text box so that it doesn’t show the white space when in short text mode.
@andrezst10 Did you solve this?