0

Hola buenos dias quisiera que mi select option una apareciera arriba y el otro abajo pero ya e puesto de todo y no me sale osea primero arriba cumple y luego abajo categoria

introducir la descripción de la imagen aquí

 tds += '<h6 style="color:#0B93A8;"> CUMPLE </h6>';



tds += "<select class='txtFormulario_Pregunta' id='txtFormulario_Pregunta_" + val.idPre + "' rel='" + val.idPre + "'>";
tds += "<option disabled selected>Seleccione</option>";
tds += "<option value='SI'>SI</option>";
tds += "<option value='NO'>NO</option>";
tds += "<option value='NA'>N.A</option>";
tds += "</select>";
                tds += '</div>';
                 tds += '</div>';
                tds += '<div class="col-sm-2 padre">';

                tds += ''

                tds += '<h6 style="color:#3EA1CC;"> CATEGORIA </h6>';



tds += '<select  class="combo1" id="combo1">';
                        tds += '<option title="" value="" disabled selected>Seleccione</option>';
                        tds += '<option title="" value="C">CONDUCTAL</option>';
                        tds += '<option title="" value="S">ESTRUCTURAL</option>';
                        tds += '<option title="" value="O">ORGANIZATIVA</option>';
                        tds += '<option title="" value="AF">OTROS FACTORES</option>';


                    tds += '</select>';



                    tds += '<select class="txtFormulario_PreguntaCategoria combo2"  id="txtFormulario_PreguntaCategoria_' + val.idPre + '">';
                        tds += '<option disabled selected></option>';

                        tds += '<option data-option="C" title=" Incumplimiento de normas procedimientos y metodos de trabajo"   value="C1">C1</option>';
                        tds += '<option data-option="C" title="Falta de uso, mal uso o uso incorrecto de los EPI" value="C2">C2</option>';
                        tds += '<option data-option="C" title="Uso indebido los equipos y dispositivos" value="C3">C3</option>';
                        tds += '<option data-option="C" title="Posicion inadecuada del cuerpo /postura"  value="C4">C4</option>';
                        tds += '<option data-option="C" title="Distraccion / Falta de atencion"  value="C5">C5</option>';
                        tds += '<option data-option="C" title="Falta de señalizacion de peligro"  value="C6">C6</option>';
tds += '</select>';
3
  • 1
    el problema está en el CSS, y no en el código que has publicado.
    – enxaneta
    el 27 sep. 2018 a las 12:57
  • no tengo css en el ajax el 27 sep. 2018 a las 12:59
  • Por favor, me puedes decir ¿que haces con tds? Supongo que será el innerHTML de algún elemento HTML. Este elemento, probablemente tiene un estilo. Quieres compartir el css para este elemento?
    – enxaneta
    el 27 sep. 2018 a las 13:08

1 respuesta 1

1

El problema como te comentó enxaneta es en el CSS de la pagina que carga estos select, una posible solucion es agregar un 'br' al finalizar el primer select para que fuerce el cambio de linea aunque lo mas optimo seria revisar el css.

     tds += '<br/>'               
     tds += '<div class="col-sm-2 padre">'  
     tds += '<h6 style="color:#3EA1CC;"> CATEGORIA </h6>';

Ademas como al parecer estas usando bootstrap el "col-sm-2" hace que el div flote y se coloque al lado del otro select

EDITADO

En el caso de estar usando Bootstrap lo mejor es poner los select en 'row' separados, un row para el primer select

tds += '<div class="row">';
tds += '<div class="col-md-12">';
tds += '<h6 style="color:#0B93A8;"> CUMPLE </h6>';

y el finalizar este el otro row para el otro select

tds += "</select>";
tds += '</div>';
tds += '</div>';
tds += '<div class="row">';
tds += '<div class="col-md-12">';
tds += '<div class="padre">';
......
tds += '</div>';
tds += '</div>';
tds += '</div>';
8
  • solo uso la libreria de boostrap el 27 sep. 2018 a las 13:14
  • La solucion que hize era muy facil solo use un tds += '<div class="col-sm-2">'; en el primer select y lo cerraba en el ultimo select gracias por sus ayudas :) el 27 sep. 2018 a las 13:35
  • Eso funciona porque encierras los 2 en la misma celda del grid de bootstrap pero estas diciendo al responsive que los dispositivos medianos en adelante la columna tendra un ancho de 2 de 12 posibles lo que se vera muy estrecho .. te recomiendo con la misma solucion que lo pongas col-sm-12 y asi dispone del ancho total de la pantalla el 27 sep. 2018 a las 13:40
  • Gracias compañero el 27 sep. 2018 a las 13:49
  • Amigo yoidel este texarea sale de esta funcion como aria para alinearlo a la izquierda $(document).delegate('.txtFormulario_Pregunta', 'change', function(event) { var valor = $(this).val(); var idPre = $(this).attr('id').replace('txtFormulario_Pregunta_', ''); if (valor == 'NO') { $('#txtFormulario_Pregunta_Observacion_' + idPre).remove(); var tds = '<br><br><textarea class="form-control" rows="6" placeholder="OBSERVACIÓN:" id="txtFormulario_Pregunta_Observacion_' + idPre + '"></textarea>'; el 27 sep. 2018 a las 13:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.