Question

Is it possible to prevent the dropdown menu to dissapear when “clicking in it”. Trying to use a dropdown as a container for a textarea.

e.g

<div class="row-fluid">
    <div class="span12">
        <div class="btn-group">
            <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">
                <strong id="revolver">
                    <i class="icon-envelope"></i>&nbsp
                    <span class="caret"></span>
                </strong>
            </a>
            <ul class="dropdown-menu">
                <div class="row-fluid send-message-textarea">
                    <div class="span12">
                        <textarea></textarea>
                        <br>
                        <button class="btn btn-mini"><strong>Send</strong></button>
                    </div>
                </div>
            </ul>
        </div>
    </div>
</div>

Edit:

I guess a copy paste of the dropdown function inside bootstrap.js and then alter the selector and remove the unwanted functionality could be an option. I took a look at https://github.com/twitter/bootstrap/blob/master/js/bootstrap-dropdown.js but I could not pinpoint exactly where the specific functionality lies. Help would be appritiated.

Answer 1

In your HTML, add an id to the <ul>

<ul class="dropdown-menu" id="test">

add a handler that prevents the dropdownmenu from responding to click

$(document).ready(function() {
    $("#test").click(function(e) {
       e.stopPropagation();
    });
});

you are now able to click and edit in the textarea.