javascript - Show all button for tags

Question

I have next task: I need to render tags in one line, if width of the screen do not allow me to render all tags in one line I should 'show all' button, if tags fit current screen width then I should not show all button. On click show all I should render hidden tags on new line. Tags amount is dynamic and width can be different depend on internationalization.

There is an example when tags fid container with then we should not show 'Show all' button tags fit container no show all button here is an example when tags doesn't fit container show all button visible

I tried to solve it in next way, on first render I compare tags offsetWidth with wrapperWidth. so I filter tags with next condition but it partialy help me:

const filteredTags = tags.filter((tag, index) => {
        const el = document.getElementById(`item-${index}`);
        const elWidth = el ? el.offsetWidth : 0;
        allFiltersWidth = allFiltersWidth + elWidth;

        return wrapperWidth > allTagsWidth + allButtonOffsetWidth;
    });

Maybe somebody know better solutions, Thanks.

question from:https://stackoverflow.com/questions/65830030/show-all-button-for-tags

Answer 1

Waitting for answers