Bom dia.
Gostaria de uma ajuda em relação ao css. Não sou expert no mesmo, mas tento adequá-lo da melhor forma.

Estou usando $this->form = new BootstrapFormBuilder('form_domicilios');

E utilizando panel e colocando os datagrids dentro dos mesmos.

$panel_ppe = new TPanelGroup('PPE');
$panel_ppe->add($this->datagrid_ppe);
$panel_ppe->style = 'width:800px';

O problema é que os grids dentro do panel não estão sendo responsivos.

Agradeço qualquer ajuda.

Atenciosamente,
Ailton Furtado


Segue o código da página

class Domicilios_Form extends TPage
{
private $form; // form
private $datagrid;
private $loaded;
private $pageNavigation;

/**
* Class constructor
* Creates the page and the registration form
*/
function __construct()
{
parent::__construct();
new TSession;

/* iniciar inclusão do leaflet*/
TPage::include_js("lib/adianti/include/leaflet/leaflet.js");
TPage::include_css("lib/adianti/include/leaflet/leaflet.css");

// creates the DIV element with the images
$mapa = new TElement('div');
$mapa->id = 'mapa';
$mapa->style = "width:100%;height:380px";

TSession::setValue('filtro_setor_ppe_dompar',NULL);
TSession::setValue('filtro_setor_censo_dompar',NULL);

TSession::setValue('filtro_setor_ppe_pes',NULL);
TSession::setValue('filtro_setor_censo_pes',NULL);
TSession::setValue('chave_ppe_pes',NULL);
TSession::setValue('chave_censo_pes',NULL);
TSession::setValue('filtro_setor_ppe_pespar',NULL);
TSession::setValue('filtro_setor_censo_pespar',NULL);

TSession::setValue('filtro_setor_ppe_domnaopar',NULL);
TSession::setValue('filtro_setor_ppe_pesnaopar',NULL);

$this->form = new BootstrapFormBuilder('form_domicilios');

$table = new TTable;

$row = $table->addRow();
$cell=$row->addCell('');
$cell->width = 50;

//create label setor
$label_setor_ppe = new TLabel('Setor PPE:');
$cell = $row->addCell($label_setor_ppe);
$cell->style = "padding-left: 400px";

// create the form fields
if (TSession::getValue('funcao_operador') != 'ADMINISTRADOR')
{
/* $criteria = new TCriteria();
$criteria->add(new TFilter('operador', '=', TSession::getValue('ID')));
$setor_domicilio_ppe = new TDBCombo('setor_domicilio_ppe','ppe_2020','setores','setor','setor','setor',$criteria);*/

TTransaction::open('ppe_2020');
$conn = TTransaction::get(); // get PDO connection
$script = 'select setor from setores
where setor in (select ppe_dom_setor from ppe_domicilios where (trim(censo_dom_par) = "" or trim(censo_dom_par) is null) and trim(nao_pareado) = "0"
group by ppe_dom_setor
having count(ifnull(censo_dom_par,0)) > 0) and operador = "'.TSession::getValue('ID').'"';

// run query
$resultado_setores = $conn->query($script);

$setores = array();
foreach ($resultado_setores as $setor)
{
$setores[$setor[0]] = $setor[0];
}

$setor_domicilio_ppe = new TCombo('setor_domicilio_ppe');
$setor_domicilio_ppe->addItems($setores);
TTransaction::close();

}
else
{
// $setor_domicilio_ppe = new TDBCombo('setor_domicilio_ppe','ppe_2020','setores','setor','setor','setor');

TTransaction::open('ppe_2020');
$conn = TTransaction::get(); // get PDO connection
$script = 'select setor from setores
where setor in (select ppe_dom_setor from ppe_domicilios where (trim(censo_dom_par) = "" or trim(censo_dom_par) is null) and trim(nao_pareado) = "0"
group by ppe_dom_setor
having count(ifnull(censo_dom_par,0)) > 0)';

// run query
$resultado_setores = $conn->query($script);

$setores = array();
foreach ($resultado_setores as $setor)
{
$setores[$setor[0]] = $setor[0];
}

$setor_domicilio_ppe = new TCombo('setor_domicilio_ppe');
$setor_domicilio_ppe->addItems($setores);
TTransaction::close();

}
$setor_domicilio_ppe->setSize(170);
$cell = $row->addCell($setor_domicilio_ppe);
$cell->style = "padding-left: 50px";


// creates the action button
$btn_busca = new TButton('busca');
$btn_busca->setAction(new TAction(array($this, 'onSearch')), 'Busca');
$btn_busca->setImage('fa:search');
$cell = $row->addCell($btn_busca);
$cell->style = "padding-left: 50px";


$btn_parear = new TButton('parear');
$btn_parear->setAction(new TAction(array($this, 'onSave')), 'Parear');
$btn_parear->setImage('fa:floppy-o');
$cell = $row->addCell($btn_parear);
$cell->style = "padding-left: 50px";

$btn_naoparear = new TButton('naoparear');
$btn_naoparear->setAction(new TAction(array($this, 'onSave_Nao_Par')), 'Não Pareado PPE');
$btn_naoparear->setImage('fa:floppy-o');
$cell = $row->addCell($btn_naoparear);
$cell->style = "padding-left: 50px";

$this->form->add($table);
$this->form->setFields(array($label_setor_ppe,$setor_domicilio_ppe, $btn_busca, $btn_parear, $btn_naoparear));

$items_situacao = array();
$items_situacao['1'] ='1 - Urbano';
$items_situacao['2'] ='2 - Rural';

$items_morador = array();
$items_morador['1'] ='1 - Sim';
$items_morador['2'] ='2 - Não';

// create the form fields
$censo_dom_chave_domicilio = new TEntry('censo_dom_chave_domicilio');
$ppe_dom_chave_domicilio = new TEntry('ppe_dom_chave_domicilio');
$censo_dom_primeiro_resp = new TEntry('censo_dom_primeiro_resp');
$ppe_dom_primeiro_resp = new TEntry('ppe_dom_primeiro_resp');
$censo_dom_ultimo_resp = new TEntry('censo_dom_ultimo_resp');
$ppe_dom_ultimo_resp = new TEntry('ppe_dom_ultimo_resp');
$censo_dom_primeiro_outro = new TEntry('censo_dom_primeiro_outro');
$ppe_dom_primeiro_outro = new TEntry('ppe_dom_primeiro_outro');
$censo_dom_ultimo_outro = new TEntry('censo_dom_ultimo_outro');
$ppe_dom_ultimo_outro = new TEntry('ppe_dom_ultimo_outro');
$censo_dom_logradouro = new TEntry('censo_dom_logradouro');
$ppe_dom_logradouro = new TEntry('ppe_dom_logradouro');
/* $censo_dom_tipo_logradouro = new TEntry('censo_dom_tipo_logradouro');
$ppe_dom_tipo_logradouro = new TEntry('ppe_dom_tipo_logradouro');
$censo_dom_titulo_logradouro = new TEntry('censo_dom_titulo_logradouro');
$ppe_dom_titulo_logradouro = new TEntry('ppe_dom_titulo_logradouro');
$censo_dom_nome_logradouro = new TEntry('censo_dom_nome_logradouro');
$ppe_dom_nome_logradouro = new TEntry('ppe_dom_nome_logradouro');*/
$censo_dom_num_logradouro = new TEntry('censo_dom_num_logradouro');
$ppe_dom_num_logradouro = new TEntry('ppe_dom_num_logradouro');
$censo_dom_modif_logradouro = new TEntry('censo_dom_modif_logradouro');
$ppe_dom_modif_logradouro = new TEntry('ppe_dom_modif_logradouro');
$censo_dom_compl_logradouro = new TEntry('censo_dom_compl_logradouro');
$ppe_dom_compl_logradouro = new TEntry('ppe_dom_compl_logradouro');
$censo_dom_latitude = new TEntry('censo_dom_latitude_grau');
$ppe_dom_latitude = new TEntry('ppe_dom_latitude_grau');
$censo_dom_longitude = new TEntry('censo_dom_longitude_grau');
$ppe_dom_longitude = new TEntry('ppe_dom_longitude_grau');
$censo_dom_total_homens = new TEntry('censo_dom_total_homens');
$ppe_dom_total_homens = new TEntry('ppe_dom_total_homens');
$censo_dom_total_mulheres = new TEntry('censo_dom_total_mulheres');
$ppe_dom_total_mulheres = new TEntry('ppe_dom_total_mulheres');
$censo_dom_situacao = new TCombo('censo_dom_situacao');
$censo_dom_situacao->addItems($items_situacao);
$ppe_dom_situacao = new TCombo('ppe_dom_situacao');
$ppe_dom_situacao->addItems($items_situacao);
/* $censo_dom_morador_31 = new TCombo('censo_dom_morador_31');
$censo_dom_morador_31->addItems($items_morador);*/
$ppe_dom_morador_31 = new TCombo('ppe_dom_morador_31');
$ppe_dom_morador_31->addItems($items_morador);

// define the sizes
$censo_dom_chave_domicilio->setSize('100%');
$ppe_dom_chave_domicilio->setSize('100%');
$censo_dom_primeiro_resp->setSize('100%');
$ppe_dom_primeiro_resp->setSize('100%');
$censo_dom_ultimo_resp->setSize('100%');
$ppe_dom_ultimo_resp->setSize('100%');
$censo_dom_primeiro_outro->setSize('100%');
$ppe_dom_primeiro_outro->setSize('100%');
$censo_dom_ultimo_outro->setSize('100%');
$ppe_dom_ultimo_outro->setSize('100%');
$censo_dom_logradouro->setSize('100%');
$ppe_dom_logradouro->setSize('100%');
/* $censo_dom_tipo_logradouro->setSize('100%');
$ppe_dom_tipo_logradouro->setSize('100%');
$censo_dom_titulo_logradouro->setSize('100%');
$ppe_dom_titulo_logradouro->setSize('100%');
$censo_dom_nome_logradouro->setSize('100%');
$ppe_dom_nome_logradouro->setSize('100%');*/
$censo_dom_num_logradouro->setSize('100%');
$ppe_dom_num_logradouro->setSize('100%');
$censo_dom_modif_logradouro->setSize('100%');
$ppe_dom_modif_logradouro->setSize('100%');
$censo_dom_compl_logradouro->setSize('100%');
$ppe_dom_compl_logradouro->setSize('100%');
$censo_dom_latitude->setSize('100%');
$ppe_dom_latitude->setSize('100%');
$censo_dom_longitude->setSize('100%');
$ppe_dom_longitude->setSize('100%');
$censo_dom_total_homens->setSize('100%');
$ppe_dom_total_homens->setSize('100%');
$censo_dom_total_mulheres->setSize('100%');
$ppe_dom_total_mulheres->setSize('100%');
$censo_dom_situacao->setSize('100%');
$ppe_dom_situacao->setSize('100%');
//$censo_dom_morador_31->setSize('100%');
$ppe_dom_morador_31->setSize('100%');

$censo_dom_chave_domicilio->setEditable(False);
$ppe_dom_chave_domicilio->setEditable(False);
$censo_dom_primeiro_resp->setEditable(False);;
$ppe_dom_primeiro_resp->setEditable(False);
$censo_dom_ultimo_resp->setEditable(False);
$ppe_dom_ultimo_resp->setEditable(False);
$censo_dom_primeiro_outro->setEditable(False);
$ppe_dom_primeiro_outro->setEditable(False);
$censo_dom_ultimo_outro->setEditable(False);
$ppe_dom_ultimo_outro->setEditable(False);
$censo_dom_logradouro->setEditable(False);
$ppe_dom_logradouro->setEditable(False);
/* $censo_dom_tipo_logradouro->setEditable(False);
$ppe_dom_tipo_logradouro->setEditable(False);
$censo_dom_titulo_logradouro->setEditable(False);
$ppe_dom_titulo_logradouro->setEditable(False);
$censo_dom_nome_logradouro->setEditable(False);
$ppe_dom_nome_logradouro->setEditable(False);*/
$censo_dom_num_logradouro->setEditable(False);
$ppe_dom_num_logradouro->setEditable(False);
$censo_dom_modif_logradouro->setEditable(False);
$ppe_dom_modif_logradouro->setEditable(False);
$censo_dom_compl_logradouro->setEditable(False);
$ppe_dom_compl_logradouro->setEditable(False);
$censo_dom_latitude->setEditable(False);
$ppe_dom_latitude->setEditable(False);
$censo_dom_longitude->setEditable(False);
$ppe_dom_longitude->setEditable(False);
$censo_dom_total_homens->setEditable(False);
$ppe_dom_total_homens->setEditable(False);
$censo_dom_total_mulheres->setEditable(False);
$ppe_dom_total_mulheres->setEditable(False);
$censo_dom_situacao->setEditable(False);
$ppe_dom_situacao->setEditable(False);
//$censo_dom_morador_31->setEditable(False);
$ppe_dom_morador_31->setEditable(False);

$label_ppe = new TLabel('PPE', '#7D78B6', 12, 'bi');
$label_ppe->style='text-align:center;';

$label_censo = new TLabel('CENSO', '#7D78B6', 12, 'bi');
$label_censo->style='text-align:center;';

$this->form->addFields( [new TLabel('Identificador do domicílio')], [$ppe_dom_chave_domicilio], [new TLabel('Identificador do domicílio')], [$censo_dom_chave_domicilio]);
$this->form->addFields( [new TLabel('Primeiro nome do responsável')], [$ppe_dom_primeiro_resp], [new TLabel('Primeiro nome do responsável')], [$censo_dom_primeiro_resp]);
$this->form->addFields( [new TLabel('Último nome do responsável')], [$ppe_dom_ultimo_resp], [new TLabel('Último nome do responsável')], [$censo_dom_ultimo_resp]);
$this->form->addFields( [new TLabel('Primeiro nome de outro morador')], [$ppe_dom_primeiro_outro], [new TLabel('Primeiro nome de outro morador')], [$censo_dom_primeiro_outro]);
$this->form->addFields( [new TLabel('Último nome de outro morador')], [$ppe_dom_ultimo_outro], [new TLabel('Último nome de outro morador')], [$censo_dom_ultimo_outro]);
$this->form->addFields( [new TLabel('Tipo/título/nome do logradouro')], [$ppe_dom_logradouro], [new TLabel('Tipo/título/nome do logradouro')], [$censo_dom_logradouro]);
/* $this->form->addFields( [new TLabel('Tipo do logradouro')], [$ppe_dom_tipo_logradouro], [new TLabel('Tipo do logradouro')], [$censo_dom_tipo_logradouro]);
$this->form->addFields( [new TLabel('Título do logradouro')], [$ppe_dom_titulo_logradouro], [new TLabel('Título do logradouro')], [$censo_dom_titulo_logradouro]);
$this->form->addFields( [new TLabel('Nome do logradouro')], [$ppe_dom_nome_logradouro], [new TLabel('Nome do logradouro')], [$censo_dom_nome_logradouro]);*/
$this->form->addFields( [new TLabel('Número do logradouro')], [$ppe_dom_num_logradouro], [new TLabel('Número do logradouro')], [$censo_dom_num_logradouro]);
$this->form->addFields( [new TLabel('Modificador do logradouro')], [$ppe_dom_modif_logradouro], [new TLabel('Modificador do logradouro')], [$censo_dom_modif_logradouro]);
$this->form->addFields( [new TLabel('Complementos do logradouro')], [$ppe_dom_compl_logradouro], [new TLabel('Complementos do logradouro')], [$censo_dom_compl_logradouro]);
$this->form->addFields( [new TLabel('Latitude')], [$ppe_dom_latitude], [new TLabel('Latitude')], [$censo_dom_latitude]);
$this->form->addFields( [new TLabel('Longitude')], [$ppe_dom_longitude], [new TLabel('Longitude')], [$censo_dom_longitude]);
$this->form->addFields( [new TLabel('Total Homens')], [$ppe_dom_total_homens], [new TLabel('Total Homens')], [$censo_dom_total_homens]);
$this->form->addFields( [new TLabel('Total Mulheres')], [$ppe_dom_total_mulheres], [new TLabel('Total Mulheres')], [$censo_dom_total_mulheres]);
$this->form->addFields( [new TLabel('Situação')], [$ppe_dom_situacao], [new TLabel('Situação')], [$censo_dom_situacao]);
$this->form->addFields( [new TLabel('Um morador em 31 de agosto')], [$ppe_dom_morador_31],[],[] /* [new TLabel('Um morador em 31 de agosto')], [$censo_dom_morador_31]*/);

/*$btn = $this->form->addAction( 'Parear', new TAction(array($this, 'onSave')), 'fa:floppy-o');
$btn->class = 'btn btn-sm btn-primary';
$btn_nao_par = $this->form->addAction( 'Não Pareado PPE', new TAction(array($this, 'onSave_Nao_Par')), 'fa:floppy-o');
$btn_nao_par->class = 'btn btn-sm btn-primary';*/

// creates a DataGrid PPE
$this->datagrid_ppe = new BootstrapDatagridWrapper(new TQuickGrid);
$this->datagrid_ppe->width = '100%';
$this->datagrid_ppe->setHeight(320);
$this->datagrid_ppe->setId('datagrid_ppe');
$this->datagrid_ppe->datatable = 'true';
TScript::create("
$('#datagrid_ppe').DataTable({
'stateSave': true,
'columnDefs':[{
'searchable' : false,
'targets' : [1]
}]
})
");

// creates the datagrid columns
$coluna_ppe_id = $this->datagrid_ppe->addQuickColumn('ID Domicílio PPE', 'ppe_dom_chave_domicilio', 'left', '50%', new TAction(array($this, 'onReload')));
$coluna_ppe_id->setTransformer([$this, 'formatRowPPE'] );
$coluna_ppe_dom_logradouro = $this->datagrid_ppe->addQuickColumn('Logradouro', 'ppe_dom_logradouro', 'left', '50%', new TAction(array($this, 'onReload')));
$coluna_ppe_dom_logradouro->setTransformer([$this, 'formatRowPPE'] );
$coluna_ppe_dom_num_logradouro = $this->datagrid_ppe->addQuickColumn('Número', 'ppe_dom_num_logradouro', 'left', '50%', new TAction(array($this, 'onReload')));
$coluna_ppe_dom_num_logradouro->setTransformer([$this, 'formatRowCENSO'] );
$coluna_ppe_dom_compl_logradouro = $this->datagrid_ppe->addQuickColumn('Complemento', 'ppe_dom_compl_logradouro', 'left', '50%', new TAction(array($this, 'onReload')));
$coluna_ppe_dom_compl_logradouro->setTransformer([$this, 'formatRowCENSO'] );
$coluna_ppe_dom_nome_resp = $this->datagrid_ppe->addQuickColumn('Responsável', 'ppe_dom_primeiro_resp', 'left', '50%', new TAction(array($this, 'onReload')));
$coluna_ppe_dom_nome_resp->setTransformer([$this, 'formatRowPPE'] );
$coluna_ppe_dom_nome_conj = $this->datagrid_ppe->addQuickColumn('Outro Resp.', 'ppe_dom_primeiro_outro', 'left', '50%', new TAction(array($this, 'onReload')));
$coluna_ppe_dom_nome_conj->setTransformer([$this, 'formatRowPPE'] );

// add the actions to the datagrid
$this->datagrid_ppe->addQuickAction(_t('Edit'), new TDataGridAction(array($this, 'onEdit_ppe')), 'ppe_dom_chave_domicilio', 'fa:pencil-square-o blue fa-lg');

// create the datagrid model
$this->datagrid_ppe->createModel();

$panel_ppe = new TPanelGroup('PPE');
$panel_ppe->add($this->datagrid_ppe);
$panel_ppe->style = 'width:800px';

// creates a DataGrid Censo
$this->datagrid_censo = new BootstrapDatagridWrapper(new TQuickGrid);
$this->datagrid_censo->width = '100%';
$this->datagrid_censo->setHeight(320);
$this->datagrid_censo->setId('datagrid_censo');
$this->datagrid_censo->datatable = 'true';
TScript::create("
$('#datagrid_censo').DataTable({
'stateSave': true,
'columnDefs':[{
'searchable' : false,
'targets' : [1]
}]
})
");

// creates the datagrid columns
$coluna_censo_id = $this->datagrid_censo->addQuickColumn('ID Domicílio CENSO', 'censo_dom_chave_domicilio', 'left', '50%', new TAction(array($this, 'onReload')));
$coluna_censo_id->setTransformer([$this, 'formatRowCENSO'] );
$coluna_censo_dom_logradouro = $this->datagrid_censo->addQuickColumn('Logradouro.', 'censo_dom_logradouro', 'left', '50%', new TAction(array($this, 'onReload')));
$coluna_censo_dom_logradouro->setTransformer([$this, 'formatRowCENSO'] );
$coluna_censo_dom_num_logradouro = $this->datagrid_censo->addQuickColumn('Número', 'censo_dom_num_logradouro', 'left', '50%', new TAction(array($this, 'onReload')));
$coluna_censo_dom_num_logradouro->setTransformer([$this, 'formatRowCENSO'] );
$coluna_censo_dom_compl_logradouro = $this->datagrid_censo->addQuickColumn('Complemento', 'censo_dom_compl_logradouro', 'left', '50%', new TAction(array($this, 'onReload')));
$coluna_censo_dom_compl_logradouro->setTransformer([$this, 'formatRowCENSO'] );
$coluna_censo_dom_nome_resp = $this->datagrid_censo->addQuickColumn('Responsável', 'censo_dom_primeiro_resp', 'left', '50%', new TAction(array($this, 'onReload')));
$coluna_censo_dom_nome_resp->setTransformer([$this, 'formatRowCENSO'] );
$coluna_censo_dom_nome_conj = $this->datagrid_censo->addQuickColumn('Outro Resp.', 'censo_dom_primeiro_outro', 'left', '50%', new TAction(array($this, 'onReload')));
$coluna_censo_dom_nome_conj->setTransformer([$this, 'formatRowCENSO'] );

// add the actions to the datagrid
$this->datagrid_censo->addQuickAction(_t('Edit'), new TDataGridAction(array($this, 'onEdit_censo')), 'censo_dom_chave_domicilio', 'fa:pencil-square-o blue fa-lg');

// create the datagrid model
$this->datagrid_censo->createModel();

$panel_censo = new TPanelGroup('CENSO');
$panel_censo->add($this->datagrid_censo);
$panel_censo->style = 'width:800px';

$this->form->addFields([$panel_ppe],[],[$panel_censo]);

// creates the page structure using a vbox
$container = new TVBox;
$container->style = 'width: 100%';
$container->add(new TXMLBreadCrumb('menu.xml', __CLASS__));
$container->add($this->form);
$container->add($mapa);

// add the vbox inside the page
parent::add($container);
}