Expand input-group label for text with new lines

Question

I'm using Bootstrap to construct an input-group- it's a button with a dropdown plus a readonly label. When you click the button, I fill the label with some text. The problem is that if the text contains newlines then the input group doesn't expand to fit, the text is just rendered over the top.

I've created this fiddle which reproduces the issue- just click the button to set the text and instant pain.

Here's my reproducing HTML and JS:

<div class="input-group">
    <div class="input-group-btn">
          <button type="button" class="btn btn-default" id="compile" onclick="compile()">Compile</button>
          <button type="button" class="btn btn-default dropdown-toggle" id="selector" data-toggle="dropdown">
              <span class="caret"></span>
              <span class="sr-only">Toggle Dropdown</span>
          </button>
          <ul class="dropdown-menu" role="menu">
               <li><a href="#" onclick="init()">Example</a></li>
          </ul>
    </div>
    <label class="form-control" id="result"></label>            
</div>

function escapeRegExp(string) {
    return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}
function replaceAll(find, replace, str) {
    return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}
function escapeHTML( string )
{
    var pre = document.createElement('pre');
    var text = document.createTextNode( string );
    pre.appendChild(text);
    return pre.innerHTML;
}
function addtext() {
    var response = "Some\nText"
    response = response.trim()
    response = escapeHTML(response)
    response = replaceAll("\n", "</br>", response)
    document.getElementById('result').innerHTML = response;    
}

How can I make Bootstrap resize the label field (preferably up to a certain maximum w/ scrollbar) for larger text output?

I've had some success replacing the label with a textarea, which exhibits all the desired semantics, but Bootstrap does not officially support button addons with textareas and this is apparent in the poor styling of such a construct.

Answer 1

The problem is that the label, classed .form-control , has a height assigned to it of 34px. It will maintain that size. If you set it to height: auto it will expand when content is bigger than 34px.

Of course, that will mess up the layout of other parts of the interface. You'll need to fiddle around to mitigate it. Example: http://jsfiddle.net/b9nZJ/