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

    CSS to use to align radio labels above the selectors/input buttons

    Asked by markashton on April 24, 2012 at 05:35 AM

    Hi,

    Can someone advise me on what CSS would be required to align the labels on the radio buttons so that they reside above the selectors ....

     

    The objective is to achieve something along these lines ...

    http://screencast.com/t/gsvT3Q6d2kW

    Currently looks like this ....

    http://form.jotformpro.com/form/21142315444947

    I'm not quite sure on the CSS to use .. note please don't advise to use matrix tool - you can't report on anything via graphs.

    Thanks

  • Profile Image

    Answered by markashton on April 24, 2012 at 01:33 PM

    ?

  • Profile Image

    Answered by jeanettebmz on April 24, 2012 at 05:32 PM

    @marashton

    In order to accomplish what you are looking for , choose the Matrix form that you can find under the Survey Tools menu.

    Then, customize to your needs.  From the tool bar, choose the number of columns and rows , as shown in example below

     

     

    You can even select the input type to be used (radio button, check box , text box, dropdown menu),  just click on the Input type button next to the Columns button

    Hope this helps you. Feel free to come back if you need further assistance

    Jeanette

  • Profile Image

    Answered by markashton on April 24, 2012 at 06:13 PM

    Hi, Thanks for that but ....

    Respectfully, anyone who gets to the point of requesting how to align the labels above radio buttons has probably found the matrix tool. I found it two years ago.

    Yeah, the matrix tool is in theory good .... but in practice utterly useless!

    Reason? you cannot graph anything. Your picture above shows the great promise of pie charts for service quality ... overall hygiene, etc. Can you graph the results?... No. So, it's just a bit of eye candy ... unless you want to then tell your paying customers that they will have to go into excel and do the graphs thenselves.. at which point they will tell you to "do one!". So, I reckon you should remove the matrix tool because it's of no use in its current state. I'm all ears if you think otherwise ;) If interested here's a thread I've spent loads of time on for $0 . Check this for a long post .. http://www.jotform.com/answers/12249-Matrix-Survey-Tool-Limitations

    So, Would anyone be kind enough to advise me on what CSS would be required to align the labels on the radio buttons so that they reside above the selectors ....? I'd be most grateful. Can't seem to work out the position aspect of it all.

    many thanks, Mark

  • Profile Image

    Answered by jeanettebmz on April 24, 2012 at 10:30 PM

    My apologies if my answer was not satisfactory.

    Let me do some tests with CSS.

    I know my colleagues should be looking for a CSS coding solution as well.

    Jeanette

  • Profile Image

    Answered by markashton on April 25, 2012 at 04:43 AM

    Jeanette,

    I do sound a misery in my post above ... sorry about that ... it's this enormous hack I'm doing to get individual graphs for customers ... if the matrix tool was just graphable ... one can dream eh?

    I understand that we are dealing with the following CSS for this form: http://form.jotformpro.com/form/21142315444947

    I just can't work out what to put in here to make the label move around

     

    .form-radio-item label {

    margin-left5px;

    }
    Thanks
  • Profile Image
    JotForm Support

    Answered by abajan on April 25, 2012 at 06:25 AM

    Hi Mark

    You can use attribute selectors to move each label to your liking. The values for each of them are input_4_0input_4_1input_4_2 and input_4_3 respectively. So, as an example, if you want to re-position the third label ("Neutral"), you might use the following rule:

    [for=input_4_2] {
    position: absolute;
    top: 30px;
    left: 190px;
    }

    Information on CSS positioning can be found here

    Hope this helps.