Jump to content
Rengavitp

Resolvido - Problema com modal Bootstrap

Recommended Posts

Boa noite pessoal, estou aprendendo web e estou passando trabalho com uma janela modal. na versão desktop para que o modal apareça direito preciso colocar varios <br> antes do footer se não ele fica perdido no meio do modal, ja na versão mobile ele fica com um espação antes do footer devido aos <br> se eu tiro ele acerta o mobile mas da problema no desktop. alguém pode me ajudar? abaixo o modal

<!-- Modal Cadastrar-->
		<div class="modal fade" id="novo_cadastro" role="dialog">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title">Novo Associado</h4>
					</div>
					<div class="modal-body">
						<div class="col-md-2">
							<label for="c_id">ID</label>
							<input type="text" class="form-control cadastro" id="c_id" placeholder="*" disabled="">
							<br>
						</div>
						<div class="col-md-10">
							<label for="c_empresa">Empresa</label>
							<input type="text" class="form-control cadastro" id="c_empresa" name="c_empresa" placeholder="Empresa" style="text-transform:uppercase" autocomplete="off" required>
							<br>
						</div>
						<div class="col-md-3">
							<label for="c_cnpj">CNPJ</label>
							<input type="text" class="form-control cadastro" id="c_cnpj" name="c_cnpj" onkeypress="$(this).mask('00.000.000/0000-00');" placeholder="Ex.: 00.000.000/0001-00" autocomplete="off" required>
							<br>
						</div>
						<div class="col-md-2">
							<label for="c_ie">I.E</label>
							<input type="text" class="form-control cadastro" id="c_ie" name="c_ie" onkeypress="$(this).mask('0.000.000');" placeholder="Ex.: 000.000.000" autocomplete="off" required>
							<br>
						</div>
						<div class="col-md-3">
							<label for="c_ass">Contato</label>
							<input type="text" class="form-control cadastro" id="c_nome" name="c_nome" placeholder="Nome" style="text-transform:uppercase" autocomplete="off" required>
							<br>
						</div>
						<div class="col-md-4">
							<label for="c_segmento">Segmento</label>
							<select id="c_segmento" name="c_segmento" class="form-control input-md cadastro">
								<option value='1'>ALIMENTAÇÃO</option>
								<option value='0'>COMÉRCIO</option>
							</select>
							<br>
						</div>
						<div class="col-md-3">
							<label for="c_telefone">Telefone</label>
							<input type="text" class="form-control cadastro" id="c_telefone" name="c_telefone" onkeypress="$(this).mask('(00) 0000-00009')" placeholder="(XX) XXXXX-XXXX" autocomplete="off" required>
							<br>
						</div>
						<div class="col-md-5">
							<label for="c_email">E-mail</label>
							<input type="email" class="form-control cadastro" id="c_email" name="c_email" placeholder="XXX@XXX.com.XX" style="text-transform:lowercase" autocomplete="off" required>
							<br>
						</div>
						<div class="col-md-2">
							<label for="c_status">Status</label>
							<select id="c_status" name="c_status" class="form-control input-md cadastro">
								<option value='1'>ATIVO</option>
								<option value='0'>INATIVO</option>
							</select>
							<br>
						</div>
						<div class="col-md-2">

						</div>
						<div class="col-md-6">
							<label for="c_endereco">Endereço</label>
							<input type="text" class="form-control cadastro" id="c_endereco" name="c_endereco" placeholder="Endereço" style="text-transform:uppercase" autocomplete="off" required>
							<br>
						</div>
						<div class="col-md-2">
							<label for="c_nro">Nro</label>
							<input type="number" class="form-control cadastro" id="c_nro" name="c_nro" placeholder="NRO" onkeypress="$(this).mask('00000')" required>
							<br>
						</div>
						<div class="col-md-4">
							<label for="c_bairro">Bairro</label>
							<input type="text" class="form-control cadastro" id="c_bairro" name="c_bairro" placeholder="Bairro" style="text-transform:uppercase" autocomplete="off" required>
							<br>
						</div>
						<div class="col-md-4">
							<label for="c_complemento">Complemento</label>
							<input type="text" class="form-control cadastro" id="c_complemento" name="c_complemento" placeholder="Complemento" style="text-transform:uppercase" autocomplete="off" required>
							<br>
						</div>
						<div class="col-md-4">
							<label for="c_municipio">Município</label>
							<input type="text" class="form-control cadastro" id="c_municipio" name="c_municipio" placeholder="Município" style="text-transform:uppercase" autocomplete="off" required>
							<br>
						</div>
						<div class="col-md-2">
							<label for="c_cep">Cep</label>
							<input type="text" class="form-control cadastro" id="c_cep" name="c_cep" placeholder="CEP" onkeypress="$(this).mask('00000-000')" autocomplete="off" required>
							<br>
						</div>
						<div class="col-md-2">
							<label for="c_uf">UF</label>
							<select id="c_uf" name="c_uf" class="form-control input-md cadastro">
								<option value="">Selecione</option>
								<option value="AC">Acre</option>
								<option value="AL">Alagoas</option>
								<option value="AP">Amapá</option>
								<option value="AM">Amazonas</option>
								<option value="BA">Bahia</option>
								<option value="CE">Ceará</option>
								<option value="DF">Distrito Federal</option>
								<option value="ES">Espirito Santo</option>
								<option value="GO">Goiás</option>
								<option value="MA">Maranhão</option>
								<option value="MS">Mato Grosso do Sul</option>
								<option value="MT">Mato Grosso</option>
								<option value="MG">Minas Gerais</option>
								<option value="PA">Pará</option>
								<option value="PB">Paraíba</option>
								<option value="PR">Paraná</option>
								<option value="PE">Pernambuco</option>
								<option value="PI">Piauí</option>
								<option value="RJ">Rio de Janeiro</option>
								<option value="RN">Rio Grande do Norte</option>
								<option value="RS">Rio Grande do Sul</option>
								<option value="RO">Rondônia</option>
								<option value="RR">Roraima</option>
								<option value="SC">Santa Catarina</option>
								<option value="SP">São Paulo</option>
								<option value="SE">Sergipe</option>
								<option value="TO">Tocantins</option>
							</select>
							<br>
						</div>
						<div class="col-md-12">
							<label for="c_descricao">Descrição</label>
							<textarea class="form-control" id="c_descricao" name="descricao" rows="4" cols="130"></textarea>
							<br>
						</div>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						<br>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-success" id="cadastrar">Cadastrar</button><button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
						</div>
				</div>
			</div>
		</div>

 

Share this post


Link to post
Share on other sites
6 horas atrás, Maujor disse:

@Rengavitp
Testei seu código aqui e ele funciona perfeitamente sem as BR.
O que significa:  "...se não ele fica perdido no meio do modal,"?
Quem é ele? Perdido????

@Maujor

Opa acho que acabei não sendo claro, seu retiro os <br> os dois botões e a linha que separa o rodapé vao parar no meio do modal misturados aos inputs, isso no desktop ja no mobile fica ok, ai se incluo os <br> acerta no desktop mas fica um espaço enorme entre o fim dos inputs e o rodapé.

Share this post


Link to post
Share on other sites

@Rengavitp Boas, pode ser algum problema no seu css, de qualquer forma o Bootstrap recomenda que: "Colunas" sejam inseridas dentro de "Linhas", assim como estas necessitam estar dentro de "Containers", então a sugestão é que dentro do "modal-body" a estrutura ideal seja algo como:

<div class="container">

    <div class="row">

        <div class="col-xx-xx">...

Outro detalhe é que seus campos de formulário deveriam estar dentro do container apropriado: "<form..."

Verifique também se fechou todas as DIV's. Então provavelmente com essas correções o problema seja resolvido.

 

Att.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By GabrielSCastro
      Olá pessoa, terminei a faculdade e recebi algumas propostas de projetos web, mas como ainda estou iniciando não tenho muita noção de quanto cobrar.
      Para um site, eu pensei em cobrar um valor razoável de entrada , e além deste valor, definir um contrato de um valor mensal para fazer manutenções necessárias, assim eu terei o cliente e uma renda sempre. Por outro lado, o cliente pode ficar com o site por pouco tempo e não chegar ao valor que eu gostaria pelo projeto. 
      Pensei também em cobrar por projeto, no minimo R$ 1000 por um site simples, já que to começando.

      Ai entra outro falta de experiência minha. Se eu cobrar por projeto, o cliente ficaria responsável por pagar o domínio e hospedagem dele ou eu contrataria uma hospedagem com a possibilidade de hospedar varios sites para quando eu tiver mais clientes.

      Indo mais direto ao ponto, gostaria que me ajudasse em como começar, cobrar, etc.

      Agradeço a quem puder ajudar.
    • By templateonweb
      Hi,
      Many of you want Bootstrap website templates. In this way, you have to develop a wonderful website.
      As this is the cheapest and fastest way to reach over the world. If you are interested in making a website by using Bootstrap website templates, then here I am sharing a website link that provides free website designs as Bootstrap website templates.
      If you are interested in then you can visit the site and use the best quality of Bootstrap website templates.
       
      Please visit: Bootstrap Website Templates
       
               
       
       
    • By Diego-SLP
      Bom dia.
       
      Estou fazendo uma tela a qual trará "blocos" que representarão minhas OBRAS, e dentro dessas OBRAS eu tenho os EQUIPAMENTOS que estou usando nela, estou tentando fazer para trazer todas em uma tela mas não consigo. 
      Os blocos que representam as OBRAS ok, aparecem corretamente, mas seus EQUIPAMENTOS não consigo "amarrar" a CHAVE daquele bloco para a pesquisa.
       
      Se alguem puder me ajudar agradeço. 
       
      <div class="row"><!--INICIO BLOCO DA OBRA--> <?php $procura = mysqli_query($con, "SELECT fr_equipamentos.cod_equip as codequip, fr_equipamentos.equipamento as equip, fr_obras.nome as obra, fr_obras.cod_obra as codobra FROM fr_movimentacao,fr_obras, fr_equipamentos WHERE fr_equipamentos.cod_equip = fr_movimentacao.cod_equip GROUP BY fr_obras.id" ) or die (mysqli_error($procura)); while($row = mysqli_fetch_array($procura)){ $cod_obra = $row['codobra']; ?> <div class="col-md-4"><!--col md 12--> <div class="card card-widget widget-user-2"> <!-- Add the bg color to the header using any of the bg-* classes --> <div class="widget-user-header bg-gradient-secondary"> <div class="widget-user-image"> <img class="img-circle elevation-3" src="dist/img/icon-obra.png" alt="Obra"> </div> <!-- /.widget-user-image --> <h3 class="widget-user-username"><strong><?php echo $row['codobra'];?></strong></h3> <h6 class="widget-user-desc"><?php echo $row['obra'];?></h6> </div> <table class="table table-striped table-sm"> <thead> <tr> <th style="text-align: center;">Cod</th> <th style="text-align: center;">Equipamento</th> <th style="text-align: center;">Operador</th> <th style="text-align: center;">Ações</th> </tr> </thead> <tbody> <tr> <?php $procura2 = mysqli_query($con, "SELECT fr_equipamentos.cod_equip as codequip, fr_equipamentos.equipamento FROM fr_obras, fr_equipamentos, fr_movimentacao WHERE fr_equipamentos.cod_equip = fr_movimentacao.cod_equip AND fr_movimentacao.cod_obra = '".$cod_obra."' GROUP BY fr_equipamentos.cod_equip" ) or die (mysqli_error($procura2)); while($row2 = mysqli_fetch_array($procura2)){ ?> <td><?php echo $row2['codequip'];?></td> <td>RETRO</td> <td>José Silva</td> <td> <button type="button" class="btn btn-block bg-gradient-info">Movimentar</button> </td> <?php }?> </tr> </tbody> </table> </div> </div><!--col md 3--> <?php } ?> </div><!--FIM BLOCO DA OBRA-->  
    • By Diego-SLP
      Bom dia, estou com um problema que ao inserir um registro no banco a confirmação via modal não ocorre, mas se eu coloco um botao chamando o modal ele é exibido, ou seja, os scripts e plugins estão corretos né ?! 
       
      Acho que estou esquecendo de algo para chama-lo, se alguem puder ajudar agradeço.
       
      <?php if(isset($_POST['btncadastrar'])){ $obra = strtoupper($_POST['obra']); $status = strtoupper($_POST['status']); $cadastrar = "INSERT INTO tblCliente (obra_cliente,status) VALUES ('$obra','$status')"; $cadastra = mysqli_query($con,$cadastrar); ?> <div class="modal fade" id="aviso" tabindex="-1" role="dialog" aria-labelledby="avisoLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">Usuário cadastrado com Sucesso!</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-info" data-dismiss="modal">Corrigir Cadastro</button> <a href="index.php"><button type="button" class="btn btn-success">Ok</button></a> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function () { $('#aviso').modal('show'); }); </script> <?php } ?>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.