Mixing
Microsoft ChatBot auto scroll stoped working
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I am using latest version of Microsoft ChatBot, when i send or receive messages,
- the display does not scroll down to the latest one
- the entry bar is starting at the top of the window(not from the bottom of the window, attached image) not sure if this is the intended behaviour.
react component
class Layout extends Component {
render() {
return(
<Aux>
<main className="Container">
<ReactWebChat
botAvatarInitials= 'BOT'
userAvatarInitials= 'USER'
directLine={secret}
styleSet={styleSet}
/>
</main>
</Aux>
)
}}
botframework chatbot asked Jan 3 at 6:09
Venuu MunnuruuVenuu Munnuruu
115212
add a comment |
0
I am using latest version of Microsoft ChatBot, when i send or receive messages,
- the display does not scroll down to the latest one
- the entry bar is starting at the top of the window(not from the bottom of the window, attached image) not sure if this is the intended behaviour.
react component
class Layout extends Component {
render() {
return(
<Aux>
<main className="Container">
<ReactWebChat
botAvatarInitials= 'BOT'
userAvatarInitials= 'USER'
directLine={secret}
styleSet={styleSet}
/>
</main>
</Aux>
)
}}
asked Jan 3 at 6:09
Venuu MunnuruuVenuu Munnuruu
115212
Hi @Venuu. Which sample are you using? For example, if you were to use full bundle, that has a line that takes focus.
– Dana V
Jan 3 at 17:16
@DanaV I am not using any samples i mean, i just implemented with a brand new react project. i have update my react component above.
– Venuu Munnuruu
Jan 4 at 9:47
add a comment |
0
0
0
I am using latest version of Microsoft ChatBot, when i send or receive messages,
- the display does not scroll down to the latest one
- the entry bar is starting at the top of the window(not from the bottom of the window, attached image) not sure if this is the intended behaviour.
react component
class Layout extends Component {
render() {
return(
<Aux>
<main className="Container">
<ReactWebChat
botAvatarInitials= 'BOT'
userAvatarInitials= 'USER'
directLine={secret}
styleSet={styleSet}
/>
</main>
</Aux>
)
}}
asked Jan 3 at 6:09
Venuu MunnuruuVenuu Munnuruu
115212
I am using latest version of Microsoft ChatBot, when i send or receive messages,
- the display does not scroll down to the latest one
- the entry bar is starting at the top of the window(not from the bottom of the window, attached image) not sure if this is the intended behaviour.
react component
class Layout extends Component {
render() {
return(
<Aux>
<main className="Container">
<ReactWebChat
botAvatarInitials= 'BOT'
userAvatarInitials= 'USER'
directLine={secret}
styleSet={styleSet}
/>
</main>
</Aux>
)
}}
asked Jan 3 at 6:09
Venuu MunnuruuVenuu Munnuruu
115212
asked Jan 3 at 6:09
Venuu MunnuruuVenuu Munnuruu
115212
edited Jan 4 at 9:50
Venuu Munnuruu
asked Jan 3 at 6:09
Venuu MunnuruuVenuu Munnuruu
115212
asked Jan 3 at 6:09
Venuu MunnuruuVenuu Munnuruu
115212
asked Jan 3 at 6:09
Venuu MunnuruuVenuu Munnuruu
115212
115212
Hi @Venuu. Which sample are you using? For example, if you were to use full bundle, that has a line that takes focus.
– Dana V
Jan 3 at 17:16
@DanaV I am not using any samples i mean, i just implemented with a brand new react project. i have update my react component above.
– Venuu Munnuruu
Jan 4 at 9:47
add a comment |
Hi @Venuu. Which sample are you using? For example, if you were to use full bundle, that has a line that takes focus.
– Dana V
Jan 3 at 17:16
@DanaV I am not using any samples i mean, i just implemented with a brand new react project. i have update my react component above.
– Venuu Munnuruu
Jan 4 at 9:47
Hi @Venuu. Which sample are you using? For example, if you were to use full bundle, that has a line that takes focus.
– Dana V
Jan 3 at 17:16
Hi @Venuu. Which sample are you using? For example, if you were to use full bundle, that has a line that takes focus.
– Dana V
Jan 3 at 17:16
@DanaV I am not using any samples i mean, i just implemented with a brand new react project. i have update my react component above.
– Venuu Munnuruu
Jan 4 at 9:47
@DanaV I am not using any samples i mean, i just implemented with a brand new react project. i have update my react component above.
– Venuu Munnuruu
Jan 4 at 9:47
add a comment |
1 Answer
1
active
oldest
votes
1
You need to wrap your ReactWebChat component in a div and set the height and width of the div and its children in the css to get the conversation to scroll to the bottom and have the entry bar start at the bottom. See below for how your code should look.
React Webchat Component
class Layout extends Component {
render() {
return(
<Aux>
<main className="Container">
<div id="webchat">
<ReactWebChat
botAvatarInitials= 'BOT'
userAvatarInitials= 'USER'
directLine={secret}
styleSet={styleSet}
/>
</div>
</main>
</Aux>
)
}}
CSS
#webchat,
#webchat>* {
height: 750px;
width: 400px;
}
Screenshot
Hope this helps!
answered Jan 4 at 22:23
tdurnfordtdurnford
942119
thank you it's working
– Venuu Munnuruu
Jan 7 at 14:09
it is working with px but not working with %. I don't want to give static value there
– Venuu Munnuruu
Jan 9 at 16:38
If you want to use percent instead of a static pixel value, you need to set the height and width of the container. So if you have WebChat nested in a body tag, set the height and width of the body to 100% as well.
– tdurnford
Jan 9 at 16:45
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54017136%2fmicrosoft-chatbot-auto-scroll-stoped-working%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You need to wrap your ReactWebChat component in a div and set the height and width of the div and its children in the css to get the conversation to scroll to the bottom and have the entry bar start at the bottom. See below for how your code should look.
React Webchat Component
class Layout extends Component {
render() {
return(
<Aux>
<main className="Container">
<div id="webchat">
<ReactWebChat
botAvatarInitials= 'BOT'
userAvatarInitials= 'USER'
directLine={secret}
styleSet={styleSet}
/>
</div>
</main>
</Aux>
)
}}
CSS
#webchat,
#webchat>* {
height: 750px;
width: 400px;
}
Screenshot
Hope this helps!
answered Jan 4 at 22:23
tdurnfordtdurnford
942119
thank you it's working
– Venuu Munnuruu
Jan 7 at 14:09
it is working with px but not working with %. I don't want to give static value there
– Venuu Munnuruu
Jan 9 at 16:38
If you want to use percent instead of a static pixel value, you need to set the height and width of the container. So if you have WebChat nested in a body tag, set the height and width of the body to 100% as well.
– tdurnford
Jan 9 at 16:45
add a comment |
1
You need to wrap your ReactWebChat component in a div and set the height and width of the div and its children in the css to get the conversation to scroll to the bottom and have the entry bar start at the bottom. See below for how your code should look.
React Webchat Component
class Layout extends Component {
render() {
return(
<Aux>
<main className="Container">
<div id="webchat">
<ReactWebChat
botAvatarInitials= 'BOT'
userAvatarInitials= 'USER'
directLine={secret}
styleSet={styleSet}
/>
</div>
</main>
</Aux>
)
}}
CSS
#webchat,
#webchat>* {
height: 750px;
width: 400px;
}
Screenshot
Hope this helps!
answered Jan 4 at 22:23
tdurnfordtdurnford
942119
thank you it's working
– Venuu Munnuruu
Jan 7 at 14:09
it is working with px but not working with %. I don't want to give static value there
– Venuu Munnuruu
Jan 9 at 16:38
If you want to use percent instead of a static pixel value, you need to set the height and width of the container. So if you have WebChat nested in a body tag, set the height and width of the body to 100% as well.
– tdurnford
Jan 9 at 16:45
add a comment |
1
1
1
You need to wrap your ReactWebChat component in a div and set the height and width of the div and its children in the css to get the conversation to scroll to the bottom and have the entry bar start at the bottom. See below for how your code should look.
React Webchat Component
class Layout extends Component {
render() {
return(
<Aux>
<main className="Container">
<div id="webchat">
<ReactWebChat
botAvatarInitials= 'BOT'
userAvatarInitials= 'USER'
directLine={secret}
styleSet={styleSet}
/>
</div>
</main>
</Aux>
)
}}
CSS
#webchat,
#webchat>* {
height: 750px;
width: 400px;
}
Screenshot
Hope this helps!
answered Jan 4 at 22:23
tdurnfordtdurnford
942119
You need to wrap your ReactWebChat component in a div and set the height and width of the div and its children in the css to get the conversation to scroll to the bottom and have the entry bar start at the bottom. See below for how your code should look.
React Webchat Component
class Layout extends Component {
render() {
return(
<Aux>
<main className="Container">
<div id="webchat">
<ReactWebChat
botAvatarInitials= 'BOT'
userAvatarInitials= 'USER'
directLine={secret}
styleSet={styleSet}
/>
</div>
</main>
</Aux>
)
}}
CSS
#webchat,
#webchat>* {
height: 750px;
width: 400px;
}
Screenshot
Hope this helps!
answered Jan 4 at 22:23
tdurnfordtdurnford
942119
answered Jan 4 at 22:23
tdurnfordtdurnford
942119
answered Jan 4 at 22:23
tdurnfordtdurnford
942119
answered Jan 4 at 22:23
tdurnfordtdurnford
942119
942119
thank you it's working
– Venuu Munnuruu
Jan 7 at 14:09
it is working with px but not working with %. I don't want to give static value there
– Venuu Munnuruu
Jan 9 at 16:38
If you want to use percent instead of a static pixel value, you need to set the height and width of the container. So if you have WebChat nested in a body tag, set the height and width of the body to 100% as well.
– tdurnford
Jan 9 at 16:45
add a comment |
thank you it's working
– Venuu Munnuruu
Jan 7 at 14:09
it is working with px but not working with %. I don't want to give static value there
– Venuu Munnuruu
Jan 9 at 16:38
If you want to use percent instead of a static pixel value, you need to set the height and width of the container. So if you have WebChat nested in a body tag, set the height and width of the body to 100% as well.
– tdurnford
Jan 9 at 16:45
thank you it's working
– Venuu Munnuruu
Jan 7 at 14:09
thank you it's working
– Venuu Munnuruu
Jan 7 at 14:09
it is working with px but not working with %. I don't want to give static value there
– Venuu Munnuruu
Jan 9 at 16:38
it is working with px but not working with %. I don't want to give static value there
– Venuu Munnuruu
Jan 9 at 16:38
If you want to use percent instead of a static pixel value, you need to set the height and width of the container. So if you have WebChat nested in a body tag, set the height and width of the body to 100% as well.
– tdurnford
Jan 9 at 16:45
If you want to use percent instead of a static pixel value, you need to set the height and width of the container. So if you have WebChat nested in a body tag, set the height and width of the body to 100% as well.
– tdurnford
Jan 9 at 16:45
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54017136%2fmicrosoft-chatbot-auto-scroll-stoped-working%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Hi @Venuu. Which sample are you using? For example, if you were to use full bundle, that has a line that takes focus.
– Dana V
Jan 3 at 17:16
@DanaV I am not using any samples i mean, i just implemented with a brand new react project. i have update my react component above.
– Venuu Munnuruu
Jan 4 at 9:47