Setup issues with submit/reset button!

  • Profile Image
    stormingrobots
    Asked on April 25, 2017 at 08:05 AM

    I selected one of the provided metalic background. Issues:

    1) only show for the reset button, but not the submit button.

    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;

    }

  • Profile Image
    Rose
    Answered on April 25, 2017 at 09: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. 

  • Profile Image
    stormingrobots
    Answered on April 25, 2017 at 01:44 PM


    /63639268386168
    Thank you.
    Sent from my Verizon 4G LTE smartphone
    ...
  • Profile Image
    Kevin_G
    Answered on April 25, 2017 at 03: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: 

    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.

  • Profile Image
    stormingrobots
    Answered on April 25, 2017 at 09:29 PM

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

    Ref to my (1) 

    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?  

  • Profile Image
    Rose
    Answered on April 26, 2017 at 02: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.

     

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

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

  • Profile Image
    stormingrobots
    Answered on April 26, 2017 at 09: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. 

    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.

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

  • Profile Image
    Ian
    Answered 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 :

    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

  • Profile Image
    Ian
    Answered 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);

    }

  • Profile Image
    stormingrobots
    Answered on May 26, 2017 at 09: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. 

  • Profile Image
    Kevin_G
    Answered 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.