Style input/button tags in dropdowns

[heruan]

I'd like to place a <button type="submit"> in a dropdown button group, like this:

<div class="btn-group">
    <button type="submit" name="status" value="pending" class="btn btn-primary">
        Submit as Pending
    </button>
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <button type="submit" name="status" value="working">
                Submit as Working
            </button>
        </li>
        <li>
            <button type="submit" name="status" value="solved">
                Submit as Solved
            </button>
        </li>
        <li>
            <button type="submit" name="status" value="invalid">
                Submit as Invalid
            </button>
        </li>
    </ul>
</div>

It think it could be useful to have form submit buttons in dropdown button groups, but the dropdown style is now applied only to anchors (.dropdown-menu > li > a) and not to inputs or buttons.

[Joyrex]

I might be pointing out the obvious, but shouldn't you have btn btn-* classes on the buttons within the dropdown menu? I say this because I have a search (with appended submit button) inside a dropdown menu and the button has styling.

[heruan]

Hi @Joyrex and thank you for your reply! Unfortunately btn classes won't help (see http://jsfiddle.net/x6Gr8/).

[mdo]

Until v4 drops, we cannot change the behavior of the dropdown items, and by that I mean the only way we'd account for this is with required classes on the dropdown links (e.g., .dropdown-item instead of .dropdown > li > a). We could account for this in v3.1 perhaps if we only deprecate the old selectors, but I'm unsure of the trade offs.

I'll make a note to consider this for v3.1 in #9397.

[Joyrex]

@heruan - Oh, I see what you're wanting - you want to use elements in the dropdown as links, but not adopt the default styling. Any reason you want a button rather than just an HREF? If it's to submit a form, you could use a JS onClick event rather than an actual submit.

[heruan]

@Joyrex yes, I can use anchors with JS listening on click events and this is what I'm doing right now. I'd just like to have the chance keep the HTML semantic with input tags to submit the form!

[raulgomis]

@mdo this feature has not been considerer, has it? I think it is not a great approach to have links to do actions (link submits) just because of the style.

[mdo]

@raulgomis Come v4 we'll have more classes for these things and you can mix buttons and inputs and links all you want.