En un formulario modal tengo una serie de select2 que se crean dinámicamente. El tema es que al desplegar los select que están señalados en la imagen en rojo, sus option se muestran en el centro de la pantalla (azul) y no ¨pegados¨ al select2 clickeado, si se selecciona uno de los options funciona bien, pero desde el punto de vista visual no está correcto.
Este es el código del formulario:
{% macro information_prototype(nacimiento, indice) %}
<div class="nacimiento well well-sm text-small">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<strong>Fecha</strong>
<div class="input-group">
{{form_widget(nacimiento.fechaNacimiento)}}
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><strong>Estado</strong>{{ form_widget(nacimiento.estado) }}</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"><strong>Sexo</strong>{{ form_widget(nacimiento.sexo) }}</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><strong>Peso <span class="text-small">(g)</span></strong>{{ form_widget(nacimiento.pesoAlNacer) }}{{ form_errors(nacimiento.pesoAlNacer) }}</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<strong>Observaciones</strong>
{{ form_widget(nacimiento.observaciones) }}
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-right">
<a class="lnkAgregaNacimientoForm" href="#"><span class="glyphicon glyphicon-plus-sign"></span></a>
<a class="lnkEliminarNacimientoForm" href="#"><span class="glyphicon glyphicon-remove"></span></a>
</div>
</div>
</div>
{% endmacro %}
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="well well-sm text-center">
<b class="text-danger">
<span class="icon icon-warning-sign"></span> Registre nacimientos a la embarazada si ocurren en esta Unidad.
</b>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
{{ form_start(form) }}
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
{{ form_errors(form) }}
</div>
</div>
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
<strong>Madre</strong>{{ form_widget(form.nombreMadre) }}
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<strong>Tipo de Parto</strong>{{ form_widget(form.tipoPartoTuvo) }}
</div>
</div>
<br/>
<div class="well well-sm">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-bold">{{ form_widget(form.fallecida) }}</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<strong>Fecha Fallece</strong>
<div class="input-group">
{{form_widget(form.fechafallecimiento)}}
<span class="input-group-addon">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<br/>
<div class="row">
<div id="contenedorNacimientos" class="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-prototype="{{ _self.information_prototype(form.nacimientos.vars.prototype)|escape('html') }}">
{% for nacimiento in form.nacimientos %}
{{ _self.information_prototype(nacimiento, loop.index ) }}
{% endfor %}
</div>
</div>
{{ form_end(form) }}
</div>
</div>
<script type="text/javascript">
var coleccionNacimientos = $('#contenedorNacimientos');
$(document).ready(function () {
$('.mask-date, #registro_nacimientos_fechafallecimiento').inputmask('dd/mm/yyyy', {'placeholder': 'dd/mm/yyyy'});
coleccionNacimientos.data('index', coleccionNacimientos.length);
$('#contenedorNacimientos').on('click', '.lnkAgregaNacimientoForm', function (e) {
e.preventDefault();
// Get the data-prototype explained earlier
var prototype = coleccionNacimientos.data('prototype');
// get the new index
var index = coleccionNacimientos.data('index');
// Replace '__name__' in the prototype's HTML to
// instead be a number based on how many items we have
var newForm = prototype.replace(/__name__/g, index);
// increase the index with one for the next item
coleccionNacimientos.data('index', index + 1);
// Display the new form fragment
var resultado = $('#contenedorNacimientos').append(newForm);
$('#modalCaptura').find('#registro_nacimientos_nacimientos_' + index + '_fechaNacimiento').val($('#modalCaptura').find('#registro_nacimientos_nacimientos_0_fechaNacimiento').val());
$('#modalCaptura').find('#registro_nacimientos_nacimientos_' + index + '_estado, #registro_nacimientos_nacimientos_' + index + '_sexo').select2({
dropdownParent: $('#modalCaptura'),
width: '100%',
language: 'es'
});
});
$('.selectt2, #registro_nacimientos_tipoPartoTuvo').select2({
dropdownParent: $('#modalCaptura'),
width: '100%',
language: 'es'
});
$('#contenedorNacimientos').on('click', '.lnkEliminarNacimientoForm', function (e) {
e.preventDefault();
var longitudColeccion = $('div.nacimiento').length;
if (longitudColeccion > 1) {
$(this).parents('div.nacimiento').remove();
}
});
$('.iCheck').iCheck({
checkboxClass: 'icheckbox_minimal-blue'
});
});
</script>