Przede wszystkim, tak, czytałem wiele badanych o tym problemie, a Ten jest prawie dokładnie tym, czego chcę. Jedynym problemem jest, że całość staje się przewijalna, gdy nie da się przewijania.

Może wynika z tego, że używam go w iframe?

To jest HTML mojego iFrame:

<div id="chat">
<div class="row-1" id="header" style="height: 20%">
    <span>Live chat</span>
</div>
<div class="row-1" id="message" style="overflow-y: scroll; height: 60%">
    <ul id="messages" class="list-group"></ul>
</div>
<div class="row-1" id="footer" style="height: 20%" >
        <input type="text" id="myMessage" placeholder="Type a message">
        <a id="sendbutton" href="#" class="btn btn-success"><span class="glyphicon glyphicon-send"></span> </a>
</div>

Chcę zrobić trochę ikony czatu, w prawym dolnym rogu, to po kliknięciu rozszerz się w małą Iframe, wyświetlając czat :)

Ale nie mogę dostać tylko środkowego div do przewijania ...

Przykład tego, czego chcę: https://alpha.hacklyon.com/ Ikona chatbota w prawym dolnym rogu, kiedy go rozszerzysz, dokładnie to chcę!

1
bcauchard 4 czerwiec 2018, 10:35

3 odpowiedzi

Najlepsza odpowiedź

Czy tego szukasz?

<div id="chat_icon" style="position: fixed; right: 0; bottom: 0; margin-bottom: 4%; margin-right: 4%" ;>
  <div class="collapse" id="iframe_holder">
    <div id="chat">
      <div class="row-1" id="header" style="height: 20%">
        <span>Live chat</span>
      </div>
      <div class="row-1" id="message" style="overflow-y: scroll; height: 120px">
        <ul id="messages" class="list-group">23232323</ul>
        <ul id="messages" class="list-group">23232323</ul>
        <ul id="messages" class="list-group">23232323</ul>
        <ul id="messages" class="list-group">23232323</ul>
        <ul id="messages" class="list-group">23232323</ul>
        <ul id="messages" class="list-group">23232323</ul>
        <ul id="messages" class="list-group">23232323</ul>
        <ul id="messages" class="list-group">23232323</ul>
      </div>
      <div class="row-1" id="footer" style="height: 20%">
        <input type="text" id="myMessage" placeholder="Type a message">
        <a id="sendbutton" href="#" class="btn btn-success"><span class="glyphicon glyphicon-send"></span> </a>
      </div>
    </div>
  </div>
  <button class="btn btn-lg btn-circle" data-target="#iframe_holder" data-toggle="collapse"><i class="glyphicon glyphicon-send"></i></button>
</div>
1
Nilesh Naik 4 czerwiec 2018, 09:59
 #chat{
    width: 300px;
    height: 200px;
    overflow: auto;
}

<div id="chat">
  <div class="row-1" id="header">
      <span>Live chat</span>
   </div>
   <div class="row-1" id="message">
   </div>
   <div class="row-1" id="footer" style="height: 20%" ></div>
</div>
0
PDSSandeep 4 czerwiec 2018, 07:53
 #chat{
   width: 300px;
   height: 200px;
}
#message{
     height: 200px;
     overflow-y: auto;
 }
0
PDSSandeep 4 czerwiec 2018, 08:03