Input column labels looks narrower on iPhone

  • Profile Image
    OceanAcupuncture
    Asked on November 03, 2017 at 09:10 PM
    On the iPhone, the columns lables in the table field are only 2-4 characters wide, so the labels are splitting across several rows. Can I set the table columns as a percentage value? I would have the question as 2/8ths and each response column as 1/8th.
  • Profile Image
    EltonCris
    Answered on November 03, 2017 at 09:21 PM

    Do you want the column headers to be in single line? If yes, inject this CSS codes.

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

    .form-matrix-column-headers {

        padding: 0 2px;

        font-size: 11px;

        word-break: normal;

    }

    th.form-matrix-row-headers {

        font-size: 11px;

    }

    .form-matrix-row-headers {


        word-break: break-word;

    }

    }

    In this CSS, I also reduced the font size with 1px so it adds an extra space and the row headers should break in words, not by letters. It should look like this afterward.

  • Profile Image
    OceanAcupuncture
    Answered on November 03, 2017 at 10:27 PM

    Thanks, now it displays the column headers in a single line in portrait orientation - but the table extends beyond the section border, so it doesn't look so great.

    In landscape view, the column headers stack up as before. I would prefer that the questions (field labels) stack rather than trying to appear in a single line and pushign the radio buttons columns so small.

    Please suggest a way to fix this.

  • Profile Image
    EltonCris
    Answered on November 03, 2017 at 10:56 PM

    Your form hasn't consumed the full width when viewing on mobile. Setting its max width to 100% might help with the overlap issue.

    To do that, inject this CSS.

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    .form-all {width: 100% !important;}

    }

    The first CSS code I've provided only affects portrait mode. 

    If you want to control the width of the row headers on landscape mode too, use this CSS codes.

    @media screen and (max-device-width: 768px) and (orientation: landscape){

    .form-matrix-table tbody > tr:first-child th:first-child {

        width: 120px !important;

    }

    }

    Change 120px to your preference.

    Please let us know how it goes. Thanks

  • Profile Image
    OceanAcupuncture
    Answered on November 04, 2017 at 12:51 AM

    Thanks but can I use 100% on landscape too? I don't have much to do with code, so you'll have to explain it to me sorry. What should my preference be for pixel width? I googled it and screens seem to vary a bit.

    Please just tell me the value to enter, this one form has taken me one solid day so far and I thought this was going to be quite quick!!  I appreciate your help, and the flexibility, but I feel like now every time I fix one thing something else gets broken and it's getting a bit confusing.

  • Profile Image
    EltonCris
    Answered on November 04, 2017 at 04:05 AM

    We understood. The form and the input table are already mobile responsive so it works perfectly fine on mobile, but we will do our best to achieve the desired layout you prefer.

    Am I right to understand that you want to expand the entire input table in full width on landscape too?

    Like this?

    If yes, inject this CSS codes to your form.

    @media screen and (max-device-width: 768px) and (orientation: landscape){

    [data-type="control_matrix"] .form-input, .form-all{

        width: 100%;

    }}

  • Profile Image
    OceanAcupuncture
    Answered on November 04, 2017 at 05:39 PM

    Thanks, I think all the extra CSS got reset when I reapplied the theme. Since then all the fields are staying within the form boundary. I think with small screens it's never going to be super easy to read so this will be good enough, thanks!

  • Profile Image
    BDAVID
    Answered on November 04, 2017 at 07:27 PM

    On behalf of my colleague, you are welcome! Open a new thread if you need anything else, we will be glad to assist you.