Edit CSS for Image Checkboxes Widget

  • vito1202
    Asked on June 17, 2014 at 3:21 AM

    hello all and sorry for my english. 

    I have a question. 

    I would like to change the appearance of the individual boxes of the image widget checkboxes to make them appear the same as the image picker widget. 

    I wonder, is it possible to act through css? 

    and if you like I can do '. 

    my problem is that the appearance of the widget image checkboxes just do not like and I have to use it mandatory because with the image picker widget you can not use the conditional fields. 

    In other words, I would make the same image checkboxes aesthetically image picker without losing the characteristic of the conditional fields. 

    thanks

  • Carina
    Replied on June 17, 2014 at 9:58 AM

    Unfortunately it is not possible to add css to widgets.  

    From my tests it is possible to use conditions with Image Picker widget. You can test the form by selecting one the images that will show other field:

    http://form.jotformpro.com/form/41673574821964?

    Is there a specific condition you are trying to implement?

    If you need further support please let us know.

  • vito1202
    Replied on June 18, 2014 at 2:04 AM

    this is great. 

    but I do not know how to operate the conditions in my form. 

    I tried but does not work with image picker. 

    Can you explain how I should do please?. 

    thanks

  • Elton Support Team Lead
    Replied on June 18, 2014 at 3:31 AM

    @vito1202

    It is possible to inject custom CSS codes on Image Checkboxes Widget. It is available on its settings.

    Edit CSS for Image Checkboxes Widget Image 1 Screenshot 20

    ----

    Paste the CSS codes from the link below on the image checkbox widget inject CSS box to mimic the layout of the image picker widget.

    http://pastebin.com/raw.php?i=TJpAVEyz

    Hope this helps!

  • vito1202
    Replied on June 18, 2014 at 4:24 AM

    thanks, this is perfect for me.
    Thank you very much.
    now I ask one last help, I would like to put all the images in the same row, I would like to reduce the space between image and the other just like the image picker widget, thank you.

  • Elton Support Team Lead
    Replied on June 18, 2014 at 6:00 AM

    @vito1202 

    Add the following on the widget CSS  box to make images closer to each other.

    li {

    padding:0 !important;

    margin: 10px 2px !important;

    }

    Then you must also expand your widget width so the images aligns on the same line.

    Here's how:

    Edit CSS for Image Checkboxes Widget Image 1 Screenshot 20

    Cheers!

  • vito1202
    Replied on June 20, 2014 at 2:10 AM

    this is perfect, thank you. 

    I have noticed a problem, I Crato conditions and I natato that if you choose an option and it goes on but then you go back, even if the conditions remain should disappear. 

    Why this?

  • Jeanette JotForm Support
    Replied on June 20, 2014 at 10:41 AM

    Your last post contains an unrelated question. I have opened a new thread for it, please follow up there

     

  • vito1202
    Replied on June 20, 2014 at 10:56 AM

    The first 2 images show correctly my condition.Edit CSS for Image Checkboxes Widget Image 1 Screenshot 40

    this condition displays everything correctly if I click for the first time

    Edit CSS for Image Checkboxes Widget Image 2 Screenshot 51

    this condition is correct because the first time I clicked on the option.

    Edit CSS for Image Checkboxes Widget Image 3 Screenshot 62

    but if I clicked on these options and then I'll want to go back, then the condition is as thought they were stored in memory.
    But this is not correct.
    When I click on the iPhone, after clicking on the iPad, the option wi and wi + cellular should disappear and instead remains.
    Please see it live on my site.

    http://www.bvitech.it/index.php?option=com_k2&view=item&layout=item&id=17&Itemid=197


    thanks

     

     

  • Ashwin JotForm Support
    Replied on June 20, 2014 at 1:01 PM

    Hello vito1202,

    Please create a new thread for every unrelated question you may have. I have moved your last question to a new thread and it will be answered in the following thread:  http://www.jotform.com/answers/394237

    Thank you!