Geek Answers Handbook

Create a tag field like stackoverflow

I would really like to know how to arrange the tag box, like the one we have, Stackoverflow.

I'm almost there, I just need to arrange the tags so that when the width of the tag container is exceeded, the tags move to the left, and not to the right or down.

So far, I have this CSS code:

#tagsContainer{ border: 1px solid black; width: 400px; height: 28px; overflow-x: scroll; } #tagsBox{ float: left; } #tagsTxtBox{ float: right; }

And this HTML code:

 <div id="tagsContainer"> <div id="tagsBox"></div> <div id="tagTxtBox"><input type="text" id="autocompletes" /></div> </div>

Thanks in advance!

+4
source share
2 answers

Check out these links: Chosen and Token Login . And I found here on the forum: jQuery plugin for a simple input field for comma-separated tags using autosuggest

+4
source

I solved this by setting direction on .tagsBox to rtl (means right to left) and added 'text-align: left' . The text is still aligned with the left margin of the field, but when it is too long and overflows the field, it will overflow the field on the left.

This changes the order of your tags. But, since this is what they are, order is not a big deal, I think.

+1
source

More articles:


All Articles