Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
Ok hear me out both of you. JavaScript will be executed async after the painting so unless you are using react, svelte, angular or similar it may cause flickering. That being said I used similar trick on the past but with other purposes rather than adding a read more button in which case you need to add visibility: hidden, then to avoid flickering just add a min-height to the parent container and then give priority to this script execution
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
May I humbly present a solution that is CSS based and only uses JS for the expand, button name change and adding the expanded class.
At less than 50 lines of CSS (and it could be much less) and 20 lines of JavaScript (including the JS to handle the input change updating the CSS variable!) I think it does the job quite nicely.
One downside is it doesn't know if all the lines are shown on screen by default and so can only be used where you know that there will be lines hidden by your height limitation.
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Now responds to screen resize and automatically initiates and destroys itself depending on whether it is needed or not.
Resize the below example to mobile size and you should see it all fire into action, resize again and it will automatically remove itself. Also fixed a bug where if you set the clamp to 200 lines it would make the box 200 lines tall! Obviously you can also just edit the number of lines using the input to see it fire into action.
Oh and you could use this with a very large block of text so that is an added bonus (as there is no counting involved).
Perhaps you could take the principle and turn it into a fully fledged component that accounts for incorrect inputs, auto inserts the HTML etc etc.
By the way your example one seems to have an issue if you resize the screen and then change the line values, as you can see in the following example I managed to get it in an open state (showing "read less") while only showing 9 lines when I set it to 10. I am sure mine has issues too but yours is in production so thought I better give you a heads up!
@joelbonetr
: Thanks for the reply, but about the flickering:
It will not cause flickering, because the actual repaint is done at the end of the function. The reflow is done everytime, but that will not show up on your screen.
I made a small Vanilla JS example: codesandbox.io/s/calculate-width-j...
Not line height. Just length. You never check line height at all.
Ok hear me out both of you. JavaScript will be executed async after the painting so unless you are using react, svelte, angular or similar it may cause flickering. That being said I used similar trick on the past but with other purposes rather than adding a read more button in which case you need to add visibility: hidden, then to avoid flickering just add a min-height to the parent container and then give priority to this script execution
Ok so hear me out all of you 😋.
May I humbly present a solution that is CSS based and only uses JS for the expand, button name change and adding the expanded class.
At less than 50 lines of CSS (and it could be much less) and 20 lines of JavaScript (including the JS to handle the input change updating the CSS variable!) I think it does the job quite nicely.
One downside is it doesn't know if all the lines are shown on screen by default and so can only be used where you know that there will be lines hidden by your height limitation.
Oeh I like this one, thanks. But yeah, not knowing if all is shown, is too bad.
Ok if you insist....😋
Now responds to screen resize and automatically initiates and destroys itself depending on whether it is needed or not.
Resize the below example to mobile size and you should see it all fire into action, resize again and it will automatically remove itself. Also fixed a bug where if you set the clamp to 200 lines it would make the box 200 lines tall! Obviously you can also just edit the number of lines using the input to see it fire into action.
Oh and you could use this with a very large block of text so that is an added bonus (as there is no counting involved).
Perhaps you could take the principle and turn it into a fully fledged component that accounts for incorrect inputs, auto inserts the HTML etc etc.
By the way your example one seems to have an issue if you resize the screen and then change the line values, as you can see in the following example I managed to get it in an open state (showing "read less") while only showing 9 lines when I set it to 10. I am sure mine has issues too but yours is in production so thought I better give you a heads up!
@joelbonetr : Thanks for the reply, but about the flickering:
It will not cause flickering, because the actual repaint is done at the end of the function. The reflow is done everytime, but that will not show up on your screen.
I made a small Vanilla JS example:
codesandbox.io/s/calculate-width-j...
@inhuofficial : niiiice! and thanks for the heads up. I will look into it ASAP