Componente chat adminlte - barra de rolagem não funciona

Felipe Teixeira 19/03/2018 (há 7 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);
    }
}

Curso Dominando o Adianti Framework

Comentários (2)