How to increase the space between columns with Custom CSS codes?

  • Profile Image
    Info4SCG
    Asked on November 02, 2017 at 07:09 AM

    How to custom CSS in order to increase the space between columns?

    Thank you very much in advance.



    This is a re-post of a comment on How to Set Up the Configurable List Widget

  • Profile Image
    Welvin
    Answered on November 02, 2017 at 09:27 AM

    You seem to have figured it out already. If you still need to modify the spacing, let us know the field so we can guide you about it. 

    Basically, you need to inject a custom CSS codes to do it. You can use positioning and left margins, example:

    th {

        left: 20px !important;

        position: relative;

    }

    td {

        left: 5px !important;

        position: relative;

    }

    Here's how to inject a custom CSS Codes in the widget: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets

  • Profile Image
    Info4SCG
    Answered on November 02, 2017 at 10:09 AM

    Thanks Welvin for such promptly reply. May i know how to change the width of field?

    Thanks again.

  • Profile Image
    Welvin
    Answered on November 02, 2017 at 10:25 AM

    For the entire input field width, you can inject the following custom CSS codes:

    input[type=text] {

        width: 100px !important;

    }

     

    If this is for the specific input field, add the class selector .col1 or .col2, and so on. Example:

    .col1 input[type="text"] {

        width: 200px;


    }

     

  • Profile Image
    Info4SCG
    Answered on November 02, 2017 at 10:32 AM

     Million thanks to Welvin !


  • Profile Image
    technisourcetraining
    Answered on November 22, 2017 at 02:48 PM

    I get that the first column is named "Td" and "Th" for the text caption and text box respectively. But

    how do I add a space between the first column and second column
    (i.e, what are the names of other columns)?
  • Profile Image
    Sabbir
    Answered on November 22, 2017 at 02:55 PM

    @technisourcetraining

    I have opened a new thread of your query to keep things in order.

    Please find it here: https://www.jotform.com/answers/1305197