Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

offsetParent is null when user applied "display: none" #997

Closed
compulim opened this issue May 30, 2018 · 8 comments · Fixed by #1003
Closed

offsetParent is null when user applied "display: none" #997

compulim opened this issue May 30, 2018 · 8 comments · Fixed by #1003
Assignees
@compulim
Labels
bug Indicates an unexpected problem or an unintended behavior.
Milestone
0.14.0

Comments

@compulim
Copy link
Contributor

compulim commented May 30, 2018 •
edited
Loading

When the user hide Web Chat using CSS style rules display: none;, the offsetParent become null and throw an exception. Hitting this line, History.tsx:59.
@compulim compulim added the bug Indicates an unexpected problem or an unintended behavior. label May 30, 2018
@compulim compulim self-assigned this May 30, 2018
@Jake1996
Copy link

Jake1996 commented Jun 1, 2018

Try using the botchat-es5.js file that you get after the build

@Kartik1607
Copy link

@Jake1996 This issue has nothing to do with ES6. This happens because a ref to an html element is null as the html element was not present in DOM due to display:none;

@compulim
Copy link
Contributor Author

compulim commented Jun 5, 2018

Working on a fix that is broader than we thought.

If the user hide it initally (thru display: none) and then un-hide it, since the chat component doesn't really know how big it should be, after un-hide, it think it is too narrow and not able to render the first bubble.

image

But after a message is sent/received, it will goes back to normal.

image

We need some more time to work on the size detection code.

@compulim compulim mentioned this issue Jun 6, 2018
Merged
@compulim
Copy link
Contributor Author

compulim commented Jun 6, 2018

@Kartik1607 the fix is in PR #1003.

But we still have a problem with size calculations, and that one could be one huge change:

  • Our current measurement will make the screen flash
  • We need measurement from time to time (we currently only do at launch)

Thus, we need to redo the measurement part by not making the screen flash. Or not doing measurement if not needed.

@compulim compulim mentioned this issue Jun 6, 2018
Closed
@Kartik1607
Copy link

@compulim by hiding webchat using css, on which css selector is display none applied?

@compulim
Copy link
Contributor Author

compulim commented Jun 6, 2018

Anything on <History> (.wc-message-groups) or one of its ascendants up to <body>.

What's your scenario?

@Kartik1607
Copy link

Kartik1607 commented Jun 7, 2018 •
edited
Loading

In my case, we are using the custom build of webchat in an iframe on another page something like this.

<div id="chat-frame" style="display:none;">
        <iframe id="chatWindow"></iframe>
</div>

After getting user information etc, we remove the display:none from the chat-frame and send the information to the iframe.

At this point we get error at

const maxContentWidth = (this.carouselActivity.messageDiv.offsetParent as HTMLElement).offsetWidth - paddedWidth;

@compulim
Copy link
Contributor Author

@Kartik1607 oh so you are hiding Web Chat until user profile is loaded?

Instead of using display: none;, how about load Web Chat on the page only after profile is loaded?

@compulim compulim mentioned this issue Jun 14, 2018
Closed
@compulim compulim mentioned this issue Jun 26, 2018
Closed
@compulim compulim added this to the 0.14.0 milestone Jul 31, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@compulim compulim

Labels
bug Indicates an unexpected problem or an unintended behavior.
Projects
None yet
Milestone
0.14.0
Development

Successfully merging a pull request may close this issue.

Postpone size measurement while hidden compulim/BotFramework-WebChat
3 participants
@compulim @Jake1996 @Kartik1607