Question

I’m creating a similar tag editor like SO and it’s working pretty well i must say. The only thing that is giving me some problems is calculating the width of the textbox after a user selected a tag.

With every tag a user adds i recalculate the width of the input field next to it but i can’t seem to get it right.

I have 2 divs next to eachother. The left div contains the tags, the right div contains the input field.

Can someone tell me how SO does it or tell me how i could calculate the width of a div?
(Assume the div with the tag only holds plain text + the delete tag image)

Edit:

I have the complete editor working in a similar way as SO does it. The only thing i am struggling with is resizing the input field after a user added a tag (or removed one).

Answer 1

Is something like this what you might be looking for, albeit very simple:

Working Demo

It just uses the image within the tag to store the delete button, and has a slight margin to keep some space between the text and the image. The tags are floated to stay away from each other as well.

You can find the classes that SO uses for it’s buttons by checking out the source:

.post-tag, .post-text .post-tag, .wmd-preview a.post-tag {
    color: #3E6D8E;
    background-color: #E0EAF1;
    border-bottom: 1px solid #3E6D8E;
    border-right: 1px solid #7F9FB6;
    padding: 3px 4px 3px 4px;
    margin: 2px 2px 2px 0;
    text-decoration: none;
    font-size: 90%;
    line-height: 2.4;
    white-space: nowrap;
}

a.post-tag:hover, .post-text a.post-tag:hover, .wmd-preview a.post-tag:hover {
    background-color: #3E6D8E;
    color: #E0EAF1;
    border-bottom: 1px solid #37607D;
    border-right: 1px solid #37607D;
    text-decoration: none;
}

You should be able to get the widths by using jQuery or javascript:

//jQuery
var width = $('#yourTag').width(); //or $(this).width();

//javascript
var tag = document.getElementById('yourTag');
var width = tag.width  // or tag.clientWidth