CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
user6163704
user6163704

Reputation: 3

Bootstrap dropdown menu autowidth for inline form

I'm trying to build a Bootstrap dropdown button where the only dropdown option is a form field containing textual input accompanied by a button, such as:

+----------+---+
| (Button) | V |
+----------+---+-----------+
| [_<text input>_] | (Go!) |
+--------------------------+

The Problem

I'm having considerable trouble getting the width of the dropdown to actually fit the form field. My attempts so far have them sort of matching up but not really; the form field is slightly larger than the bootstrap dropdown width which looks somewhat unpleasant.

Problem Reference: http://jsfiddle.net/3z44e5va/2/

I suspect that the auto-resizing capabilities of the Bootstrap dropdown don't apply to forms, but rather solely to list elements?

I'm ardently hoping that someone has tried to implement something similar and can shed some light on a recommended path forward.

Thank you in advance!

Upvotes: 0

Views: 61

Answers (1)

Wowsk
Wowsk

Reputation: 3675

Just reset the row class's margin. Right now it has the default -15px for the margin-left and margin-top.

.row{
  margin:0px;
}

http://jsfiddle.net/e4pxamho/

Upvotes: 0

Related Questions