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

    Styling fancy range slidr widget

    Asked by art_crate on May 09, 2016 at 04:42 AM

    Hello I am having some alignment issues:

     

    Every page is pushed up, progress bar cannot be seen. And on page 5 text is cut off because there is no progress bar

     

    Page 1: 6 options are not centered and next button should be centered

    Page 2: 6 options are not centered

    Page 4: Is there any way to turn fancy slider green instead of red? And can padding be added to the bottom 40px+

     

     

    Thanks for the help!

    It is greatly appreciated! 

    Page URL:
    https://form.jotform.com/61292179785973

  • Profile Image
    JotForm Support

    Answered by liyam on May 09, 2016 at 10:43 AM

    hello art_crate,

    In your widgets in page 1 and page 2, please add this CSS code inside the custom CSS option available in each widget:

    #radiosContainer {
    text-align: center;
    }

    ---

    Regarding page 4, there is no easy way to change the color of the slider via CSS since the silder itself uses an image. But if you have means of hosting the image somewhere, you can download this image, edit, and upload it somewhere: http://widgets.jotform.io/rangeSlider/img/sprite-skin-flat.png

    Once you have the image uploaded you can insert this CSS code in the widget:

    .flatSkin .irs-from:after, .flatSkin .irs-to:after, .flatSkin .irs-single:after { border-top-color: green; }

    .flatSkin .irs-from, .flatSkin .irs-to, .flatSkin .irs-single { background-color: green; }

     

    .flatSkin .irs-line-mid, .flatSkin .irs-line-left, .flatSkin .irs-line-right, .flatSkin .irs-diapason, .flatSkin .irs-slider {
        background: url(http://url.of.your.uploaded.file/sprite-skin-flat.png) repeat-x;
    }

     

    Note: you will need to change the 'green' value with your preferred shade of green matching with the shade that you used in your image.

    Also you will also need to change the value of the background url of the image in the 3rd CSS code.

    I know this is kind of confusing, so feel free to his us back if you have questions.

    Thanks.

  • Profile Image

    Answered by art_crate on May 09, 2016 at 03:39 PM

    Hi llyam,

    Thank you so much for the help!

     

    I was not able to get the slider to turn green, please have a look at my edits. Here is the link to the hosted and edited png. 

    http://i1048.photobucket.com/albums/s380/chrisartcrate/Design%20Survey/sprite-skin-flat_zpsdsq9tsjw.png

     

    On Page 1 - how do I center the Next Button? Back is hidden, so it appears to be offset.

     

    ** On every page the form is pushed up cutting off the progress bar image. How do I move the form down?

  • Profile Image

    Answered by Huberson on May 09, 2016 at 06:01 PM

    You can simply replace the CSS under the Widget CUSTOM CSS tab by the one bellow, and add your sprite URL for the background. 

    .flatSkin .irs-from:after, .flatSkin .irs-to:after, .flatSkin .irs-single:after {

    border-top-color: #76d256;

    }

     

    .flatSkin .irs-from, .flatSkin .irs-to, .flatSkin .irs-single { 

    background-color: #76d256; 

    }

     

    .flatSkin .irs-line-mid, .flatSkin .irs-line-left, .flatSkin .irs-line-right, .flatSkin .irs-diapason, .flatSkin .irs-slider {

        background: url(yourImage.png) repeat-x;

    }

     

    .flatSkin .irs-diapason {

        background-position: 0 -60px;

    }

     

    .flatSkin .irs-slider {

        background-position: 0 -90px;

    }

     

    The Modified clone can be viewed here: https://form.jotform.com/61296349610963

  • Profile Image

    Answered by art_crate on May 09, 2016 at 07:24 PM

    Thanks Huberson,

    This fixed the slider!

  • Profile Image
    JotForm Support

    Answered by jonathan on May 09, 2016 at 10:10 PM

    Thank you for updating us on the status and letting us know issue had been fixed.

    Contact us again anytime should you need further assistance.

    Cheers

  • Profile Image
    JotForm Support

    Answered by liyam on May 10, 2016 at 12:06 AM

    Hello again, art_crate. 

    For your CSS for the 1st page Next button, you can inject this CSS code on your form 

    #cid_122 .form-pagebreak .form-pagebreak-back-container{
    display: none !important;
    }

    If you need to know how to inject CSS on your form, this user guide will help you: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    If you have other questions, please do let us know.

    Thanks.

  • Profile Image

    Answered by art_crate on May 20, 2016 at 05:15 PM

    Hello,

     

    Looks like something broke with the slider and now its red again??? Any help???

     

    https://form.jotform.com/61292179785973

  • Profile Image
    JotForm Support

    Answered by Mike on May 20, 2016 at 06:32 PM

    I have fixed the issue by adding the next CSS to your Fancy Range Slidr widget.

    .flatSkin .irs-bar {
    background: none;
    background-color: #76d256;
    }

    Thank you.

  • Profile Image

    Answered by art_crate on May 20, 2016 at 06:39 PM

    Awesome! Thanks Mike!!

  • Profile Image

    Answered by tjwylie on January 05, 2017 at 05:30 PM

    Hi folks,

    any insight as to how to remove the red 'cap' on the left of the slider?

     

    https://www.jotform.com//?formID=70025981118150

  • Profile Image
    JotForm Support

    Answered by jonathan on January 05, 2017 at 08:36 PM

    @tjwylie

    We will resolve your issue here https://www.jotform.com/answers/1027086