The description and instructions sections of the event page are folded by default, with a read more button. Clicking on a read more button opens the respective section. However, when the page is resized (which can happen on mobile as the page scrolls, because the address bar appears/disappears), the section folds away (though the button still shows "read less"). This means it can be very tricky to scroll through a long unfolded section, as it often folds itself up again as I scroll through it.
At the moment, the element is folded by setting a height of 250 px. When it is unfolded, the height is set to the exact height of the element in pixels. As soon as the page is resized, the height is set back to 250 px.
A better way of implementing this would be to entirely dispose of the height attribute, and instead enable/disable the max-height when the "read more"/"read less" button is pressed. The only code that would need to be run on page resize would be to calculate whether to show the "read more"/"read less" button: at narrower screen widths the rendered height of the content will often increase, and it is pointless to offer the button when the description in question is less than 250 px tall.
zugspitze
commented
2 years ago
The description and instructions sections of the event page are folded by default, with a read more button. Clicking on a read more button opens the respective section. However, when the page is resized (which can happen on mobile as the page scrolls, because the address bar appears/disappears), the section folds away (though the button still shows "read less"). This means it can be very tricky to scroll through a long unfolded section, as it often folds itself up again as I scroll through it.
At the moment, the element is folded by setting a height of 250 px. When it is unfolded, the height is set to the exact height of the element in pixels. As soon as the page is resized, the height is set back to 250 px.
A better way of implementing this would be to entirely dispose of the height attribute, and instead enable/disable the max-height when the "read more"/"read less" button is pressed. The only code that would need to be run on page resize would be to calculate whether to show the "read more"/"read less" button: at narrower screen widths the rendered height of the content will often increase, and it is pointless to offer the button when the description in question is less than 250 px tall.