1
I am creating a labeled Forms inside a view and I would like that when this zoom or go to small Content does not deform. How to do this?
<head>
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/acesso.css" />
</head>
<body>
<div class="row-search row">
<p>Pesquisar</p>
</div>
<div class="row">
<div class="col-md-3">
<label for="empresa" class="label-control">Empresa</label>
<label for="cnpj" class="label-control">CNPJ</label>
</div>
<div class="col-md-9">
<input type="text" class="form-control" id="empresa">
<input type="text" class="form-control" id="cnpj" placeholder="XX.XXX.XXX/YYYY-ZZ">
</div>
</div>
</body>
/*------Principal------*/
.row-search {
}
.label-control{
display:block;
padding-top:10px;
padding-left:250px;
text-align:right;
position:relative;
}
.form-control {
display: block;
width: 30%;
position: relative;
}
.row-result {
}
.row-grid {
height: 20%;
margin-left: 150px;
margin-right: 150px;
font-size:20px;
}
.d-flex {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
Follow images with zoom and no zoom.
@EDIT:------------------------------------------------------------------------------- I used my colleague’s tip and tidied up the code and added a few things that made the environment responsive :
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/acesso.css" />
</head>
<body>
<div class="container-fluid">
<div class="row-input row">
<div class="col-label col-sm-3 col-md-3 col-lg-3">
<label for="empresa" class="label-control">Empresa</label>
</div>
<div class="col-sm-9 col-md-9 col-lg-9">
<input type="text" class="form-control" id="empresa">
</div>
</div>
</div>
</body>
.row-search {
}
.row-input{
}
.col-label{
text-align:right;
margin-top:10px;
}
.label-control{
display:inline;
vertical-align:middle;
}
.form-control {
margin-top:10px;
display: inline-block;
width: 30%;
}
.row-result {
}
.row-grid {
height: 20%;
margin-left: 150px;
margin-right: 150px;
font-size:20px;
}
@media (max-width: 800px) {
}
Images with the modifications :
Your HTML structure is very bizarre, each label + input must be an Row, or else you put the label with col-3 and the input with col-9 (type: label + input + label + input + input)
– hugocsl
I changed the code with your tips Thank you!!
– gvb