Dropdown not taking span6 because of 'row-fluid'
Dropdown not taking span6 because of 'row-fluid'
by labanino
HTML
<link rel="stylesheet" href="http://jasny.github.io/bootstrap/assets/css/bootstrap.css">
<script src="http://jasny.github.io/bootstrap/assets/js/bootstrap-modal.js"></script>
<script src="http://jasny.github.io/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script src="http://jasny.github.io/bootstrap/assets/js/application.js"></script>
<script src="http://vadimg.com/twitter-bootstrap-wizard-example/jquery.bootstrap.wizard.js"></script>
<script src="http://vadimg.com/twitter-bootstrap-wizard-example/bootstrap/js/bootstrap.min.js"></script>
<!-- Button to trigger modal --> <a href="#registration-modal" role="button" class="btn active" id="registration-link"><i class="iconic-new-window"></i> Modal</a>
<!-- Modal -->
<div id="registration-modal" class="modal hide fade" role="dialog">
<div class="modal-body">
<section id="wizard">
<div id="rootwizard">
<div class="modal-header">
<ul class="nav nav-pills pull-left">
<li class="active"><a href="#tab1" data-toggle="tab">General</a>
</li>
<li><a href="#tab2" data-toggle="tab">Chief Complaint</a>
</li>
<li><a href="#tab3" data-toggle="tab">Health History</a>
</li>
</ul> <span class="pull-right">
<div class="btn-group">
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><i class="iconic-cog"></i> Protocol</button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
</div>
<div class="btn-group">
...CSS
#vital-modal.modal {
width: 650px;
margin-left: -325px;
}
.modal-header h3 {
background-color: transparent;
}
#blood-pressure, #bmi, #pulse, #glucose, #temperature, #respiratory, #sao2 {
display:none;
}
.modal, .modal.fade.in {
top: 10px;
}
.triage-submited {
display: none;
clear: both;
margin: 0 0 15px 10px;
}
#rootwizard .navbar {
margin: 0;
}
#rootwizard .navbar .nav > li > a {
padding: 10px;
}
#rootwizard .tab-content {
padding: 5px 15px 15px 15px;
}
#rootwizard .tab-content>.tab-pane, .pill-content>.pill-pane {
margin: 10px;
}
#registration-modal .modal-body {
padding: 0;
}
#rootwizard .nav>li>a {
padding-top: 8px;
}
#rootwizard button {
font-size: 12px;
color: #333333;
text-shadow:none;
}
#rootwizard button i {
display: inline-block;
font-size: 13px;
margin: 0;
}
#rootwizard .btn-group ul {
margin-top: 3px;
}
#rootwizard .btn-group ul li {
float: none;
margin: 0;
}
.clear {
clear: both;
}
.nav {margin-bottom:0;}JavaScript
$(document).ready(function () {
$('#rootwizard').bootstrapWizard({
onTabShow: function (tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index + 1;
// If it's the last tab then hide the last button and show the submit instead
if ($current >= $total) {
$('#rootwizard').find('.pager .next').hide();
$('#rootwizard').find('.pager .submit').show();
$('#rootwizard').find('.pager .submit').removeClass('disabled');
} else {
$('#rootwizard').find('.pager .next').show();
$('#rootwizard').find('.pager .submit').hide();
}
}
});
$('#rootwizard .submit').click(function () {
$('.triage-submited').show();
$('.submit').addClass('disabled');
});
});
$('#registration-link').dblclick(function () {
$('#registration-modal').modal('show');
});
$('#registration-modal').modal({
show: false,
backdrop: true,
keyboard: true
}).css({
'width': function () {
return ($(document).width() * .98) + 'px';
},
'margin-left': function () {
return -($(this).width() / 2);
}
});