What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Configurable List: Changing width of number field

    Asked by paulshustak on March 30, 2016 at 05:21 PM

    I'm trying to make this table as narrow as possible so it will display on a mobile device without scrolling horizontally

    is it possible to make the number field narrower via CSS? 

     

    Page URL:
    https://form.jotform.com/60891769938174

    configurable list configurable Mobile table mobile device narrower
  • Profile Image
    JotForm Support

    Answered by Boris on March 30, 2016 at 07:50 PM

    Yes, you can achieve that by using a bit of custom CSS in your widget. I see that your current CSS is already forcing the second column (the one with the number field) to be at least 120 pixels, which means that no matter how small the Number field is - its column will always take at least 120 pixels.

    In order to change that, I would recommend removing th.col2 from the following part of the code:

    th.col2, th.col3 {
        min-width: 120px;
    }

    and adding max-width: 72px; into the following part:

    .stepper-wrap input.stepper {
        width: 100%;
        max-width: 72px;
    }

    Your full custom CSS in the widget would end up being this:

    .checkbox, .radio {
    margin: 3px 0;
    min-width: 70px;
    }
    .checkbox, .radio {
     display:inline;
    }
    .add{
     display:none;
    }

    span[title="Monday"]:before {
        content: "Mo";
        font-size: 11px;
    }
    span[title="Tuesday"]:before {
        content: "Tu";
        font-size: 11px;
    }
    span[title="Wednesday"]:before {
        content: "We";
        font-size: 11px;
    }
    span[title="Thursday"]:before {
        content: "Th";
        font-size: 11px;
    }
    span[title="Friday"]:before {
        content: "Fr";
        font-size: 11px;
    }
    span[title="Saturday"]:before {
        content: "Sa";
        font-size: 11px;
    }
    span[title="Sunday"]:before {
        content: "Su";
        font-size: 11px;
    }
    table#list th {
     border: 1px solid;
     padding: 3px!important;
    }
    table#list td {
     padding: 3px!important;
     border: 1px solid;
    }
    .col2 .stepper-btn-wrap {
    display: none;
    }

    select.y {
    display: none;
    }
    select.m {
    width: 46px;
    }

    th[scope="col"] span {
        font-size: 0;
    }
    .ui-datepicker table {
        background: #EEE;
    }
    .ui-datepicker-inline {
        position: relative;
        z-index: 1;
    }
    #list tbody > tr:nth-child(2) td div.dateContainer .dateDrowdowns:before {
        content: "Mon ";
    }
    #list tbody > tr:nth-child(3) td div.dateContainer .dateDrowdowns:before  {
        content: "Tue ";
    }
    #list tbody > tr:nth-child(4) td div.dateContainer .dateDrowdowns:before  {
        content: "Wed ";
    }
    #list tbody > tr:nth-child(5) td div.dateContainer .dateDrowdowns:before  {
        content: "Thu ";
    }
    #list tbody > tr:nth-child(6) td div.dateContainer .dateDrowdowns:before  {
        content: "Fri ";
    }
    #list tbody > tr:nth-child(7) td div.dateContainer .dateDrowdowns:before  {
        content: "Sat ";
    }
    #list tbody > tr:nth-child(8) td div.dateContainer .dateDrowdowns:before  {
        content: "Sun ";
    }
    th.col3 {
        min-width: 120px;
    }
    .stepper-wrap input.stepper {
        width: 100%;
        max-width: 72px;
    }

    This is how the widget would end up looking:

    Please try it out, and let us know if you need any further assistance.