0

espero y se encuentren bien, lo que pasa es que en mi diseño cuando esta en pantalla normal, si se ve "bien", pero al momento de hacerlo responsive, con media queries se desacomodan los elementos pongo el diseño como se ve normalmente:

introducir la descripción de la imagen aquí

Y este es cuando lo hago de manera responsive:

introducir la descripción de la imagen aquí

El detalle aqui, es que los numeros se ponen hasta la derecha, lo que quiero que todo el cuadro se quede fijo al momento de se haga responsive.

Aqui esta mi html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Simulador Pensión</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1" />
        <meta name="format-detection" content="telephone=no"/>
        <script src="../js/jquery_v1.11.3.js"></script>


        <!--<script type="text/javascript" src="/aplicativos/simulador-pensiones/globos/jquery-1.9.1.min.js"></script>-->
        <!--<script type="text/javascript" src="/aplicativos/simulador-pensiones/seleccion.js"></script>-->
        <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="../js/seleccion.js"></script>
        <!--<script src="https://code.jquery.com/jquery-1.10.2.js"></script>-->

        <!--Para QA-->
        <!--        <link rel="stylesheet" href="css/style_MD_cta.css">-->
        <!--fin-->
        <!--Ruta Mi local-->
        <link rel="stylesheet" href="../css/style_MD_cta.css">

        <script type="text/javascript">

            //Declaración de Variables Globales
            //******************************************************
            //CAMBIAR ESTAS CANTIDADES ANUALMENTE  //se cambió 25-Marzo-14
            var FIJO1 = 2046.73;//Salario Actual
            var FIJO2 = 2343.38;//PMG Actual
            var FIJO3 = 2253.85;//PMG Anterior
            var a = 0, b = 0, r = 0, c = 0;
            //******************************************************


            var pension = '<%=Integer.parseInt((request.getParameter("pension") == null) ? "0" : request.getParameter("pension"))%>';
            var string_pension;
            var string_seguro = "";
            if (pension == "1") {
                string_pension = "Invalidez";
            } else if (pension == "2") {
                string_pension = "Incapacidad";
            } else if (pension == "3") {
                string_pension = "Viudez y Orfandad";
            } else if (pension == "4") {
                string_pension = "Viudez";
            } else if (pension == "5") {
                string_pension = "Orfandad";
            } else if (pension == "6") {
                string_pension = "Ascendencia";
            } else {
                string_pension = "";
            }

            var seg = '<%=(request.getParameter("seguro") == null) ? "0" : request.getParameter("seguro")%>';
            if (seg = "1") {
                string_seguro = "invalidez";
            } else if (seg = "2") {
                string_seguro = "riesgos de trabajo";
            } else if (seg = "3") {
                string_pseguro = "Viudez y Orfandad";
            }


            $(function () {

                $(".SelectPenMinGara")
                        .change(function () {
                            if ($('select option:selected[name=valorpension]:selected').val() == 1) {
                                $('#PMG').val(FIJO2);
                            } else if ($('select option:selected[name=valorpension]:selected').val() == 2)
                                $('#PMG').val(FIJO3);
                        });


                /////***** Datos  paso 2 ******
                var HON = '<%=request.getParameter("HON")%>';
                document.getElementById("HON").value = HON;
                var HOS = '<%=request.getParameter("HOS")%>';
                document.getElementById("HOS").value = HOS;
                var HOD = '<%=request.getParameter("HOD")%>';
                document.getElementById("HOD").value = HOD;
                var ASC = '<%=request.getParameter("ASC")%>';
                document.getElementById("ASC").value = ASC;
                var esposa = '<%=(request.getParameter("esposa") == null) ? "false" : request.getParameter("esposa")%>';
                document.getElementById("esposa").value = esposa;
                //  /****** Datos del index ******/
                var seguro = '<%=Integer.parseInt((request.getParameter("seguro") == null) ? "0" : request.getParameter("seguro"))%>';
                document.getElementById("seguro").value = seguro;
                var pension = '<%=Integer.parseInt((request.getParameter("pension") == null) ? "0" : request.getParameter("pension"))%>';
                document.getElementById("pension").value = pension;
                //***** Datos paso3
                var SP = '<%=Double.parseDouble((request.getParameter("SP") == null) ? "0" : request.getParameter("SP"))%>';
                document.getElementById("SP").value = SP;
                var AAS = '<%=Integer.parseInt((request.getParameter("AAS") == null) ? "0" : request.getParameter("AAS"))%>';
                document.getElementById("AAS").value = AAS;
                var PDI = '<%=Integer.parseInt((request.getParameter("PDI") == null) ? "0" : request.getParameter("PDI"))%>';
                document.getElementById("PDI").value = PDI;
                //inicio



                if (SP > 0 || seguro == 3) {


                    var tope;

                    a = 0;

                    b = 0;

                    r = 0;

                    c = 0;

                    //selecciona el valor del tope

                    //if (!(seguro==1))

                    //  tope=0;

                    //else

                    tope = SP;

                    //-------------------------------------

                    c = ((FIJO1 * 12) / 365) * 25;

                    b = SP * 365 / 12;

                    //verifica que no se exceda el tope

                    if (tope <= c) {
                        //asigna el valor de la Cuantia Basica
                        if (seguro == 1) {
                            b = b * 0.35;
                        } else {
                            b = b * 0.70;
                        }
                        if (seguro == 3) {
                            window.document.getElementById("CB").value = outputMoney(FIJO2);
                        } else {
                            window.document.getElementById("CB").value = outputMoney(b);
                        }
                        //datos de a y b para cada combinación

                        //verficar el TdS

                        if (seguro == 1) {
                            //Vericar para cada TdP

                            if (pension == 1) {
                                string_pension = "Invalidez";
                                //if (forma.TdSIV.checked && forma.TdPInvalidez.checked) {

                                r = (HON * .1) + (AAS / 100) + 1;

                                if (esposa == "true") {
                                    r = r + 0.15;
                                }

                                r = Max(FIJO2, r * b);

                                a = Max(FIJO2, b);

                            }

                            //-------------------------------------

                            else if (pension == 3) {
                                string_pension = "Viudez y Orfandad";
                                //else if (forma.TdSIV.checked && forma.TdPVO.checked)  {

                                r = 0.9 + (HOS * 0.2) + (HOD * 0.3);

                                if (r > 1) {
                                    r = Max(FIJO2, b);
                                } else
                                    r = Max(FIJO2, b) * r;

                                a = r;

                            }

                            //-------------------------------------
                            else if (pension == 4) {
                                string_pension = "Viudez";
                                //else if (forma.TdSIV.checked && forma.TdPVI.checked)          {

                                r = Max(FIJO2, b) * 0.9;

                                a = r;

                            }

                            //-------------------------------------

                            else if (pension == 5) {
                                string_pension = "Orfandad";
                                //else if (forma.TdSIV.checked && forma.TdPOR.checked)  {

                                r = HOS * 0.2 + HOD * 0.3;

                                if (r > 1) {
                                    a = Max(FIJO2, b);

                                    r = a;

                                } else {
                                    r = Max(FIJO2, b) * r;

                                    a = r;

                                }

                            }

                            //-------------------------------------

                            else if (pension == 6) {
                                string_pension = "Ascendencia";
                                //else if (forma.TdSIV.checked && forma.TdPASC.checked)                           {

                                r = ASC * 0.2;

                                a = Max(FIJO2, b) * r;

                                r = a;

                            }

                        }//fin de verificar TdSIV

                        else if (seguro == 2) {
                            //-------------------------------------

                            if (pension == 2) {
                                string_pension = "Incapacidad";
                                //else if (forma.TdSRT.checked && forma.TdPIncapacidad.checked) {

                                r = (PDI / 100) * Max(b, FIJO2);

                                if (PDI > 50) {
                                    a = r * 0.5;
                                }
                            }

                            //-------------------------------------

                            else if (pension == 3) {
                                string_pension = "Viudez y Orfandad";
                                //else if (forma.TdSRT.checked && forma.TdPVO.checked) {
                                r = Max(0.4, ((0.9 * FIJO2) / Max(FIJO2, b)))
                                        + (HOS * 0.2) + (HOD * 0.3);

                                if (r > 1) {
                                    a = ((Max(0.4, ((0.9 * FIJO2) / Max(FIJO2, b))) + HOD * 0.3) / r)
                                            * 0.5 * Max(FIJO2, b);

                                    r = Max(FIJO2, b);

                                } else {
                                    a = (Max(0.4, ((0.9 * FIJO2) / Max(FIJO2, b))) + HOD * 0.3)
                                            * 0.5 * Max(FIJO2, b);

                                    r = Max(FIJO2, b) * r;

                                }

                            }

                            //-------------------------------------

                            else if (pension == 4) {
                                //else if (forma.TdSRT.checked && forma.TdPVI.checked)  {

                                r = Max(0.4, ((0.9 * FIJO2) / Max(FIJO2, b)))
                                        * Max(FIJO2, b);

                                a = r * 0.5;

                            }

                            //-------------------------------------

                            else if (pension == 5) {
                                //else if (forma.TdSRT.checked && forma.TdPOR.checked)          {

                                r = HOS * 0.2 + HOD * 0.3;

                                if (r > 1) {
                                    a = ((HOD * 0.3) / r) * Max(FIJO2, b) * 0.5;

                                    r = Max(FIJO2, b);

                                } else {
                                    r = Max(FIJO2, b) * r;

                                    a = HOD * 0.3 * Max(FIJO2, b) * 0.5;

                                }

                            }

                            //-------------------------------------

                            else if (pension == 6) {
                                //else if (forma.TdSRT.checked && forma.TdPASC.checked)     {

                                r = ASC * 0.2;

                                a = Max(FIJO2, b) * r * 0.5;

                                r = Max(FIJO2, b) * r;

                            }

                        }//fin TdSRT

                        else if (seguro == 3) {
                            //-------------------------------------

                            if (pension == 3) {
                                r = 0.9 + HOS * 0.2 + HOD * 0.3;

                                if (r > 1) {
                                    r = FIJO2;

                                    a = 0;

                                } else {
                                    r = FIJO2 * r;

                                    a = 0;

                                }

                            }

                            //-------------------------------------

                            else if (pension == 4) {
                                r = FIJO2 * 0.9;

                                a = 0;

                            }

                            //-------------------------------------

                            else if (pension == 5) {
                                r = HOS * 0.2 + HOD * 0.3;

                                if (r > 1) {
                                    a = FIJO2;

                                    r = 0;

                                } else {
                                    r = FIJO2 * r;

                                    a = 0;

                                }

                            }

                            //-------------------------------------

                            else if (pension == 6) {
                                r = ASC * 0.2;

                                a = 0;

                                r = FIJO2 * r;

                            }

                        }//fin TdSRCV

                        //-------------------------------------

                        if (b < FIJO2) {
                            window.document.getElementById("CB").value = outputMoney(FIJO2);
                        }
                        window.document.getElementById("PM").value = outputMoney(r);
                        // setPaymentAmount(($('#PM').val()).replace(",", ""));

                        window.document.getElementById("AG").value = outputMoney(a);

                    } else {

                        alert("El Salario Pensionable debe ser menor a 25 veces el salario mínimo vigente.");
                        //nuevo Cambio
//                        event.preventDefault();
                        window.location = 'paso-03.jsp?pension=' + pension + '&seguro=' + seguro;

                        //llamar a reset valores de abajo....

                        //reset sp

                    }//fin checartope

                }//fin if sp>0

//                else {
//                    alert("El Salario Pensionable no puede ser 0");
//
//                }
            });


        </script>


    </head>
    <body>
        <div class="container1">
            <h1>Simulador Pensión</h1>
            <h4>Resultado:</h4>
            <h3>Calculo de Pensión por Montos Solicitados.</h3>

            <form name="paso04" method="post" action="">
                <input type="hidden" name="HON" id="HON" value=""> 
                <input type="hidden" name="HOS" id="HOS" value=""> 
                <input type="hidden" name="HOD" id="HOD" value=""> 
                <input type="hidden" name="ASC" id="ASC" value=""> 
                <input type="hidden" name="esposa" id="esposa" value=""> 
                <input type="hidden" name="seguro" id="seguro" value=""> 
                <input type="hidden" name="pension" id="pension" value=""> 
                <input type="hidden" name="SP" id="SP" value=""> 
                <input type="hidden" name="AAS" id="AAS" value="">
                <input type="hidden" name="PDI" id="PDI" value="">
                <div class="botonera1">     
                    <div id="bt_div" class="derecha">
                        <div class="group">
                            <select class=" Caja_txt_246 selectArrow" tabindex="9">
                                <option disabled="disabled" class="optionDisable">Selecciona una opción</option>
                                <option name="valorpension" id="actual" value="1">Actual</option>
                                <option name="valorpension" id="anterior" value="2">Anterior</option>
                            </select>
                            <label class="combo">Pensión mínima garantizada:</label>
                        </div>
                    </div>
                </div>

                       <div class="botonera">
                        <div id="bt_div" class="derecha">
                            <div class="group">
                                <input  name="PMG" type="text" class="inputsChicos" id="PMG" value="" readonly="readonly">
                                <label class="">Pensión Minima:</label>
                                <label class="">$</label>

                            </div>
                        </div>
                    </div> 

                    <div class="botonera">
                        <div id="bt_div" class="derecha">
                            <div class="group">
                                <input class="inputsChicos" name="CB" type="text"  id="CB" value="" readonly="readonly" >
                                <label class="labelsFijos">Cuantía Básica:</label>
                                <label class="labelsPesos1">$</label>
                            </div>
                        </div>
                    </div>
                    <div class="botonera">
                        <div id="bt_div" class="derecha">
                            <div class="group">
                                <input class="inputsChicos" name="PM" type="text"   id="PM" value="" readonly="readonly">
                                <label class="labelsFijos">Pensión mensual:</label>
                                <label class="labelsPesos1">$</label>

                            </div>
                        </div>
                    </div>

                    <div class="botonera">
                        <div id="bt_div" class="derecha">
                            <div class="group">
                                <input class="inputsChicos" name="AG" type="text" id="AG" value="" readonly="readonly"/>
                                <label class="labelsFijos">Aguinaldo:</label>
                                <label class="labelsPesos1">$</label>
                            </div>
                        </div>
                    </div>






                <div class="botonera">
                                        <div id="bt_div" class="derecha exiit">
                                            <a href="../index.html" target="_top" class="exit">Regresar</a>
                                        </div>
<!--                    <div id="bt_div" class="izquierda">
                        <button  href="index.jsp" target="_top" type="submit" id="loginButton">Regresar</button>
                    </div>-->
                </div>      
            </form>



        </div>
    </body>
</html>

Y este es mi css del media queries:

@media screen and (max-width: 945px) {

/*    .contenidoTotal{
        width: 100%;

    }*/

/*    .SelectPenMinGara{
        width: 100%;    
    }*/

/*.botonera1{

}*/

    .enviar,
    .regis {
        position: relative;
    }
    select {
        width: 100%
    }

    .botonera {
        width: 100%
    }

    .botonera1 {
        width: 100%;
    }

    .enviar,
    .regis {
        width: 100%;
        display: block;
    }
    #loginButton {
        float: none;
        width: 100%
    }
    .regis {
        top: 70px;
        text-align: center
    }
    .enviar {
        top: -25px
    }
    input, textarea{
        width: 100%;
    }
    .botonera {
        display: block; 
        padding-top: 16px;
    }
    .derecha {
        width: 100%;
        display: block;
        margin-bottom: 16px;
    }
    .exiit.derecha{
        text-align: center;
        display: inline-block;
    }

Espero y me puedan orientar, lo extraño es que se me distorciona ya que no tengo ninguna regla en el resto de las clases de los labels e inputs :( mas que nada lo que necesitaria es que todos los elementos se recorran del cuerpo sin que se distorcione.

Nota: Tengo este codigo, pero la diferencia con el mio es que no usaron inputs, y yo si:

<body>
    <div class="container">
        <h1>Simulador Pensi&oacute;n</h1>
        <h2>Resultado:</h2>
        <h3>Calculo de Pensi&oacute;n por Montos Solicitados</h3>
    </div>
    <div class="botonera" style="width: 368px;">
        <div class="group">
                <select name="Pension_Min" id="Pension_Min">
                    <option selected="selected" value="$<%=formateador.format(FIJO2)%>">Actual</option>
                    <option value="$<%=formateador.format(FIJO3)%>">Anterior</option>
                </select>
                <label class="combo">Ascendientes</label>
        </div>
            <p class="cond Pension_Min"></p>
    </div>
    <div class="botonera" style="width: 368px;">
        <div id="bt_div" class="derecha"><p class="tit">Pensi&oacute;n m&iacute;­nima:</p></div>
        <div id="bt_div" class="izquierda"><p class="monto_tit variacion">$<%=formateador.format(FIJO2)%></p></div>
    </div>
    <div class="botonera" style="width: 368px; padding-top: 16px;">
        <div id="bt_div" class="derecha"><p class="tit">Cuant&aacute;a B&aacute;sica:</p></div>
        <div id="bt_div" class="izquierda"><p class="monto_tit">$<%=Cuenta_Basica %></p></div>
    </div>
    <div class="botonera" style="width: 368px; padding-top: 16px;">
        <div id="bt_div" class="derecha"><p class="tit">Pensi&oacute;n mensual:</p></div>
        <div id="bt_div" class="izquierda"><p class="monto_tit">$<%=PensioMin%></p></div>
    </div>
    <div class="botonera" style="width: 368px; padding-top: 16px;">
        <div id="bt_div" class="derecha"><p class="tit">Aguinaldo:</p></div>
        <div id="bt_div" class="izquierda"><p class="monto_tit">$<%=Aguinaldo%></p></div>
    </div>
    <div class="botonera" style="padding-top: 112px;">
            <div id="bt_div" class="derecha">
                <a href="index.jsp" target="_top" class="return">Regresar</a>
            </div>
    </div>
</body>

1 respuesta 1

0

sabes que con el código como lo presentas es imposible saber dónde está el problema, necestio que subas el ejemplo en un jsfiddle o algún sistema que renderise tu código para poder inspeccionar elemento e ir "desbugeando"

Un saludo!

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.