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

    How to Style Buttons/Navigation on a Paginated ImagePicker Widget

    Asked by eyeconic on June 27, 2014 at 05:05 PM

    The CSS for the Widget is located here:

    http://widgets.jotform.io/imagePicker/css/imagePicker.css

    So I copied the CSS from this file and reformatted the appropriate CSS Classes and injected the custom CSS into my code.

    I did not, however apply the !important tag to any of the CSS selectors thinking I would not need to, but I would like the ability to stylize the buttons on the bottom of the paginated image selector. Maybe even setup left to right slider arrows. This option does not exist in the settings of the widget and it is very limited. You cannot even change the color of the buttons from the widget settings. This is very inconvenient. 

    I have since removed my CSS from the injection because it was causing the form builder to act funny. 

    The idea here is to let the customer select the Layout Template they want, and then tell us what content they want to go into these sections. However it is not touch/swipe enabled like the other widget so it is not very intuitive and the bullet buttons on the bottom are hardly even noticeable and I could see a lot of issues arising from this. It would also be nice to center these buttons below the image as they are currently setup to float left.

    Here is what I came up with:

    #buttons { font-size: 0px; padding: 8px 4px; float: left; position: relative; left: 50%; } .button { margin-left: 5px; height: 50px; width: 50px; float: left; position: relative; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; left: -50%; border: 5px solid #333; color: #96CB01; text-indent: -1000px; cursor: pointer; }

    Page URL:
    http://form.jotformpro.com/form/41666393659974?

    style Form Builder JotForm size template
  • Profile Image
    JotForm Support

    Answered by david on June 27, 2014 at 05:22 PM

    Hi,

    From my past experience adding the !important tag when dealing with CSS issues in our forms has helped greatly.  There are often conflicts with the CSS inherent in the page and the CSS being injected from the form.  When you add the !important tag to your injection fields, it forces the override of any other css in the page.  I have submitted a feature request to allow for the changing of button colors without having to use CSS.  I believe this is something that might be useful across all parts of the forms, not just the imagepicker widget.  Try forcing the CSS and let us know if you are still having issues and we will be happy to look into it further.

    Thank you for using Jotform!

  • Profile Image

    Answered by eyeconic on June 27, 2014 at 06:03 PM

    The problem is that the widget is being loaded within an iFrame. Therefore none of the CSS classes can be applied.

  • Profile Image
    JotForm Support

    Answered by david on June 27, 2014 at 06:16 PM

    Hi,

    Have you tried another method of embedding you form?  This may allow for better CSS interactions.

    http://www.jotform.com/help/67-Which-Form-Embed-Code-Should-I-Use

    Though the iFrame method is the most compatible, it may not be the best for what you are trying to accomplish.  Please let us know if this does not help and we will be happy to look into it further.

    Thank you for using Jotform!

     

  • Profile Image

    Answered by eyeconic on June 27, 2014 at 06:17 PM

    I didn't say I was loading the iframe method. I said the widget itself is being loaded into the form via an iframe. If you look at the source code, you will see what I am talking about. You can click the link above to see my form in its pure form.

     

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

  • Profile Image
    JotForm Support

    Answered by david on June 27, 2014 at 06:29 PM

    Hi,

    I understand why it needs to be inherent to the widget now.  Since the widget itself loads within an iFrame, css interactions are not acting as they should.  Did you try forcing the CSS?  I updated my feature request to include the more detailed information.  Please let us know and we will be happy to look at your issue again.

  • Profile Image

    Answered by eyeconic on June 27, 2014 at 06:32 PM

    The way iframes work you actually cannot even force css to be applied to the content. Its a completely separate page with separate HTML and Styles. This widget has absolutely zero customization features and is almost useless at this point. I had to remove pagination to get it to work but it looks terrible at this point. 

    To add to your feature request, I would add multiple navigation options. Bullets, thumbnails, arrows, etc. As well as a swipe feature.

  • Profile Image
    JotForm Support

    Answered by david on June 27, 2014 at 06:50 PM

    Hi,

    I'll pass this along to our engineering team to see if there is something they can suggest.  Thank you for your patience.  Check back to this thread for a reply.

  • Profile Image
    JotForm Support

    Answered by david on June 27, 2014 at 07:08 PM

    I did a bit more checking, if you embed the form into a webpage you can dynamically adjust the settings of an iFrame using jQuery.  This does not help when using a form hosted from out servers.  But you may be able to use the source code for your form to add it to your page, and then change it on load.  Here is a little more information about what I'm saying.

    http://stackoverflow.com/questions/16658609/iframe-change-content-css-style