How to Style Buttons/Navigation on a Paginated ImagePicker Widget

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; }

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!

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

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!

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?

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.

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.

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.

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