This PR aims to improve VGS styling defaults over what EN provides. EN will attempt to detect styles on a visible text field element and apply those as defaults to the VGS fields. It does this in 2 ways:
creating a set of custom CSS properties that will be used by the VGS container div on the EN page
defining a few custom styles to pass to the VGS javascript
This can fail in numerous scenarios - the most obvious of which is when you don't have a visible text field on the page.
This PR instead will pass the ENgrid theme styles into the custom CSS properties and the VGS JavaScript, ensuring the field is always styled properly.
These are 2 caveats to this if you want to guarantee always perfect styling:
You must manually provide the --en-vgs-height CSS custom property in your theme. This is a combined total of the "outerHeight" of your text field.
You must provide a fontFace property to your VGS options in ENgrid constructor containing a CSS font-face declaration.
This PR aims to improve VGS styling defaults over what EN provides. EN will attempt to detect styles on a visible text field element and apply those as defaults to the VGS fields. It does this in 2 ways:
This can fail in numerous scenarios - the most obvious of which is when you don't have a visible text field on the page.
This PR instead will pass the ENgrid theme styles into the custom CSS properties and the VGS JavaScript, ensuring the field is always styled properly.
These are 2 caveats to this if you want to guarantee always perfect styling:
--en-vgs-heightCSS custom property in your theme. This is a combined total of the "outerHeight" of your text field.fontFaceproperty to your VGS options in ENgrid constructor containing a CSS font-face declaration.See this commit on AIUSA for an example of these 2: https://github.com/4site-interactive-studios/engrid-aiusa/commit/0ad3fb544c47205e7620cdaef94495abce5fca71