Bootstrap 3: Horizontal form group inside dropdown - html

Question

The requirement is a horizontal form group inside of a dropdown. When the user clicks the dropdown, they are able to enter text into the appearing text fields.
I am losing control over the width and margin of the form group when inside of the dropdown. For example, the following form group renders fine:
<form class="form-horizontal">
<div class="form-group">
<label for="strike-from" class="col-sm-2 control-label">From</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="strike-from" value="">
</div>
</div>
<div class="form-group">
<label for="strike-to" class="col-sm-2 control-label">To</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="strike-to" value=""">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</div>
</form>
However when embedding this same HTML inside of a dropdown wrapper, the text fields extend past the container and the margin is compressed.
<div class="form-inline">
<div class="form-group">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="strikes-range" data-toggle="dropdown" aria-haspopup="true">
Strikes
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="strikes">
<li>
<form class="form-horizontal">
<div class="form-group">
<label for="strike-from" class="col-sm-2 control-label">From</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="strike-from" value="">
</div>
</div>
<div class="form-group">
<label for="strike-to" class="col-sm-2 control-label">To</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="strike-to" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</div>
</form>
</li>
</ul>
</div>
</div>
</div>
Is there an out of the box implementation of this? Otherwise do I just need to add custom styles for width of text boxes and margin?
Or am I just implementing something incorrectly?

Answer 1

I have edited some column widths and removed an extra " and added a class donotchange for removing the alignment error.
Here is my code
HTML
<div class="form-inline">
<div class="form-group">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="strikes-range" data-toggle="dropdown" aria-haspopup="true"> Strikes <span class="caret"></span> </button>
<ul class="dropdown-menu" aria-labelledby="strikes">
<li style="width: 280px;">
<form class="form-horizontal" style="display:block;">
<div class="form-group donotchange">
<label for="strike-from" class="col-sm-2 control-label">From</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="strike-from" value="">
</div>
</div>
<div class="form-group donotchange">
<label for="strike-to" class="col-sm-2 control-label">To</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="strike-to" value="">
</div>
</div>
<div class="form-group donotchange">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</div>
</form>
</li>
</ul>
</div>
</div>
<!-- No need. For checking Only-->
<div class="form-group">
<button class="btn btn-default dropdown-toggle" type="button" id="strikes-range" data-toggle="dropdown" aria-haspopup="true"> Sample Button </button>
</div>
<div class="form-group">
<input type="text" class="form-control" id="strike-to" value="">
</div>
<!-- No need. For checking Only-->
</div>
CSS
#media (min-width: 768px){
.form-inline .donotchange {
display: block;
margin-bottom: 10px;
vertical-align: middle;
}
.form-horizontal .donotchange {
margin-right: 0px;
margin-left: 0px;
}}
#media (min-width: 768px){
.form-inline .donotchange {
display: block;
margin-bottom: 10px;
vertical-align: middle;
}}
Check my working code here http://www.bootply.com/N0lccYSCsg
Check whether it works as per your requirements.
Good day!