Troubleshooting Mobile expandable/collapsable text box.

Ask the community
, ,
1

Hi there,

The expandable/collapsable text box on my mobile site has an extremely large blank space between the text and the button. Interestingly, this blank space does not show up when I preview the mobile site through wix editor, only when I go to the site on an actual mobile phone-- not sure how to troubleshoot this. Anyone have tips? I added two videos – first one is of the mobile site from my iphone, second one is the mobile site preview on wix editor.

The code that I used that works great on desktop is:

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 = 397;
// read the full text and store it in the fullText variable
fullText = $w(“#text19”).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(“#text19”).text = shortText;

});

export function button7_click(event) {// check the contents of the text element
if ($w(“#text19”).text === shortText) {
// if currently displaying short text, display the full text
$w(“#text19”).text = fullText;
$w(“#button7”).label = “Show less”;
} else {
// if currently displaying full text, display the short text
$w(“#text19”).text = shortText;
$w(“#button7”).label = “Show more”;
}
}

2

I’ve just tested it on a Android phone just to see if it was just an Apple issue, however it is the same on both devices and getting the massive gap, so it isn’t just down to a specific make or model etc.

However on your full text showing the button itself doesn’t seem to be as close as it should be, as if you look on the tutorial the button should be touching the bottom of the text element when it contains the full text.

You can see a fully working example in the tutorial too.
https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link

So, please see if you have any additional space at the end of your full text like blank spaces and that your button is up against the bottom of your text element and see if that makes a difference.

3

I tried moving the toggle flush against the text box, but still no luck! Even tried placing it in the left corner like in the tutorial. It’s strange because the wix editor preview doesn’t show any error in formatting, so there must be something else going on when the site is live, but not sure what…

4

Have a read of this previous forum post and see if the replies help you.
https://www.wix.com/corvid/forum/community-discussion/expandable-text-box-w-show-more-button-issue