Configurable List: Changing width of number field

  • Profile Image
    paulshustak
    Asked 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? 

     

  • Profile Image
    Boris
    Answered 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.