Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

diego.djss

Formulário com problema.

Por , em Desenvolvimento frontend

Recommended Posts

diego.djss    0

diego.djss
Postado

Estou com problema para fazer um formulário com div's. Tenho um div chamada "ROW" que possui uma largura de 98% e dentro dela tem "input" com a largura de 100%. Ai vem o problema os "input" não respeitam o tamanho da minha div "ROW". Segue o código:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style type="text/css">
#formulario{
width: 99%;
height: 95%;
position:relative;
top: 15px;
overflow:auto;
margin: 0 0 0 5px;
}
 
#formulario .topo{
width:100%;
height:28px;
background-color:#003366;
padding: 5px 0;
margin: 0 0 10px 0;
text-align:left;
font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
clear:both;
}
 
#formulario .topo_span{
font-size:28px; 
float:left; 
color:#FFFFFF; 
margin: 0 0px 0px 20px;
padding: 0px; 
text-align:left;
}
 
#formulario .content{
background-color:#FFFFFF;
width: 100%; 
height: auto; 
margin: 0px 0px 0px 0px; 
padding: 20px 0px 20px 0px; 
text-align: left; 
float: left;
}
 
#formulario .content .form_fornecedor{
background-color:#9C6A6B;
}
 
#formulario .content .form_fornecedor .row{
width: 98%;
margin-left:10px;
background-color:#C8D916;
}
 
#formulario .content .form_fornecedor .row input{
width: 100%;
border-radius: 3px;
}
 
#formulario .content .form_fornecedor .row .column{
width: 33%;
background-color:#DDBDBE;
display:inline-block;
}
 
#formulario .content .form_fornecedor .row .column input{
width: 99%;
border-radius: 3px
}
 
#formulario .content .form_fornecedor .row .column select{
width: 100%;
border-radius: 3px;
}
</style>
 
</head>
 
<body>
<div id="formulario">
<div class="topo"><span class="topo_span">Fornecedor</span></div>
            <div class="content">
                <form class="form_fornecedor">
                <div class="row">
                    <label>Razão Social:</label><br/>
                    <input type="text" placeholder="Razão Social"/>
                    </div>
                    <div class="row">
                    <label>Nome Fantasia:</label><br/>
                    <input type="text" placeholder="Nome Fantasia"/>
                    </div>
                    <div class="row">
                    <div class="column">
                       <label>CNPJ:</label><br/>
                    <input type="text" placeholder="CNPJ"/>                    
</div>        
                        <div class="column" style="margin-left:2px;">
                       <label>Tipo de Fornecedor:</label>
                    <select>
                            <option>Física</option>
                                <option>Jurídica</option>
                            </select>
</div> 
                        <div class="column" style="float:right">
                       <label>Inscrição Estadual:</label>
                    <input type="text" placeholder="Inscrição Estadual"/>                   
</div>                          
                    </div>
                    <label>Telefone:</label><br/>
                    <input type="tel" placeholder="Telefone"/><br/>
                    <div class="row">
                    <label>E-mail:</label><br/>
                    <input type="email" placeholder="E-mail"/><br/>
                    </div>
                    <div class="row">
                    <label>Site:</label><br/>
                    <input type="text" placeholder="Site"/><br/>
                    </div>
                    <div class="row">
                    <label>Contato:</label><br/>
                    <input type="text" placeholder="Contato"/><br/>
                    </div>
                    <label>Endereço:</label><br/>
                    <input type="text" placeholder="Endereço"/><br/>
                    <label>Número:</label><br/>
                    <input type="text" placeholder="Número"/><br/>
                    <label>Complemento:</label><br/>
                    <input type="text" placeholder="Complemento"/><br/>
                    <label>Bairro:</label><br/>
                    <input type="text" placeholder="Bairro"/><br/>
                    <label>CEP:</label><br/>
                    <input type="text" placeholder="CEP"/><br/>
                    <label>Cidade:</label><br/>
                    <input type="text" placeholder="Cidade"/><br/>
                    <label>Estado:</label><br/>
                    <select>
                        
                    </select><br/>
                </form>  
</div><!-- Fim div CONTENT-->                
        </div>
 
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado

deixa ele como

display:table;

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado

isso acontece para todos os browsers

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado

como vc colocou o code

Compartilhar este post

Link para o post
Compartilhar em outros sites

unfox    0

unfox
Postado

Boas,

 

Veja se será este o resultado que você quer?

Segue abaixo o código;

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style type="text/css">

#formulario{
	width: 98%;
	height: 95%;
	position: relative;
	top: 15px;
	margin-left: 1%;
}
 
#formulario .topo{
	width:100%;
	height:28px;
	background-color:#003366;
	padding: 5px 0;
	margin: 0 0 10px 0;
	text-align:left;
	font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	clear:both;
}
 
#formulario .topo_span{
	font-size:28px; 
	float:left; 
	color:#FFFFFF; 
	margin: 0 0px 0px 20px;
	padding: 0px; 
	text-align:left;
}
 
#formulario .content{
	background-color:#FFFFFF;
	width: 100%; 
	height: auto; 
	padding: 20px 0px 20px 0px; 
	text-align: left; 
}
 
#formulario .content .form_fornecedor{
	background-color:#9C6A6B;
}
 
#formulario .content .form_fornecedor .row{
	width: 100%;
	background-color:#C8D916;
}
 
#formulario .content .form_fornecedor .row input{
	width: 100%;
	border-radius: 3px;
}
 
#formulario .content .form_fornecedor .row .column{
	width: 33%;
	background-color:#DDBDBE;
	display:inline-block;
}
 
#formulario .content .form_fornecedor .row .column input{
	width: 99%;
	border-radius: 3px
}
 
#formulario .content .form_fornecedor .row .column select{
	width: 100%;
	border-radius: 3px;
}
</style>
 
</head>
 
<body>
<div id="formulario">
	<div class="topo">
		<span class="topo_span">Fornecedor</span>
	</div>
	<div class="content">
		<form class="form_fornecedor">
			<div class="row">
				<label>Razão Social:</label><br/>
				<input type="text" placeholder="Razão Social"/>
			</div>
			<div class="row">
				<label>Nome Fantasia:</label><br/>
				<input type="text" placeholder="Nome Fantasia"/>
			</div>
			<div class="row">
				<div class="column">
					<label>CNPJ:</label><br/>
					<input type="text" placeholder="CNPJ"/>                    
				</div>        
				<div class="column" style="margin-left:2px;">
					<label>Tipo de Fornecedor:</label>
					<select>
						<option>Física</option>
						<option>Jurídica</option>
					</select>
				</div> 
				<div class="column" style="float:right">
					<label>Inscrição Estadual:</label>
					<input type="text" placeholder="Inscrição Estadual"/>                   
				</div>                          
			</div>
			<label>Telefone:</label><br/>
			<input type="tel" placeholder="Telefone"/><br/>
			<div class="row">
				<label>E-mail:</label><br/>
				<input type="email" placeholder="E-mail"/><br/>
			</div>
			<div class="row">
				<label>Site:</label><br/>
				<input type="text" placeholder="Site"/><br/>
			</div>
			<div class="row">
				<label>Contato:</label><br/>
				<input type="text" placeholder="Contato"/><br/>
			</div>
			<label>Endereço:</label><br/>
			<input type="text" placeholder="Endereço"/><br/>
			<label>Número:</label><br/>
			<input type="text" placeholder="Número"/><br/>
			<label>Complemento:</label><br/>
			<input type="text" placeholder="Complemento"/><br/>
			<label>Bairro:</label><br/>
			<input type="text" placeholder="Bairro"/><br/>
			<label>CEP:</label><br/>
			<input type="text" placeholder="CEP"/><br/>
			<label>Cidade:</label><br/>
			<input type="text" placeholder="Cidade"/><br/>
			<label>Estado:</label><br/>
			<select>
                    
			</select><br/>
		</form>  
	</div><!-- Fim div CONTENT-->                
</div>
 
</body>
</html>

Cumps

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado

ou

.sua_DIV {width:auto; height:100%; display:table-cell;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

diego.djss    0

diego.djss
Postado

Bem galera dei um jeito aqui, mais agora apareceu outro problema(essas div's sempre quebram). Coloque uma div "rodape_rigth" e dentro dela coloquei dois botões, ai se eu for diminuindo a tela ou tirar do modo maximizado os botões saim da sua posição. Segue o código:

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style type="text/css">
.right{
width:80%;
height:100%;
left:200px;
float:right;
padding: 0;
margin: 0;
background-color: #E1E1E1;
min-height:500px;
}
#formulario{
width: 100%;
height: 95%;
position:relative;
top: 10px;
overflow:auto;
margin: 0 0 0 0;
}
#formulario .topo{
width:100%;
height:28px;
background-color:#003366;
padding: 5px 0;
margin: 0 0 10px 0;
text-align:left;
font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
}
#formulario .topo_span{
font-size:28px;
float:left;
color:#FFFFFF;
margin: 0 0 0 20px;
padding: 0px;
text-align:left;
}
#formulario .content{
background-color:#FFFFFF;
width: 100%;
height: auto;
margin: 0;
padding: 20px 0px 20px 0px;
text-align: left;
}
#formulario .content .form_fornecedor{
display:table;
width:100%;
}
#formulario .content .form_fornecedor .row{
width: 99%;
display:table;
margin-left:10px;
}
#formulario .content .form_fornecedor .row input{
width: 99%;
border-radius: 3px;
}
#formulario .content .form_fornecedor .row .column{
width: 33%;
display:inline-block;
}
#formulario .content .form_fornecedor .row .column input{
width: 99%;
border-radius: 3px
}
#formulario .content .form_fornecedor .row .column select{
width: 100%;
border-radius: 3px;
}
#rodape_right{
position:absolute;
bottom:0;
width:100%;
height: 52px;
}
#rodape_right .submit{
display: inline-block;
padding: 10px 20px;
text-decoration: none;
box-sizing: border-box;
font-size: 14px;
border: 0px;
box-shadow: 1px 1px 1px #999;
border-radius: 4px;
margin: 9px 3px;
float:right;
position:relative;
}
/*Efeitos dos botões*/
.but-primary{
color: #fff;
background-color: #0068B4;
}
.but-success{
color: #fff;
background-color: #009835;
}
.but-error{
color: #fff;
background-color: #CC0000;
}
.but-warning{
color: #fff;
background-color: #F28E00;
}
#rodape_right .submit:hover{
color:#003366;
cursor:pointer;
}
</style>
</head>
<body>
<div class="right">
<!--Todo formulário vai usar essa formatação. Sempre pegar o CSS relacionado.-->
<div id="formulario">
<div class="topo"><span class="topo_span">Fornecedor</span></div>
<div class="content">
<form class="form_fornecedor">
<div class="row">
<label>Razão Social:</label><br/>
<input type="text" placeholder="Razão Social"/>
</div>
<div class="row">
<label>Nome Fantasia:</label><br/>
<input type="text" placeholder="Nome Fantasia"/>
</div>
<div class="row">
<div class="column" style="float:left">
<label>CNPJ:</label><br/>
<input type="text" placeholder="CNPJ"/>
</div>
<div class="column" style="margin:0 2px 0 2px; float:left">
<label>Tipo de Fornecedor:</label><br/>
<select>
<option>Física</option>
<option>Jurídica</option>
</select>
</div>
<div class="column" style="float:left">
<label>Inscrição Estadual:</label><br/>
<input type="text" placeholder="Inscrição Estadual"/>
</div>
</div>
<div class="row">
<div class="column" style="float:left">
<label>Telefone 1:</label><br/>
<input type="tel" placeholder="Telefone"/>
</div>
<div class="column" style="float:left; margin:0 2px 0 2px;">
<label>Telefone 2:</label><br/>
<input type="tel" placeholder="Telefone"/>
</div>
<div class="column" style="float:left">
<label>Telefone 3:</label><br/>
<input type="tel" placeholder="Telefone"/>
</div>
</div>
<div class="row">
<label>E-mail:</label><br/>
<input type="email" placeholder="E-mail"/>
</div>
<div class="row">
<label>Site:</label><br/>
<input type="text" placeholder="Site"/>
</div>
<div class="row">
<label>Contato:</label><br/>
<input type="text" placeholder="Contato"/>
</div>
<div class="row">
<div class="column" style="float:left">
<label>CEP:</label><br/>
<input type="text" placeholder="CEP"/>
</div>
<div class="column" style="float:left; margin-left: 5px; width:66%;">
<label>Endereço:</label><br/>
<input type="text" placeholder="Endereço"/>
</div>
</div>
<div class="row">
<label>Complemento:</label><br/>
<input type="text" placeholder="Complemento"/>
</div>
<div class="row">
<div class="column" style="float:left">
<label>Número:</label><br/>
<input type="text" placeholder="Número"/>
</div>
<div class="column" style="float:left; margin:0 2px 0 2px;">
<label>Estado:</label><br/>
<select>
</select>
</div>
<div class="column" style="float:left">
<label>Bairro:</label><br/>
<select>
</select>
</div>
<div class="column" style="float:left">
<label>Cidade:</label><br/>
<select>
</select>
</div>
</div>
</form>
</div><!-- Fim div CONTENT-->
<div id="rodape_right">
<input type="submit" value="Limpar" class="submit but-primary"/>
<input type="submit" value="Cadastrar" class="submit but-primary"/>
</div>
</div>
</div><!--Fim div RIGHT-->
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito