Is there a custom CSS that will allow specific alignment of the fields in the configurable list?

  • Profile Image
    rplattjr
    Asked on June 02, 2019 at 01:04 PM

    Is there a custom CSS that will allow specific alignment of the fields in the configurable list? Also, is it possible to format the placement of the labels for the radio buttons?

  • Profile Image
    Welvin
    Answered on June 02, 2019 at 02:24 PM

    How do you like to align the fields?

    Yes, the labels can be adjusted, and it should be possible with custom CSS codes. 

    Please let us know the form URL and the specific configurable list widget that you'd like to style. That way, we can help you get the correct CSS codes. 

  • Profile Image
    rplattjr
    Answered on June 02, 2019 at 09:41 PM

    Just want to be able to change the alignment of any of the configurable lists really. Would like to place the word reading ohms on the same line and adjust the horizontal positioning.


    Input 134

    https://form.jotform.com/91485149356163

     

  • Profile Image
    Nik_C
    Answered on June 03, 2019 at 02:23 AM

    You have to find the CSS class/ID of the field you want to adjust, maybe this article could help: https://stories.jotform.com/how-to-use-chrome-devtools-like-a-pro-b9bd414870e3

    For example, for ohm column you can use this CSS to adjust the label:

    th.col3 {

        position: relative;

        top: 11px;

    }

    Just change the number, increase/decrease to move it up and down.

    And insert the related CSS to your Configurable List custom CSS.

    Is that what you had in mind?

  • Profile Image
    rplattjr
    Answered on June 03, 2019 at 10:38 AM

    This moves the field name but not the actual field. I can make this work but changing the label alignment for the entire list. Was hoping to get the name for the field and the field on the same line. 

  • Profile Image
    Welvin
    Answered on June 03, 2019 at 12:10 PM

    How about adding a static text next to it? That will do it.

    15595782352019-06-04-001.png