Setup issues with submit/reset button!

  • stormingrobots
    Asked on April 25, 2017 at 8:05 AM

    I selected one of the provided metalic background. Issues:

    1) only show for the reset button, but not the submit button. Setup issues with submit/reset button! Image 1 Screenshot 20

    2) only show when I press. Can I set it up so that it shows the choosen default background even when it is not pressed?  

    3) font-variant does not work in button setup, it seems.

    /*--- submit button --*/

    #input_80 {

      ...

        font-variant :small-caps !important;

     }

     

    4) hover set up  with shadow does not work either: 

    form-submit-button:hover {

        color : #821515!important;

        font-variant : small-caps!important;

        box-shadow : 0 12px 16px 0 rgba(0,0,0,0.5), 0 17px 50px 0 rgba(0,0,0,0.5) !important;

    }

  • Rose
    Replied on April 25, 2017 at 9:16 AM

    Thank you for reporting us. 

    I checked several of your forms but did not found the correct form. Could you please provide us the form ID for which the specified Css can not be applied properly? Then, we can investigate issue further.

    Waiting for your return. 

  • stormingrobots
    Replied on April 25, 2017 at 1:44 PM


    /63639268386168
    Thank you.
    Sent from my Verizon 4G LTE smartphone
    ...
  • Kevin Support Team Lead
    Replied on April 25, 2017 at 3:45 PM

    I have checked your form and I can see the following: 

    1. The button shows like the screenshot below, as you can also see, the "font-variant" also seems to be already applied: 

    Setup issues with submit/reset button! Image 1 Screenshot 20

    2. The code you have injected for the submit button seems to have a missing point right before the class name. Your current code is like this: 

    form-submit-button:hover {

     

        color : #821515!important;

     

        font-variant : small-caps!important;

     

        box-shadow : 0 12px 16px 0 rgba(0,0,0,0.5), 0 17px 50px 0 rgba(0,0,0,0.5) !important;

     

    }

    It should be like this: 

    .form-submit-button:hover {

     

        color : #821515!important;

     

        font-variant : small-caps!important;

     

        box-shadow : 0 12px 16px 0 rgba(0,0,0,0.5), 0 17px 50px 0 rgba(0,0,0,0.5) !important;

     

    }

    Once you fix this then the box shadow and all the code will be applied. 

    Please, do let us know if there are still some CSS codes not applying to the form, we will be glad to help you.

  • stormingrobots
    Replied on April 25, 2017 at 9:29 PM

    =================  

    Ref to my (1) 

    Setup issues with submit/reset button! Image 1 Screenshot 20

    The metallic background somehow only works for the clear form button, but not the main submit button. 

    Suggestion? 

    ===================          

    Ref to my (4) ... The button shows like the screenshot below, as you can also see, the "font-variant" also seems to be already applied: 

    No, the small-caps do not work. e.g. 

     

    This Is A Sentence Done Without Small Caps. 

    This Is A Sentence Done with Small Caps.  . //as you see  with whichever letter I "capitalize" manually will look bigger in small caps setup.

     

    I figured out that I must do this in order to make it work: 

       font-variant : small-caps !important;

       text-transform: capitalize;!important;

     

    Any other better alternatives?  

  • Rose
    Replied on April 26, 2017 at 2:25 AM

    I'm not sure which part of the css was not applied. Since, I checked your form and css code seems to be applied properly.

    Setup issues with submit/reset button! Image 1 Screenshot 30

     

    In addition, the submit and reset button background color is changed when I added following part to the code on my cloned form. 

    Setup issues with submit/reset button! Image 2 Screenshot 41

    Could you please check again and let us know which parts were not applied on the code? 

  • stormingrobots
    Replied on April 26, 2017 at 9:18 PM

    1)about the small caps.  

    Generally,   text like "I am fine" in small-caps will look like this : "I AM FINE

    However.. The earlier support indicated the following: 

               font-variant : small-caps !important;  

    along has already applied the small-caps effect.  But, it does not.  "I Am Fine",  turned out looking like this instead "I AM FINE".  That's not what small-caps should be.  It should have been :

    "I AM FINE"  instead of "I AM FINE". 

    I suspected the support did not realize that I "capitalized" each word. Thus, he thought small-caps worked all along!?   I found out I had to do the following as well in order to get it to work. :

             text-transform: capitalize;!important;

    with

              font-variant : small-caps !important;  

     From what I understand, just the font-variant : small-caps should have worked by itself.  Would it be because of the Roboto font type!? 

     

    2) about the submit button background.  :

    What you quoted was  an old one.  I put it in there for testing earlier, as the metallic background did not show.  The background tag has been removed.  

    The button was set to the following style, but it won't show like this at all.  What strange is that the clear form will show the meltallic background only when I hover on it. 

    Setup issues with submit/reset button! Image 1 Screenshot 40

    See below, the metallic background shows up ONLY when I  hover over the clear form button.   It does not show the chosen background any other time.

    Setup issues with submit/reset button! Image 2 Screenshot 51

    if I do not hover over either one, it looks like this: 

    Setup issues with submit/reset button! Image 3 Screenshot 62

  • Ian
    Replied on April 26, 2017 at 11:24 PM

    #1 I could not replicate the issue, it may be due to the fact that your computer does not have the specific font installed

    Here is the screenshot of what I see at my end :

    Setup issues with submit/reset button! Image 1 Screenshot 20

    Please read the Article for more details

    http://stackoverflow.com/questions/11935474/why-does-my-font-not-appear-on-some-computers-but-i-can-look-at-other-fonts-on

     

    #2  I am still investigating for #2 issue and will get back to you ASAP

  • Ian
    Replied on April 26, 2017 at 11:41 PM

    Inject the following CSS code to apply the hover effect on Submit button and stable clear button with steel effect

    .form-submit-button-steel:hover {

        color: #555555 !important;

        border: 1px solid #999999 !important;

        background: #d4d4d4;

        background-position: 50% 50%;

        background-image: url(/images/steel.png);

        }

     

        button#input_reset_80 {

        color: #555555 !important;

        border: 1px solid #999999 !important;

        background: #d4d4d4;

        background-position: 50% 50%;

        background-image: url(/images/steel.png);

    }

     

    button#input_80 {

        color: #555555 !important;

        border: 1px solid #999999 !important;

        background: #d4d4d4;

        background-position: 50% 50%;

        background-image: url(/images/steel.png);

    }

  • stormingrobots
    Replied on May 26, 2017 at 9:34 AM

    Since I host the form from my website, I have change the link to the steel.png to http://www.jotform.com/images/steel.png.

    Thank you. 

  • Kevin Support Team Lead
    Replied on May 26, 2017 at 10:47 AM

    @stormingrobots, 

    If you have changed the link to your image then you only need to replace the link used in the CSS code, example:

       button#input_reset_80 {

        color: #555555 !important;

        border: 1px solid #999999 !important;

        background: #d4d4d4;

        background-position: 50% 50%;

        background-image: url(/images/steel.png);  <--- Replace this link with the current one. 

    }

    If you have any question, let  us know.