RB
Formulário responsivo
Senhores, estou com o seguinte problema,
Ao criar um formulário utilizando a bootstrap builder, ao redimencionar o formulário o mesmo fica desconfigurado, segue código abaixo se alguém puder me ajudar agradeço.
Ao criar um formulário utilizando a bootstrap builder, ao redimencionar o formulário o mesmo fica desconfigurado, segue código abaixo se alguém puder me ajudar agradeço.
- <?php
- class ClienteFisicoBuilder extends TPage
- {
- private $form;
- public function __construct()
- {
- parent::__construct();
- $this->form = new BootstrapFormBuilder('frm_cliente_fisico');
- $this->form->setFormTitle('Cliente');
- $this->form->class = 'form-inline';
- $dados_cliente = new TLabel('Dados Pessoais', '#425a74', 12, 'b');
- $dados_cliente->style='text-align:left;border-bottom:1px solid #c0c0c0;width:100%;float:left;margin-top:-20px;';
- $this->form->addContent( [$dados_cliente] );
- // add a row with 2 slots
- $label_nome = new TLabel('Nome','#425a74');
- $label_nome->style='text-align:left;float:left;width:100%;display:inline-block;';
- $lbl_data_nascto = new TLabel('Data Nascimento','#425a74');
- $lbl_data_nascto->style='text-align:left;float:left;width:100%;';
- $lbl_estado_civil = new TLabel('Estado Cívil','#425a74');
- $lbl_estado_civil->style='text-align:left;float:left;width:100%;';
- $nome = new TEntry('nome');
- $nome->style='text-align:left;float:left;width:100%';
- $data_nascto = new TDate('data_nascto');
- $data_nascto->style='text-align:left;float:left;width:100%';
- $data_nascto->setMask('dd/mm/yyyy'); // define date mask
- $estado_civil = new TEntry('estado_civil');
- $estado_civil= new TDBCombo('EstadoCivil','sgvo', 'Civil', 'id', 'descricao');
- $lbl_genero = new TLabel('Genero','#425a74');
- $lbl_genero->style ='text-align:left;float:left;width:100%';
- $genero = new TCombo('genero');
- $genero->addItems( ['1' => 'Masculino', '2' => 'Feminino'] );
- $lbl_cpf = new TLabel('CPF','#425a74');
- $cpf = new TEntry('cpf');
- //$cpf->setMask('000.000.000.00');
- $cpf->addValidation('CPF', new TCPFValidator, new TMaxValueValidator,array(14));
- //$cpf->setDatabaseMask('00000000000');
- $lbl_cpf->style='text-align:left;float:left;width:100%';
- $lbl_rg = new TLabel('RG','#425a74');
- $rg = new TEntry('rg');
- $rg->setMask('00.000.000.00');
- $rg->setMaxLength(12);
- $lbl_rg->style='text-align:left;float:left;width:100%';
- $lbl_etnia = new TLabel('Etnia','#425a74');
- $etnia = new TDBCombo('Etnia','sgvo','Etnia','id','descricao');
- //$etnia = new TEntry('etnia');
- $this->form->addFields( [$label_nome,$lbl_data_nascto,$lbl_estado_civil] );
- $this->form->addFields( [$nome,$data_nascto,$estado_civil] );
- $this->form->addFields( [$lbl_genero,$lbl_cpf,$lbl_rg,$lbl_etnia] );
- $this->form->addFields( [$genero,$cpf,$rg,$etnia] );
- $label_nome->setSize('40%');
- $nome->setSize('40%');
- $lbl_data_nascto->setSize('20%');
- $data_nascto->setSize('20%');
- $lbl_estado_civil->setSize('20%');
- $estado_civil->setSize('20%');
- $lbl_genero->setSize('20%');
- $genero->setSize('20%');
- $lbl_cpf->setSize('20%');
- $cpf->setSize('20%');
- $lbl_rg->setSize('20%');
- $rg->setSize('20%');
- $lbl_etnia->setSize('20%');
- $etnia->setSize('20%');
- //dados de contato
- $contato = new TLabel('Contato', '#425a74', 12, 'b');
- $contato->style='text-align:left;border-bottom:1px solid #c0c0c0;width:100%';
- $lbl_ddi = new TLabel('DDI','#425a74');
- $lbl_ddi->style='text-align:left;';
- $ddi = new TEntry('ddi[]');
- $lbl_dd = new TLabel('DDD','#425a74');
- $lbl_dd->style='text-align:left;';
- $dd = new TEntry('dd[]');
- $lbl_tipo_telefone = new TLabel('Tipo Telefone','#425a74');
- $lbl_tipo_telefone->style='text-align:left;';
- $tipo_telefone = new TDBCombo('TipoTelefone','sgvo','TipoTelefone','id','descricao');
- $lbl_telefone = new TLabel('Telefone','#425a74');
- $lbl_telefone->style='text-align:left;width:100';
- $telefone = new TEntry('telefone');
- $telefone->setMask('9999-9999');
- $lbl_operadora = new TLabel('Operadora','#425a74');
- $lbl_operadora->style='text-align:left;';
- $operadora = new TDBCombo('Operadora','sgvo','Operadora','id','nome');
- $lbl_email = new TLabel('Email','#425a74');
- $lbl_email->style='text-align:left;';
- $email = new TEntry('email');
- //$email->addValidation('email', new TEmailValidator); // email field
- $lbl_site = new TLabel('Site','#425a74');
- $lbl_site->style='text-align:left;';
- $site = new TEntry('site');
- $this->form->addContent( [$contato] );
- //adiciona campos para contato / telefone
- $table = new TTable;
- $table->style='border 1px solid #333;';
- $table->width='100%';
- $table->addSection('thead');
- $table->addRowSet([$lbl_ddi,$lbl_dd,$lbl_tipo_telefone,$lbl_telefone,$lbl_operadora]);
- $table->addSection('tbody');
- for ($n=0; $n<=0; $n++)
- {
- // create delete button
- $del = new TImage('fa:trash-o blue');
- $del->onclick = 'ttable_remove_row(this)';
- // create add button
- $add = new TButton('clone');
- $add->setLabel('Adicionar');
- $add->setImage('fa:plus-circle green');
- $table->addRowSet( [$ddi,$dd,$tipo_telefone,$telefone,$operadora, $del]);
- }
- $add->addFunction('ttable_clone_previous_row(this)');
- $table->addRowSet($add);
- $this->form->addFields( [$table]);
- $this->form->addFields( [ $lbl_email,$lbl_site] );
- $this->form->addFields( [ $email,$site] );
- $lbl_ddi->setSize('40');
- $ddi->setSize('40');
- $lbl_dd->setSize('40');
- $dd->setSize('40');
- $lbl_tipo_telefone->setSize('100');
- $tipo_telefone->setSize('100');
- $lbl_telefone->setSize('100');
- $telefone->setSize('100');
- $lbl_email->setSize('40%');
- $lbl_site->setSize('40%');
- $email->setSize('40%');
- $site->setSize('40%');
- //dados de correspondência
- $lbl_endereco = new TLabel('Endereco', '#425a74', 12, 'b');
- $lbl_endereco->style='text-align:left;border-bottom:1px solid #c0c0c0;width:100%';
- $lbl_cep = new TLabel('Cep', '#425a74', 12);
- $lbl_cep->style='text-align:left;border-bottom:1px solid #c0c0c0;width:100%';
- $cep = new TEntry('cep');
- $lbl_logradouro = new TLabel('Logradouro', '#425a74', 12);
- $lbl_logradouro->style='text-align:left;border-bottom:1px solid #c0c0c0;width:100%';
- $logradouro = new TEntry('logradouro');
- $logradouro->style='float:left;';
- $lbl_numero = new TLabel('Número', '#425a74', 12);
- $lbl_numero->style='text-align:left;border-bottom:1px solid #c0c0c0;width:100%';
- $numero = new TEntry('numero');
- $lbl_bairro = new TLabel('Bairro', '#425a74', 12);
- $lbl_bairro->style='text-align:left;border-bottom:1px solid #c0c0c0;width:100%';
- $bairro = new TEntry('bairro');
- $lbl_cidade = new TLabel('Cidade', '#425a74', 12);
- $lbl_cidade->style='text-align:left;border-bottom:1px solid #c0c0c0;width:100%';
- $cidade = new TEntry('cidade');
- $lbl_uf = new TLabel('Estado', '#425a74', 12);
- $lbl_uf->style='text-align:left;border-bottom:1px solid #c0c0c0;width:100%';
- $uf = new TEntry('uf');
- $lbl_complemento = new TLabel('Complemento', '#425a74', 12);
- $lbl_complemento->style='text-align:left;border-bottom:1px solid #c0c0c0;width:100%';
- $complemento = new TEntry('complemento');
- $lbl_cep->setSize('20%');
- $cep->setSize('100');
- $lbl_logradouro->setSize('40%');
- $logradouro->setSize('40%');
- $lbl_numero->setSize('20%');
- $numero->setSize('20%');
- $lbl_bairro->setSize('20%');
- $lbl_cidade->setSize('32%');
- $lbl_uf->setSize('8%');
- $bairro->setSize('20%');
- $cidade->setSize('32%');
- $uf->setSize('8%');
- $btn_cep = new TButton('btn_cep');
- $btn_cep->setSize(100);
- $btn_cep->style='float:left;padding-rigth:10px;color:#425a74';
- $btn_cep->setAction(new TAction(array($this,'onCep')),'Busca Cep');
- $btn_cep->setImage('fa:search blue');
- $this->form->addFields( [$lbl_endereco] );
- $this->form->addFields( [$lbl_cep,$lbl_logradouro,$lbl_numero] );
- $this->form->addFields( [$cep,$btn_cep,$logradouro,$numero] );
- $this->form->addFields( [$lbl_bairro,$lbl_cidade,$lbl_uf,$lbl_complemento] );
- $this->form->addFields( [$bairro,$cidade,$uf,$complemento] );
- $this->form->addAction('Salvar', new TAction(array($this, 'onSave')), 'ico_save.png');
- // wrap the page content using vertical box
- $vbox = new TVBox;
- $vbox->add(new TXMLBreadCrumb('menu.xml', __CLASS__));
- $vbox->add($this->form);
- parent::add($this->form);
- }
- /**
- * Post data
- */
- function onSave(){
- $this->organizacao_id = TSession::getValue('organizacion_id'); // pega id da empresa
- $atualizacao = date('Y-m-d H:m:s');
- try{
- TTransaction::open('u239729888_sgv');// open a transaction with database 'sgvo'
- /* TTransaction::setLoggerFunction(function($message){
- print $message.'<br/>';
- });
- */
- $data = $this->form->getData(); // get the form data into an active record Pessoa
- $pessoa = new Pessoa;
- $pessoa->fromArray((array) $data);
- $this->form->validate();// form validation
- $pessoa->nome = $data->nome;
- $object->data_nascimento = TDate::date2us($data->data_nascto) ; //---> Tranforma Data no padrão americano
- $pessoa->organizacao_id = $this->organizacao_id;
- $pessoa->atualizacao = $atualizacao;
- $pessoa->tipo_pessoa_id = 1;
- //$pessoa->addContato($contato); //rever este trecho
- // stores the object
- $pessoa->store();
- $id = $pessoa->id; // valor retornado após a persistência do objeto.
- $data = $this->form->getData();
- $this->form->setData($data);
- echo '<pre>';
- print_r($data);
- echo '</pre>';
- }
- catch (Exception $e) // in case of exception
- {
- new TMessage('error', $e->getMessage());
- $this->form->setData( $this->form->getData() ); // keep form data
- TTransaction::rollback();
- }
- }
- /**
- * method onCep()
- * Executed whenever the user clicks at the edit button da datagrid
- */
- public function onCep($param){
- $retorno = Endereco::BuscaCep($param['cep']);
- if ( $retorno )
- {
- $data = $this->form->getData();
- $data->ibge = strtoupper( $retorno['ibge']);
- $data->gia = strtoupper( $retorno['gia']);
- $data->logradouro = strtoupper( $retorno['logradouro']);
- $data->bairro = strtoupper( $retorno['bairro']);
- $data->cidade = strtoupper( $retorno['localidade']);
- $data->uf = strtoupper( $retorno['uf']);
- $this->form->setData($data);
- }
- else {
- new TMessage("error", "CEP - Em Branco ou Inválido");
- }
- }
- }
- ?>
Você não passou tamanho para o campo complemento, desse modo automaticamente ele fica com 200px. Defina o tamanho em % para todos os campos.
Então já fiz isto porém não deu certo.
Veja