Custom CSS code for Spreadsheet 2 Form Widget

  • Profile Image
    AgilityAssoc.Canada
    Asked on July 29, 2018 at 08:44 PM

    Hi,

    On my Dog-ID Form 61013950784960, I use the Spreadsheet 2 Form widget.

    I have used custom css code for the widget so it has the appearance to match my form.

    There is a little problem with the hover portion. It doesn't react to the mouse pointer when it is over the button until it is half the button width and half of the button height.

    1532911338hover.png 1532911407hover-2.png

    Question is how do I make it reactive for the full button size? 

    Regards, Robert 

  • Profile Image
    arda
    Answered on July 30, 2018 at 01:26 AM

    Hi,

    You should add the below CSS code. If you curious the problem, the .form-widget-curtain element is an empty element and it's front of the button. So you can't hover or click it.

    #stage .form-all #id_49 .iframe#customFieldFrame_49{
      position: relative;
      z-index:9;
    }

    Best Regards.


  • Profile Image
    AgilityAssoc.Canada
    Answered on July 30, 2018 at 09:37 PM

    Hi,

    I add this code and found no difference in the reaction to mouse over.

    I did some research and apparently this is a common issue and because I have limited code application options not easily fixed. I did increase the height and it seamed to increase the reaction area.

    Perhaps you might have another suggestion.

    Best Robert

  • Profile Image
    ashwin_d
    Answered on July 31, 2018 at 02:51 AM

    I have injected the following custom css code in your form and that seems to have fixed this issue:

    #cid_49 > div {

        position: relative;

        z-index: 9 !important;

    }

    I would suggest you to please test your form again and get back to us if the issue persists.

  • Profile Image
    AgilityAssoc.Canada
    Answered on July 31, 2018 at 09:52 AM

    OK...

    That works , if it is placed in the proper location.

    I assumed that the css code would be installed in the widgets custom code not in the injected code. 

    It is a bit confusing when there are two options. But the end justifies the means. 

    Can you explain why you inject the code and it works but not in the widgets custom code field.

     

    Thanks for the resolution.

    Best regards, Robert

  • Profile Image
    david
    Answered on July 31, 2018 at 11:47 AM

    Widgets load in frames and cannot be adjusted from outside of the widget.  Sometimes it is necessary to target an element in the widget directly, which is what the widget CSS section allows for.  An example would be changing the color of a label in the widget.  Sometimes it is necessary to target the widget as a whole or a part of the widget.  An example of that would be if you wanted to change the position of the widget in the form.  That can be done from the regular CSS menu since it doesn't attempt to change anything inside the widget.

  • Profile Image
    AgilityAssoc.Canada
    Answered on July 31, 2018 at 02:39 PM

    HI,

    OK now I get it, I just have to realize what it it is I want to do to the widget. Although I don't think I understand exactly what the code is doing, except perhaps that it is placing the element in the foreground, in front of the button.

    Thank you David, as usual good explanation.

    Regards, Robert

  • Profile Image
    AgilityAssoc.Canada
    Answered on August 01, 2018 at 09:56 AM

    Hi,

    Perhaps it was missed, but I did have a further question;

    Although I don't think I understand exactly what the code is doing, except perhaps that it is placing the element in the foreground, in front of the button.

    Regards, Robert

  • Profile Image
    david
    Answered on August 01, 2018 at 11:21 AM

    Your interpretation is correct as far as I can tell.  The code moves the curtain element above the button on the z axis.  If you think of it as two pieces of paper stacked on top of each other, the piece of paper on the bottom has the mouse over element.  Moving the piece of paper on the bottom to the top allows for the mouse over to function.

  • Profile Image
    AgilityAssoc.Canada
    Answered on August 01, 2018 at 11:25 AM

    Hi David,

    Thank you. great minds think alike. Have a good day.

    Best Robert