Table spacing not working out

  • Profile Image
    ranxero
    Asked on April 10, 2019 at 11:28 PM

    I have a form, Jobsite Hazard..., in it there is a table with radio buttons for the various hazard risks. Recently it looks bigger on screen and I lose the right column. I changed it a bit to make it narrower, but to no avail. Now it fits, but it crams up the words in the first column, and makes the radio button columns wider than necessary. I have tried many things, but it is not working for me. Note: it only does this on the phone preview (and my phone too).

    Help!

  • Profile Image
    Nik_C
    Answered on April 11, 2019 at 01:48 AM

    Could you please advise which column you would like to adjust:

    1554961516Screen Shot 2019-04-11 at 7.43

    1554961527Screen Shot 2019-04-11 at 7.43

    The above images are viewed on the phone's resolution.

    How would you like to adjust them?

    Thank you!

  • Profile Image
    ranxero
    Answered on April 11, 2019 at 07:13 PM

    I would like to be able to increase the size of the first column (the text). It seems to smoosh the first column and make the radio button columns too wide. 

  • Profile Image
    Kevin_G
    Answered on April 11, 2019 at 09:26 PM

    Try injecting the following CSS code: 


    #id_12 table tr td{

        width: 10px !important;

    }

    Let us know how it goes. 

  • Profile Image
    ranxero
    Answered on April 11, 2019 at 11:13 PM

    Hi,

    I tried the above CSS code. I think I put it in the right spot. It does seem to have changed. I cannot understand why it makes the first column so narrow, even breaking up individual words. I tried putting in a nbsp between words, and it just breaks it before the space.

  • Profile Image
    Richie_P
    Answered on April 12, 2019 at 01:15 AM

    You may try these custom CSS

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

    {

      th.form-matrix-column-headers

      {

        min-width: 10px !important;
       }

    }

    Sample Screenshot:

  • Profile Image
    ranxero
    Answered on April 12, 2019 at 09:34 PM

    Thanks Richie_P,

    Your code got it done.