Ozan Kurt Ozan Kurt - 5 months ago 4
CSS Question

Why is the minimized chatbox is flying?

Why is the minimized chatbox is flying?

When you enlarge one of the chatboxes, the other one will be carried to the same height as the other one. I want to keep the minimized one at bottom: 0;



var ChatBoxMessage = Vue.extend({
template: '#ChatBoxMessage',
data: function() {
return {
id: 0,
user: {},
messages: [],
};
},
methods: {

},
});

var ChatBox = Vue.extend({
template: '#ChatBox',
data: function() {
return {
id: 0,
title: "Default Title",

minimized: true,
closeable: false,
};
},
components: {
ChatBoxMessage
}
});

new Vue({
el: '#app',

data: {
chatBoxes: [],
},

methods: {

},

ready: function() {

},

components: {
ChatBox,
}

});

.curved-top {
border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px; }

.ChatBoxContainer {
position: absolute;
right: 0;
width: 100%;
bottom: 0;
overflow-x: scroll; }

.ChatBoxWidget {
float: right;
margin-right: 30px; }

.ChatBox {
color: white;
height: 300px;
background: #d3d3d3;
width: 300px; }

.ChatBox__TitleBar {
height: 30px;
background: #78a400; }

.ChatBox__TitleBar__Title {
float: left;
margin: 5px;
text-align: center;
width: 76%; }

.ChatBox__TitleBar__Title-90 {
width: 86% !important; }

.ChatBox__TitleBar__Buttons {
float: right; }

.ChatBox__TitleBar__Buttons__Button {
float: right;
width: 30px;
padding: 5px;
text-align: center;
border-left-color: white;
border-left-style: solid;
border-left-width: 1px;
cursor: pointer; }

.ChatBoxMinimized {
width: 200px; }

.ChatBoxMinimized__TitleBar {
color: white;
height: 30px;
background: #78a400; }

.ChatBoxMinimized__Icon {
float: left;
padding: 5px;
width: 30px;
text-align: center;
background-color: #6a9700;
border-top-left-radius: 5px; }

.ChatBoxMinimized__Title {
float: left;
margin: 5px; }

.ChatBoxMinimized__Buttons {
float: right; }

.ChatBoxMinimized__Buttons__Button {
float: right;
width: 29px;
padding: 5px;
text-align: center;
border-left-color: white;
border-left-style: solid;
border-left-width: 1px;
cursor: pointer; }

/*# sourceMappingURL=app.css.map */

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="app">
<template id="ChatBox">
<div class="ChatBoxWidget">
<div class="ChatBox curved-top" v-show="!minimized">
<div class="ChatBox__TitleBar curved-top">
<div class="ChatBox__TitleBar__Title" v-bind:class="{ 'ChatBox__TitleBar__Title-90': !closeable }">
{{ title }}
</div>
<div class="ChatBox__TitleBar__Buttons">
<div class="ChatBox__TitleBar__Buttons__Button" v-show="closeable">
<i class="fa fa-times"></i>
</div>
<div class="ChatBox__TitleBar__Buttons__Button" v-on:click="minimized = !minimized">
<i class="fa fa-minus"></i>
</div>
</div>
</div>
</div>
<div class="ChatBoxMinimized curved-top" v-show="minimized">
<div class="ChatBoxMinimized__TitleBar curved-top">
<div class="ChatBoxMinimized__Icon">
<i class="fa fa-comments"></i>
</div>
<div class="ChatBoxMinimized__Title">
{{ title }}
</div>
<div class="ChatBoxMinimized__Buttons">
<div class="ChatBoxMinimized__Buttons__Button" v-show="closeable">
<i class="fa fa-times"></i>
</div>
<div class="ChatBoxMinimized__Buttons__Button" v-on:click="minimized = !minimized">
<i class="fa fa-plus"></i>
</div>
</div>
</div>
</div>
</div>
</template>

<template id="ChatBoxMessage">

</template>

<div class="ChatBoxContainer">
<chat-box></chat-box>
<chat-box></chat-box>
</div>
</div>




Answer

I have modified .ChatBoxContainer css class only.

var ChatBoxMessage = Vue.extend({
  template: '#ChatBoxMessage',
  data: function() {
    return {
      id: 0,
      user: {},
      messages: [],
    };
  },
  methods: {

  },
});

var ChatBox = Vue.extend({
  template: '#ChatBox',
  data: function() {
    return {
      id: 0,
      title: "Default Title",

      minimized: true,
      closeable: false,
    };
  },
  components: {
    ChatBoxMessage
  }
});

new Vue({
  el: '#app',

  data: {
    chatBoxes: [],
  },

  methods: {

  },

  ready: function() {

  },

  components: {
    ChatBox,
  }

});
.curved-top {
  border-radius: 5px 5px 0px 0px;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px; }

.ChatBoxContainer {
    position: absolute;
    right: 0;
    bottom: 0;
    overflow-x: scroll;
    vertical-align: bottom;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
}

.ChatBoxWidget {
  float: right;
  margin-right: 30px; }

.ChatBox {
  color: white;
  height: 300px;
  background: #d3d3d3;
  width: 300px; }

.ChatBox__TitleBar {
  height: 30px;
  background: #78a400; }

.ChatBox__TitleBar__Title {
  float: left;
  margin: 5px;
  text-align: center;
  width: 76%; }

.ChatBox__TitleBar__Title-90 {
  width: 86% !important; }

.ChatBox__TitleBar__Buttons {
  float: right; }

.ChatBox__TitleBar__Buttons__Button {
  float: right;
  width: 30px;
  padding: 5px;
  text-align: center;
  border-left-color: white;
  border-left-style: solid;
  border-left-width: 1px;
  cursor: pointer; }

.ChatBoxMinimized {
  width: 200px; }

.ChatBoxMinimized__TitleBar {
  color: white;
  height: 30px;
  background: #78a400; }

.ChatBoxMinimized__Icon {
  float: left;
  padding: 5px;
  width: 30px;
  text-align: center;
  background-color: #6a9700;
  border-top-left-radius: 5px; }

.ChatBoxMinimized__Title {
  float: left;
  margin: 5px; }

.ChatBoxMinimized__Buttons {
  float: right; }

.ChatBoxMinimized__Buttons__Button {
  float: right;
  width: 29px;
  padding: 5px;
  text-align: center;
  border-left-color: white;
  border-left-style: solid;
  border-left-width: 1px;
  cursor: pointer; }

/*# sourceMappingURL=app.css.map */
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="app">
  <template id="ChatBox">
    <div class="ChatBoxWidget">
      <div class="ChatBox curved-top" v-show="!minimized">
        <div class="ChatBox__TitleBar curved-top">
          <div class="ChatBox__TitleBar__Title" v-bind:class="{ 'ChatBox__TitleBar__Title-90': !closeable }">
            {{ title }}
          </div>
          <div class="ChatBox__TitleBar__Buttons">
            <div class="ChatBox__TitleBar__Buttons__Button" v-show="closeable">
              <i class="fa fa-times"></i>
            </div>
            <div class="ChatBox__TitleBar__Buttons__Button" v-on:click="minimized = !minimized">
              <i class="fa fa-minus"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="ChatBoxMinimized curved-top" v-show="minimized">
        <div class="ChatBoxMinimized__TitleBar curved-top">
          <div class="ChatBoxMinimized__Icon">
            <i class="fa fa-comments"></i>
          </div>
          <div class="ChatBoxMinimized__Title">
            {{ title }}
          </div>
          <div class="ChatBoxMinimized__Buttons">
            <div class="ChatBoxMinimized__Buttons__Button" v-show="closeable">
              <i class="fa fa-times"></i>
            </div>
            <div class="ChatBoxMinimized__Buttons__Button" v-on:click="minimized = !minimized">
              <i class="fa fa-plus"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>

  <template id="ChatBoxMessage">

  </template>

  <div class="ChatBoxContainer">
    <chat-box></chat-box>
    <chat-box></chat-box>
  </div>
</div>

Comments