Custom CSS code for Spreadsheet 2 Form Widget

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.

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

Regards, Robert 

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.

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

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.

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

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.

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

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

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.

Hi David,

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

Best Robert