¿Como poner campos en otra fila?

  • ASANSULL
    Asked on February 28, 2017 at 3:51 AM

    Hola Buenos días,

    Respecto al formulario que se adjunta: https://form.jotform.com/70580916383966 - Me gustaría, si es posible, lo siguiente:

    1.- Poner la 3 columna en una segunda fila.

    2.- La 3 columna... ¿Se puede poner el fondo de otro color?

    ¿Como poner campos en otra fila? Image 1 Screenshot 20

    ¡Muchas gracias!

  • Ashwin JotForm Support
    Replied on February 28, 2017 at 7:17 AM

    Hello ASANSULL,

    Please inject the following custom css code in your your "Configurable List" widget to move the textarea field to next line:

    td.col3 {

        float: left;

        left: -438px;

        position: relative;

        top: 48px;

    }

    tr {

        height: 100px;

    }

    Please check the screenshot below on how to inject custom css code in widget:

    ¿Como poner campos en otra fila? Image 1 Screenshot 20

     

    Please inject the following custom css code in widget to change the background color of textarea of column 3:

    .col3 textarea {

        background-color: #d65b5b !important;

    }

    Hope this helps. 

    Do get back to us if you have any questions.

    Thank you!

  • ASANSULL
    Replied on February 28, 2017 at 3:17 PM

    Muchas GRACIAS! Thanks!

    Dos cositas más...

     

    1.- ¿Como puedo poner el texto "Informe de la Intervención y/o materiales utilizados para la misma" justo encima del TEXTarea de la segunda FILA?

    2.- He insertado el código del BACKGROUND pero no me sale el color relleno ¿porqué?

     

    Mil gracias

  • David JotForm Support Manager
    Replied on February 28, 2017 at 6:04 PM

    If you want to accomplish this: https://form.jotform.com/70586555568976 

    ¿Como poner campos en otra fila? Image 1 Screenshot 20

    Please also inject the following code:

    th {

        display: none;

    }

    .col1:before {

    content: "Ubicación";

    font-weight: bold;

    position: absolute;

    margin-top: -20px;

    }

     

    .col2:before {

    content: "Descripción";

    font-weight: bold;

    position: absolute;

    margin-top: -20px;

    }

    .col3:before {

    content: "Informe de la Intervención y/o materiales utilizados para la misma";

    font-weight: bold;

    }

    .add{

        margin-top: 11px;

    }

    .col3{

        margin-bottom: 70px;

    }

    Let us know if you need more help.

  • ASANSULL
    Replied on March 1, 2017 at 2:50 AM

    Thank you very much for your reply. I have cloned the form, it is now in the following address: https://form.jotform.com/70591201127951 and I am again doubting about it, which I describe in the image (3 questions):

    ¿Como poner campos en otra fila? Image 1 Screenshot 20

    Thanks a lot!

  • Ashwin JotForm Support
    Replied on March 1, 2017 at 7:31 AM

    Hello ASANSULL,

    Please inject the following custom css code in your widget to remove the (1) distance between the fields:

    div#cid_6 {

        margin-top: -100px !important;

    }

    I did check your form #70591201127951 and found that you seems to have delete the third field (3). That is the reason why the delete (x) button is coming in the second line. Please check the screenshot below:

    ¿Como poner campos en otra fila? Image 1 Screenshot 20

     

    I would suggest you to please go ahead and add the third textarea field and we will help you to align the delete button and also the background color as well.

    Thank you!