diff --git a/css/converse.css b/css/converse.css
index 8f6a71c55..253a76506 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -8708,7 +8708,8 @@ body.reset {
bottom: auto;
right: auto;
position: relative;
- width: 100%; }
+ width: 100%;
+ height: 100%; }
#conversejs.converse-embedded *, #conversejs.converse-embedded *:before, #conversejs.converse-embedded *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
@@ -8717,31 +8718,22 @@ body.reset {
z-index: 1031;
position: inherit;
bottom: auto;
- height: auto;
+ height: 100%;
width: 100%; }
#conversejs.converse-embedded .chatroom {
margin: 0;
width: 100%; }
- #conversejs.converse-embedded .flyout {
- bottom: auto;
- display: block;
- position: relative; }
- #conversejs.converse-embedded .chatbox {
- float: none; }
- #conversejs.converse-embedded .chatbox .box-flyout {
- box-shadow: none; }
- #conversejs.converse-embedded .chatbox .chat-title {
- padding: 0.3em;
- font-size: 120%; }
+ #conversejs.converse-embedded .chatbox .box-flyout {
+ box-shadow: none;
+ height: 100%; }
+ #conversejs.converse-embedded .chatbox .chat-title {
+ padding: 0.3em;
+ font-size: 120%; }
#conversejs.converse-embedded .chatbox-btn {
display: none; }
#conversejs.converse-embedded .chatroom .box-flyout {
min-width: auto;
- width: 100%;
- height: 55vh; }
- #conversejs.converse-embedded .chatroom .box-flyout .chat-body {
- height: -webkit-calc(100% - 55px);
- height: calc(100% - 55px); }
+ width: 100%; }
#conversejs.converse-embedded .chatroom .box-flyout .occupants-heading {
font-size: 120%; }
#conversejs.converse-embedded .chatroom .box-flyout .chat-content .chat-message {
@@ -8750,9 +8742,11 @@ body.reset {
#conversejs.converse-embedded .chatroom .box-flyout .sendXMPPMessage .chat-textarea {
padding: 0.5em;
font-size: 110%; }
- #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container {
- height: 100%;
- position: relative; }
+ #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body {
+ height: 100%; }
+ #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container {
+ height: 100%;
+ position: relative; }
#conversejs.converse-embedded .chatroom .box-flyout .occupants .occupant-list {
padding-left: 0.3em; }
#conversejs.converse-embedded .chatroom .box-flyout .occupants .occupant-list li.occupant {
diff --git a/demo/embedded.html b/demo/embedded.html
index ff78d423e..351a91707 100644
--- a/demo/embedded.html
+++ b/demo/embedded.html
@@ -15,9 +15,15 @@
-
+
+
+
@@ -43,7 +49,9 @@
Embedded MUC chat demo
-
+
diff --git a/dist/converse.js b/dist/converse.js
index 770b83470..a80db6295 100644
--- a/dist/converse.js
+++ b/dist/converse.js
@@ -48365,11 +48365,7 @@ return __p
'input .chat-textarea': 'inputChanged'
},
initialize: function initialize() {
- this.scrollDown = _.debounce(this._scrollDown, 250);
- this.markScrolled = _.debounce(this._markScrolled, 100);
- this.show = _.debounce(this._show, 250, {
- 'leading': true
- });
+ this.initDebounced();
this.createEmojiPicker();
this.model.messages.on('add', this.onMessageAdded, this);
this.model.messages.on('rendered', this.scrollDown, this);
@@ -48385,6 +48381,13 @@ return __p
_converse.emit('chatBoxInitialized', this);
},
+ initDebounced: function initDebounced() {
+ this.scrollDown = _.debounce(this._scrollDown, 250);
+ this.markScrolled = _.debounce(this._markScrolled, 100);
+ this.show = _.debounce(this._show, 250, {
+ 'leading': true
+ });
+ },
render: function render() {
// XXX: Is this still needed?
this.el.setAttribute('id', this.model.get('box_id'));
@@ -56838,8 +56841,7 @@ return __p
'keypress textarea.chat-textarea': 'keyPressed'
},
initialize: function initialize() {
- this.scrollDown = _.debounce(this._scrollDown, 250);
- this.markScrolled = _.debounce(this._markScrolled, 100);
+ this.initDebounced();
this.disable_mam = true; // Don't do MAM queries for this box
this.model.messages.on('add', this.onMessageAdded, this);
@@ -59137,8 +59139,7 @@ return __p
initialize: function initialize() {
var _this3 = this;
- this.scrollDown = _.debounce(this._scrollDown, 250);
- this.markScrolled = _.debounce(this._markScrolled, 100);
+ this.initDebounced();
this.model.messages.on('add', this.onMessageAdded, this);
this.model.messages.on('rendered', this.scrollDown, this);
this.model.on('change:affiliation', this.renderHeading, this);
diff --git a/sass/_muc_embedded.scss b/sass/_muc_embedded.scss
index 7901319bc..83401aba1 100644
--- a/sass/_muc_embedded.scss
+++ b/sass/_muc_embedded.scss
@@ -11,12 +11,13 @@
right: auto;
position: relative;
width: 100%;
+ height: 100%; // When embedded, it fills the containing element
.converse-chatboxes {
z-index: 1031; // One more than bootstrap navbar
position: inherit;
bottom: auto;
- height: auto;
+ height: 100%;
width: 100%;
}
@@ -24,16 +25,10 @@
margin: 0;
width: 100%;
}
- .flyout {
- bottom: auto;
- display: block;
- position: relative;
- }
.chatbox {
- float: none;
-
.box-flyout {
box-shadow: none;
+ height: 100%;
}
.chat-title {
padding: 0.3em;
@@ -47,10 +42,6 @@
.box-flyout {
min-width: auto;
width: 100%;
- height: 55vh;
- .chat-body {
- @include calc(height, '100% - #{$chat-head-height}');
- }
.occupants-heading {
font-size: 120%;
}
@@ -67,6 +58,7 @@
}
}
.chatroom-body {
+ height: 100%;
.chatroom-form-container {
height: 100%;
position: relative;