I'm stranded with a visual aspect in a project I'm developing
The problem it's related to the text alignment in labels. I can not align the text to the bottom of the label. If you run the snippet, you can check out my problem.
Snippet:
jQuery(function() {
Date.prototype.addDays = function(days) {
var dat = new Date(this.valueOf());
dat.setDate(dat.getDate() + days);
return dat;
}
Date.prototype.yyyymmdd = function() {
var mm = this.getMonth() + 1; // getMonth() is zero-based
var dd = this.getDate();
return [this.getFullYear() + "-",
(mm>9 ? '' : '0') + mm + "-",
(dd>9 ? '' : '0') + dd
].join('');
};
var date0 = new Date();
date0 = date0.yyyymmdd();
var date1 = new Date();
date1 = date1.addDays(1);
date1 = date1.yyyymmdd();
jQuery("#datepiker_0").datepicker({
dateFormat: 'yy-mm-dd'
}).datepicker('setDate', date0)
jQuery("#datepiker_1").datepicker({
dateFormat: 'yy-mm-dd'
}).datepicker('setDate', date1)
jQuery("#datepiker_1").focusout(function(){
});
jQuery("#num_quartos").focusout(function(){
var numero_quartos_selec = jQuery( "#num_quartos" ).val();
var num_quartos_actuais = jQuery(".class_quartos").length;
if( num_quartos_actuais > numero_quartos_selec){
var id_div_del = "";
var id_label_del = "";
var id_br_del = "";
for (var i = num_quartos_actuais; i > numero_quartos_selec; i--){
id_label_del = "#label_quarto_"+i;
id_div_del = "#quarto_"+i;
id_br_del = "#id_br"+i;
jQuery( id_label_del ).remove();
jQuery( id_div_del ).remove();
jQuery( id_br_del ).remove();
}
}
if(num_quartos_actuais < numero_quartos_selec){
var id_div = "";
var id_label = "";
var div_id_label = "";
var id_br = "";
var name_br = "";
var name_div = "";
var name_label_div = "";
var class_div = "class_quartos";
var j = num_quartos_actuais;
var label = "";
var div = "";
var br = "";
var input_1 = "";
var input_2 = "";
var input_3 = "";
var label_1 = "";
var label_2 = "";
var label_3 = "";
var id_input_1 = "";
var name_input_1 = "";
var id_input_2 = "";
var name_input_2 = "";
var id_input_3 = "";
var name_input_3 = "";
var div_center = "";
var div_left = "";
var div_right = "";
var div_id_center = "";
var div_id_left = "";
var div_id_right = "";
var div_center_label = "";
var div_center_label_id = "";
for(var i = num_quartos_actuais; i < numero_quartos_selec; i++){
j++;
id_div = "quarto_"+j;
name_label_div = "Quarto "+j;
name_div = "quarto_"+j;
name_br = "name_br_"+j;
id_br = "id_br"+j;
div_id_label = "label_quarto_"+j;
div_center_label_id = "id_label_center_"+j;
div_center_label_id = jQuery('<div>').attr({id: div_center_label_id, class: "div_center"});
label = jQuery("<label>").attr( 'for', name_div).text(name_label_div);
label = label.attr({id: div_id_label});
label.appendTo(div_center_label_id);
div = jQuery('<div>').attr({id: id_div, name: name_div, class: class_div});
br = jQuery('<br>').attr({id: id_br, name: name_br});
div.appendTo(label);
div_id_center = "div_center"+j;
div_id_left = "div_left"+j;
div_id_right = "div_right"+j;
div_center = jQuery('<div>').attr({id: div_id_center, class: "div_center"});
div_left = jQuery('<div>').attr({id: div_id_left, class: "div_left"});
div_right = jQuery('<div>').attr({id: div_id_right, class: "div_left"});
label_1 = jQuery("<label>").attr( 'for', name_input_1).text("Adultos");
id_input_1 = "num_adultos_"+j;
name_input_1 = "num_adultos_"+j;
input_1 = jQuery('<input>').attr({id: id_input_1, name: name_input_1, value: "2"});
input_1.appendTo(label_1);
label_1.appendTo(div_left);
input_1.appendTo(div_left);
div_left.appendTo(div);
label_2 = jQuery("<label>").attr( 'for', name_input_2).text("Crianças (3-12 anos)");
id_input_2 = "num_criancas_"+j;
name_input_2 = "num_criancas_"+j;
input_2 = jQuery('<input>').attr({id: id_input_2, name: name_input_2, value: "0"});
input_2.appendTo(label_2);
label_2.appendTo(div_right);
input_2.appendTo(div_right);
div_right.appendTo(div);
label_3 = jQuery("<label>").attr( 'for', name_input_3).text("Bebés (0-2 anos)");
id_input_3 = "num_bebes_"+j;
name_input_3 = "num_bebes_"+j;
input_3 = jQuery('<input>').attr({id: id_input_3, name: name_input_3, value: "0"});
input_3.appendTo(label_3);
label_3.appendTo(div_center);
input_3.appendTo(div_center);
div_center.appendTo(div);
jQuery('#num_ocupantes').append(br);
jQuery('#num_ocupantes').append(div_center_label_id);
jQuery('#num_ocupantes').append(div);
}
}
});
});label{
display: block;
width: 75px;
height: 40px;
text-align: center;
}
input{
display: block;
width: 75px;
height: 20px;
text-align: right;
}
.div_center{
display: inline-block;
float:center;
width:100px;
}
.div_left{
float:left;
width:100px;
}
.div_right{
float:right;
width:100px;
}
.conteiner{
text-align:center;
width:100%px;
}
.class_quartos{
text-align:center;
width:100%px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class = "conteiner">
<div class = "div_left">
<label for ="datepiker_0">Chegada</label>
<input type ="text" id = "datepiker_0" name = "datepiker_0" value = "" class = "datepicker">
</div>
<div class = "div_center">
<label for ="datepiker_1">Saída</label>
<input type ="text" id = "datepiker_1" name = "datepiker_1" value = "" class = "datepicker">
</div>
<div class = "div_right">
<label for = "num_quartos">Quartos</label>
<input type = "text" id = "num_quartos" name = "num_quartos" value = "1">
</div>
</div>
<br> </br>
<div id = "num_ocupantes" class= "conteiner">
<div class = "div_center">
<label id = "label_quarto_1" for = "quarto_1">Quarto 1</label>
</div>
<div id = "quarto_1" class = "class_quartos">
<div class = "div_left">
<label for = "num_Adultos_1">Adultos</label>
<input type ="text" id = "num_adultos_1" name = "num_adultos_1" value = "2" class = "num">
</div>
<div class = "div_center">
<label for = "num_criancas_1">Crianças (3-12 anos)</label>
<input type ="text" id = "num_criancas_1" name = "num_criancas_1" value = "0" class = "num">
</div>
<div class = "div_right">
<label for = "num_bebes_1">Bebés (0-2 anos)</label>
<input type ="text" id = "num_bebes_1" name = "num_bebes_1" value = "0" class = "num">
</div>
</div>
</div>If you run the snippet, check that the text of the labels (Chegada, Saída, Quartos, Adultos), it's up in relation to the others.
Is there any way to solve this problem via css?
