Image Checkbox Widget: How to add custom CSS code to customize the images?

  • Profile Image
    snaplash
    Asked on February 20, 2016 at 09:40 AM

    Hello Jotform!

     

    I am trying to Customize a few things on this widget - could you point me in the right direction please?

     

    Justify/Align the widget to the right of the form

    Remove Border-radius

    Keep the size at 50px x 50px

     

    I have tried to do all these things but cannot get their div names

    https://form.jotform.com/60504200689956

     

    Thank you again Jotform!

  • Profile Image
    Kevin_G
    Answered on February 20, 2016 at 09:56 PM

    I will provide the code for each thing that you want to achieve.

    Justify/Align the widget to the right of the form

    li {

        margin-left: 100px;

    }

    You may try using a different value rather than use 100px.

    Remove Border-radius

    li img{

        border-radius:0px;

    }

    Keep the size at 50px x 50px

    li, li img {

        width: 50px;

        height: 50px;

    }

    Inject the CSS code by clicking on the widget, then on the wizard icon.

    Then click on the CSS tab and paste the code provided above.

    Hope this helps.

  • Profile Image
    snaplash
    Answered on February 20, 2016 at 10:06 PM

    Thank you so much!

    Just one more thing, how do I maintain the 

    border-radius:0px; after it is clicked?

     

    Thank you Kevin!

     

    Mark.

  • Profile Image
    Kevin_G
    Answered on February 20, 2016 at 11:15 PM

    You're welcome.

    Sure, just add this CSS code:

     li.checked img {

        border-radius: 0px;

    }

    Do let us know how it goes.

  • Profile Image
    snaplash
    Answered on February 20, 2016 at 11:51 PM

    thank you very much!

    Do you have an article to show me how you get the names to apply the styles to?

    for example - where do you find  li.checked img 

    I am trying to customize the check box and cannot figure it out.

     

  • Profile Image
    Kevin_G
    Answered on February 21, 2016 at 01:04 AM

    If you are using the normal fields, you may follow this guide to get the names and IDs: http://www.jotform.com/help/146-How-to-find-Field-IDs-Names

    However, it does not work when you are using a widget, because they work with a different method than the normal fields, to know the name or ID of an element, you will need to inspect it using the web console, follow these steps.

    1. Right click on the element that you want to know the name/ID and then click on inspect.

    2. You will find the ID of the element, if it would be a form field such as a text field, radio button, check boxes, you will find the name as well.

  • Profile Image
    snaplash
    Answered on February 22, 2016 at 02:26 PM

    Thank you for that info!

     

    I am still having a problem aligning the image checkbox to the right.

    When I add

    li {

        margin-left: 900px;

    }

    as you suggested it disappears. Any suggestions?

  • Profile Image
    Kevin_G
    Answered on February 22, 2016 at 03:38 PM

    Yes, it will disappear because the field is 900px to the left of the original position, so it is going out of the window, try using a different value such as 200px.

  • Profile Image
    snaplash
    Answered on February 22, 2016 at 04:00 PM

    Unfortunately it disappears after 250px

    how can I justify it to the very right of the form?

    float:right; wont work

  • Profile Image
    Kevin_G
    Answered on February 22, 2016 at 05:13 PM

    Inject this CSS code:

    #id_4 iframe{

        width:100% !important;

    }

    It will display the element where is added the widget on the same with than the form, then you will be able to set the margin-left property for the image to a maximum value of 560px.

  • Profile Image
    snaplash
    Answered on February 24, 2016 at 12:07 AM

    Thank you again Kevin.

    I am still unable to get my head around this. how do I control the checkbox then? ie remove the chech completely In the Inspect Element thie below works:

    .radio {

         background: none!important;

        }

    I cannot figure how to put this into the widget CSS or the Designer CSS. I moved the form to:

    https://form.jotform.com/60538081718963?

     

  • Profile Image
    Welvin
    Answered on February 24, 2016 at 08:31 AM

    .radio {

    display: none;

    }

    .checked .radio, .checked .radio:hover {

    display: none;

    }

    You can inject the above custom CSS codes to your widget to hide the radio button circle, checked/unchecked option.

  • Profile Image
    snaplash
    Answered on February 24, 2016 at 08:33 AM

    Thank you so much, I know this thread has dragged on...

    Its appreciated.

    One again thank you both.

     

  • Profile Image
    snaplash
    Answered on February 24, 2016 at 08:40 AM

    Apologies Welvin, This solution is not working.

     

    I injected the code and nothing changed. I added !important

     

    .radio {

        display: none!important;

        

    }

     .checked .radio, .checked .radio:hover {

        display: none!important;

        

     

    Still nothing. Do I need to add #text_80?

  • Profile Image
    Welvin
    Answered on February 24, 2016 at 10:10 AM

    I mean, you have to inject the codes right into the widget CSS area, not to your form. I just did it for you.

  • Profile Image
    snaplash
    Answered on February 24, 2016 at 10:13 AM

    Thank you!

    Resolved!