Componente chat adminlte - barra de rolagem não funciona

Felipe Teixeira 19/03/2018 (há 6 anos)

Olá pessoal. Eu criei um componente de chat igual ao do adminlte.. o problema é que a barra de rolagem do chat, caso haja várias mensagens, não funciona. Alguma ideia de como fazer ela funcionar? ela é o $div8 do código abaixo:

**Quando o componente estiver ok eu posto ele nas contribs.

<?php
namespace academico\Widget;
use Adianti\Widget\Base\TElement;
class TChat extends TElement {
public function __construct()
{
parent::__construct('div');
$div1 = new TElement('div');
$div1->{'class'} = 'box box-primary';
$div2 = new TElement('div');
$div2->{'class'} = 'box-header ui-sortable-handle';
$div2->{'style'} = 'cursor: move;';
$i = new TElement('i');
$i->{'class'} = 'fa fa-comments-o';
$h3 = new TElement('h3');
$h3->{'class'} = 'box-title';
$h3->add('Chat');
$div3 = new TElement('div');
$div3->{'class'} = 'box-tools pull-right';
$div3->{'data-toggle'} = 'tooltip';
$div3->{'data-original-title'} = 'Status';
$div4 = new TElement('div');
$div4->{'class'} = 'btn-group';
$div4->{'data-toggle'} = 'btn-toggle';
$button = new TElement('button');
$button->{'type'} = 'button';
$button->{'class'} = 'btn btn-default btn-sm active';
$i1 = new TElement('i');
$i1->{'class'} = 'fa fa-square text-green';
$button->add($i1);
$button1 = new TElement('button');
$button1->{'type'} = 'button';
$button1->{'class'} = 'btn btn-default btn-sm';
$i2 = new TElement('i');
$i2->{'class'} = 'fa fa-square text-red';
$button1->add($i2);
$div4->add($button);
$div4->add($button1);
$div3->add($div4);
$div2->add($i);
$div2->add($div3);
$div2->add($h3);
$div1->add($div2);
$div5 = new TElement('div');
$div5->{'class'} = 'slimScrollDiv';
$div5->{'style'} = 'overflow: hidden; width: auto; height: 250px;';
$div6 = new TElement('div');
$div6->{'class'} = 'box-body chat';
$div6->{'id'} = 'chat-box';
$div6->{'style'} = 'overflow: hidden; width: auto; height: 250px;';
$div5->add($div6);
//////////////////// MENSATEM ITEM /////////////////
$div7 = new TElement('div');
$div7->{'class'} = 'item';
$img = new TElement('img');
$img->{'src'} = 'http://localhost/academico/app/images/profile/profile-icon.png';
$img->{'alt'} = 'Imagem do perfil';
$img->{'class'} = 'online';
$p = new TElement('p');
$p->{'class'} = 'message';
$a = new TElement('a');
$a->{'href'} = '#';
$a->{'class'} = 'name';
$small = new TElement('small');
$small->{'class'} = 'text-muted pull-right';
$i3 = new TElement('i');
$i3->{'class'} = 'fa fa-clock-o';
$small->add($i3);
$small->add('2:15');
$a->add($small);
$a->add('Nome do user');
$p->add($a);
$p->add('Texto de uma mensagem exemplo Texto de uma mensagem exemplo');
$div7->add($img);
$div7->add($p);
/////////////////////////////////////////////////////
$div6->add($div7); //PREENCHE COM VÁRIAS MENSAGENS DE EXEMPLO
$div6->add($div7);
$div6->add($div7);
$div6->add($div7);
$div6->add($div7);
$div6->add($div7);
$div6->add($div7);
$div6->add($div7);
$div6->add($div7);
$div8 = new TElement('div');
$div8->{'class'} = 'slimScrollBar';
$div8->{'style'} = 'background: rgb(0, 0, 0); width: 7px; position: absolute; top: 40px; opacity: 0.4; display: block; border-radius: 7px; z-index: 99; right: 1px; height: 184.911px;';
$div9 = new TElement('div');
$div9->{'class'} = 'slimScrollRail';
$div9->{'style'} = 'width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;';
$div10 = new TElement('div');
$div10->{'class'} = 'box-footer';
$div11 = new TElement('div');
$div11->{'class'} = 'input-group';
$input = new TElement('input');
$input->{'class'} = 'form-control';
$div12 = new TElement('div');
$div12->{'class'} = 'input-group-btn';
$button2 = new TElement('button');
$button2->{'class'} = 'btn btn-primary btn-flat';
$i3 = new TElement('i');
$i3->{'class'} = 'fa fa-plus';
$button2->add($i3);
$div12->add($button2);
$div11->add($input);
$div11->add($div12);
$div10->add($div11);
$div5->add($div8);
$div5->add($div9);
$div1->add($div5);
// $div1->add($div10);
parent::add($div1);
}
}
?>

E aqui é como eu fiz a página:

<?php
use academico\Widget\TChat;
class CommonPage extends TPage
{
public function __construct()
{
parent::__construct();
$chat = new TChat;
$campo = new TEntry('campo');
$campo->setSize(400);
$div10 = new TElement('div');
$div10->{'class'} = 'box-footer';
$div11 = new TElement('div');
$div11->{'class'} = 'input-group';
$div11->add($campo);
$div10->add($div11);
parent::add($chat);
parent::add($div10);
}
}

Comentários (2)