JSFiddle - React, Tailwind, and code Playground
HTML
<div class="upage background_PRINCIPAL" id="cadastrar_USUARIO">
<div class="upage-outer fixed-header-footer">
<div class="upage-content ac0 content-area vertical-col left" id="page_85_81">
<div class="grid grid-pad urow uib_row_2 row-height-2" data-uib="layout/row" data-ver="0">
<div class="col uib_col_2 col-0_12-12" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col">
<form action="" method="post" id="form_Cadastro">
<label class="item item-input widget uib_w_28 d-margins" data-uib="ionic/input" data-ver="0" id="acao" style="display: none;">
<input type="text" name="acao" value="cadastrar">
</label>
<label class="item item-input widget uib_w_11 d-margins" data-uib="ionic/input" data-ver="0" id="lbl_NOME"><span class="input-label">Nome</span>
<input type="text" name="lbl_NOME">
</label>
<label class="item item-input widget uib_w_12 d-margins" data-uib="ionic/input" data-ver="0" id="lbl_APELIDO"><span class="input-label">Apelido</span>
<input type="text" name="lbl_APELIDO">
</label>
<label class="item item-input item-select widget uib_w_15 d-margins" data-uib="ionic/select" data-ver="0" id="lbl_SEXO">
<div class="input-label">Sexo</div>
<select name="lbl_SEXO">
<option value="M">Masculino</option>
<option value="F">Feminino</option>
</select>
</label>
<label class="item item-input widget uib_w_16 d-margins" data-uib="ionic/input"...
CSS
/*
Warning: This CSS file has been auto-generated from a .less file. If you edit it your edits will be lost the next time LessCSS is run.
It would be best to make a separate CSS file and place any overriding CSS in there. If you must access the original CSS, do so by editing the .less files.
*/
/* global settings */
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0px;
}
/* grid */
.grid {
width: 100%;
}
.upage-content > .grid {
max-width: none;
margin-left: auto;
margin-right: auto;
}
/* gutter around whole design */
/*
.upage-content > .grid-pad {
padding: @gutter @gutter 0px @gutter;
}
*/
/* column */
.urow:not(.cright) > .col {
float: left;
}
.urow.cright > .col {
float: right;
}
.col {
position: relative;
min-height: 1px;
}
.content-area {
position: relative;
}
/* row */
.urow {
clear: both;
position: relative;
}
form.urow {
margin-bottom: 0px;
}
.widget {
position: relative;
}
/* for widgets and the like
<div class="table-thing widget">
<div class="narrow-control w85"> my width is set </div>
<div class="wide-control"> my width is 100%, minus the set width of the narrow-control</div>
</div>
.w85 { width:85px; }
*/
.vertical-col > *, .vertical-col > .table-thing, .vertical-col > .afScrollPanel > .table-thing, .wrapping-col > .no_wrap.table-thing, .wrapping-col > .afScrollPanel > .no_wrap.table-thing {
width: 100%;
}
#afui .vertical-col > .afScrollPanel > .widget, #afui .vertical-col > .widget, .vertical-col > .widget {
width: calc(100% - 10px);
margin-left: 5px;
}
.col > .vertical-col > .widget {
width: 100%;
margin-left: 0;
}
.table-thing {
display: table;
}
.wide-control {
display: table-cell;
width: 100%;
}
.narrow-control {
display: table-cell;
}
/* wrapping column */
.wrapping-col.right > *, .wrapping-col.right > .afScrollPanel > * {
...
JavaScript
var inputs = $('input').get();
$(inputs).on('focus', function () {
var pos = $(this).offset();
console.log("Posicao do top " + pos.top)
// não precisas de saber o ID se a intenção é somente usar $('#' + id),
// nesse caso já tens o elemento escolhido com $(this).closest('.upage')
$(this).closest('.upage').scrollTop(pos.top);
});