This breaks the Location set to Relative to element

[prolitariat]

Relative to element location settings don't function when this is enabled, deleting the custom code snippet resolves issue.

[prolitariat]

The custom snippets responsible are:

• https://github.com/pendo-io/snippets/blob/master/guides/guidePolls/conditionalTextBoxRadioButton/conditionalTextBoxRadioButton.js

• https://github.com/pendo-io/snippets/blob/master/guides/guidePolls/multiSelectCheckboxPolls/multiSelectCheckboxPolls.js

[fortynachos]

Are you able to provide any console errors that you're seeing? I'm unable to reproduce this error on our test apps. Screenshot above of a sample guide with the multi select checkbox snippet.

[fortynachos]

@prolitariat Thanks for the video! So, this is a CSS issue which has an easy fix for individual use cases, but a much more complex fix to handle all cases like this.

The short explanation is the Pendo guide container positioning is calculated dynamically based on the guide container height (ie, the contents that are inside the guide). Since the height is calculated before the code block code executes, Pendo places the guide where it should be if the invisible objects are present:

Screen.Recording.2023-01-10.at.9.59.15.AM.mov

The quickest way to fix this would be to hardcode the height like so (you may need to adjust the pixel height):

#pendo-guide-container {
  height: 500px!important;
}

I'll chat with our product team -- it's long overdue for us to support multi-select checkboxes out of our product, so that will determine whether or not I implement a more scalable hack-fix.

[prolitariat]

Appreciate the quick reply! :) So, the solution is to hardcode a set height for all guides under the global CSS settings? anyway to add a line of CSS to ignore specific criteria set by custom code blocks?

[fortynachos]

Hmm, unfortunately, there's not a way to selectively ignore parts of a code block without modifying the JS of each one.

I did think of a quicker way to force set every guide step at the bottom right of the page though -- try adding this to the bottom of the JS, after the checkbox snippet:

pendo.dom("[id^='pendo-g-']")[0].style.bottom = "100px";
pendo.dom("[id^='pendo-g-']")[0].style.right = "20px";
pendo.dom("[id^='pendo-g-']")[0].style.top = "unset";
pendo.dom("[id^='pendo-g-']")[0].style.left = "unset";
pendo.dom("[id^='pendo-g-']")[0].style.position = "absolute";

You can change the distance from the bottom accordingly based on the height of your RC badge. This will logic the guide step into the same spot each time after rendering.

[prolitariat]

Adding that to the bottom of the JS snippet produces this result