FIX_OPD_POLICY_TERMS_ALIGNMENT_ISSUE
This commit is contained in:
parent
04546877dc
commit
ca849e2d33
@ -23,6 +23,14 @@
|
||||
max-width: 440px;
|
||||
}
|
||||
|
||||
#OtherPolicyTermsForm #familyFloaterDiv_others .form-check-inline .form-check-input {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
#OtherPolicyTermsForm #familyFloaterDiv_others .form-check-inline .form-check-label {
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.btn-si-add-teal {
|
||||
background-color: #00a8b5;
|
||||
border: 1px solid #00a8b5;
|
||||
@ -45,63 +53,60 @@
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Fixed columns so Min/Max Age and Payable align across Self / Spouse / Children / Other ages */
|
||||
.policy-72-ff-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 248px 148px 148px minmax(200px, 1fr);
|
||||
column-gap: 20px;
|
||||
row-gap: 14px;
|
||||
align-items: center;
|
||||
min-width: 680px;
|
||||
.policy-72-ff-table {
|
||||
width: 100%;
|
||||
min-width: 860px;
|
||||
}
|
||||
|
||||
.policy-72-ff-grid .ff-cell.ff-member {
|
||||
.policy-72-ff-table td {
|
||||
vertical-align: middle;
|
||||
padding: 5px 6px;
|
||||
}
|
||||
|
||||
.policy-72-ff-table .ff-member-label-col {
|
||||
width: 11%;
|
||||
}
|
||||
|
||||
.policy-72-ff-table .ff-member-control-col {
|
||||
width: 11%;
|
||||
}
|
||||
|
||||
.policy-72-ff-table .ff-elders-col {
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
.policy-72-ff-table .ff-min-col {
|
||||
width: 23%;
|
||||
}
|
||||
|
||||
.policy-72-ff-table .ff-max-col {
|
||||
width: 23%;
|
||||
}
|
||||
|
||||
.policy-72-ff-table .ff-pay-label-col {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.policy-72-ff-table .ff-pay-check-col {
|
||||
width: 12%;
|
||||
}
|
||||
|
||||
.policy-72-ff-table .ff-age-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.policy-72-ff-table .ff-elders-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.policy-72-ff-grid .ff-cell.ff-member-children .ff-children-select {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
max-width: 110px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.policy-72-ff-grid .ff-cell.ff-min,
|
||||
.policy-72-ff-grid .ff-cell.ff-max {
|
||||
display: flex;
|
||||
.policy-72-ff-table .ff-pay-wrap {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.policy-72-ff-grid .ff-cell.ff-pay {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
justify-self: stretch;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.policy-72-ff-grid .ff-cell.ff-other-top {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.policy-72-ff-grid .ff-other-select {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.policy-72-ff-grid .ff-grid-spacer {
|
||||
min-height: 1px;
|
||||
}
|
||||
|
||||
.policy-72-other-members-age-row {
|
||||
@ -109,20 +114,31 @@
|
||||
}
|
||||
|
||||
.policy-72-other-members-age-row.policy-72-other-ages-open {
|
||||
display: contents;
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.policy-72-ff-grid .ff-field-label {
|
||||
.policy-72-ff-table .ff-field-label {
|
||||
white-space: nowrap;
|
||||
font-size: 0.9rem;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.policy-72-ff-grid .ff-age-input {
|
||||
width: 64px;
|
||||
.policy-72-ff-table .ff-pay-wrap .ff-field-label {
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.policy-72-ff-table .ff-age-input {
|
||||
width: 68px;
|
||||
min-width: 48px;
|
||||
}
|
||||
|
||||
.policy-72-ff-table .ff-elders-count-input {
|
||||
width: 64px;
|
||||
background: #d3d3d3;
|
||||
}
|
||||
|
||||
.button-like {
|
||||
display: inline-block;
|
||||
padding: 8px 15px;
|
||||
@ -242,92 +258,138 @@ label {
|
||||
</div>
|
||||
<div id="familyFloaterDiv_others_two" class="row mb-3" style="display:none;">
|
||||
<div class="col-md-4 col-lg-3 d-none d-md-block"></div>
|
||||
<div class="col-md-8 col-lg-9 policy-72-family-grid">
|
||||
<input type="hidden" name="elder_member_count" id="member_count_others" value="0">
|
||||
<div class="policy-72-ff-grid">
|
||||
<div class="ff-cell ff-member">
|
||||
<input class="form-check-input mt-0" type="checkbox" name="family_floaters[]" value="self" id="self_others" checked>
|
||||
<span class="text-dark fw-semibold">Self:</span>
|
||||
</div>
|
||||
<div class="ff-cell ff-min">
|
||||
<span class="ff-field-label">Min Age:</span>
|
||||
<input class="underline-input ff-age-input min_age" type="number" name="self_min_age" id="self_min_age_others" value="18">
|
||||
</div>
|
||||
<div class="ff-cell ff-max">
|
||||
<span class="ff-field-label">Max Age:</span>
|
||||
<input class="underline-input ff-age-input max_age" type="number" name="self_max_age" id="self_max_age_others" value="60">
|
||||
</div>
|
||||
<div class="ff-cell ff-pay">
|
||||
<span class="ff-field-label">Is Payable by employee:</span>
|
||||
<input class="form-check-input mt-0" type="checkbox" name="is_payable_employee_for_self" id="is_payable_employee_for_self_others" value="1" checked>
|
||||
</div>
|
||||
<div class="ff-cell ff-member">
|
||||
<input class="form-check-input mt-0" type="checkbox" name="family_floaters[]" value="spouse" id="spouse_others" checked>
|
||||
<span class="text-dark fw-semibold">Spouse:</span>
|
||||
</div>
|
||||
<div class="ff-cell ff-min">
|
||||
<span class="ff-field-label">Min Age:</span>
|
||||
<input class="underline-input ff-age-input min_age" type="number" name="spouse_min_age" id="spouse_min_age_others" value="18">
|
||||
</div>
|
||||
<div class="ff-cell ff-max">
|
||||
<span class="ff-field-label">Max Age:</span>
|
||||
<input class="underline-input ff-age-input max_age" type="number" name="spouse_max_age" id="spouse_max_age_others" value="60">
|
||||
</div>
|
||||
<div class="ff-cell ff-pay">
|
||||
<span class="ff-field-label">Is Payable by employee:</span>
|
||||
<input class="form-check-input mt-0" type="checkbox" name="is_payable_employee_for_spouse" id="is_payable_employee_for_spouse_others" value="1">
|
||||
</div>
|
||||
<div class="ff-cell ff-member ff-member-children">
|
||||
<span class="text-dark fw-semibold">Children:</span>
|
||||
<select name="family_floaters[]" id="children_others" class="form-select form-control ff-children-select">
|
||||
<option value="0">None</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="ff-cell ff-min">
|
||||
<span class="ff-field-label">Min Age:</span>
|
||||
<input class="underline-input ff-age-input min_age" type="number" name="child_min_age" id="child_min_age_others" value="0">
|
||||
</div>
|
||||
<div class="ff-cell ff-max">
|
||||
<span class="ff-field-label">Max Age:</span>
|
||||
<input class="underline-input ff-age-input max_age" type="number" name="child_max_age" id="child_max_age_others" value="25">
|
||||
</div>
|
||||
<div class="ff-cell ff-pay">
|
||||
<span class="ff-field-label">Is Payable by employee:</span>
|
||||
<input class="form-check-input mt-0" type="checkbox" name="is_payable_employee_for_child" id="is_payable_employee_for_child_others" value="1">
|
||||
</div>
|
||||
<div class="ff-cell ff-other-top">
|
||||
<label class="form-label policy-term-main-label mb-1" for="family_floaters_others">Select Other Members:</label>
|
||||
<select name="family_floaters[]" id="family_floaters_others" class="form-select form-control ff-other-select">
|
||||
<option value="0">None</option>
|
||||
<option value="1P">Only one parent (Either Father / Mother)</option>
|
||||
<option value="2P">Only two parents (Father+Mother)</option>
|
||||
<option value="1PIL">Only one parent in law (Either MIL / FIL)</option>
|
||||
<option value="2PIL">Only two parents in law (FIL + MIL)</option>
|
||||
<option value="2EPORPIL">Parents or PIL (Any two of Father, Mother, MIL, FIL)</option>
|
||||
<option value="EPORPIL">Either Parents or PIL (Parents or Parents In Law)</option>
|
||||
<option value="4EPORPIL">Parents + PIL (Father + Mother + MIL + FIL)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="other_members_age_row" class="policy-72-other-members-age-row">
|
||||
<div class="ff-cell ff-grid-spacer" aria-hidden="true"></div>
|
||||
<div class="ff-cell ff-min">
|
||||
<span class="ff-field-label">Min Age:</span>
|
||||
<input class="underline-input ff-age-input" type="number" name="other_member_min_age" id="other_member_min_age_others" value="18">
|
||||
</div>
|
||||
<div class="ff-cell ff-max">
|
||||
<span class="ff-field-label">Max Age:</span>
|
||||
<input class="underline-input ff-age-input" type="number" name="other_member_max_age" id="other_member_max_age_others" value="60">
|
||||
</div>
|
||||
<div class="ff-cell ff-pay">
|
||||
<span class="ff-field-label">Is Payable by employee:</span>
|
||||
<input class="form-check-input mt-0" type="checkbox" name="is_payable_employee_for_elders" id="is_payable_employee_for_elders_others" value="1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8 col-lg-8 policy-72-family-grid">
|
||||
<table class="policy-72-ff-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="ff-member-label-col">
|
||||
<span class="text-dark fw-semibold">Self:</span>
|
||||
</td>
|
||||
<td class="ff-member-control-col">
|
||||
<input class="form-check-input mt-0" type="checkbox" name="family_floaters[]" value="self" id="self_others" checked>
|
||||
</td>
|
||||
<td class="ff-min-col">
|
||||
<div class="ff-age-wrap">
|
||||
<span class="ff-field-label">Min Age:</span>
|
||||
<input class="underline-input ff-age-input min_age" type="number" name="self_min_age" id="self_min_age_others" value="18">
|
||||
</div>
|
||||
</td>
|
||||
<td class="ff-max-col">
|
||||
<div class="ff-age-wrap">
|
||||
<span class="ff-field-label">Max Age:</span>
|
||||
<input class="underline-input ff-age-input max_age" type="number" name="self_max_age" id="self_max_age_others" value="60">
|
||||
</div>
|
||||
</td>
|
||||
<td class="ff-pay-label-col">
|
||||
<span class="ff-field-label">Is Payable by employee:</span>
|
||||
</td>
|
||||
<td class="ff-pay-check-col">
|
||||
<input class="form-check-input mt-0" type="checkbox" name="is_payable_employee_for_self" id="is_payable_employee_for_self_others" value="1" checked>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="ff-member-label-col">
|
||||
<span class="text-dark fw-semibold">Spouse:</span>
|
||||
</td>
|
||||
<td class="ff-member-control-col">
|
||||
<input class="form-check-input mt-0" type="checkbox" name="family_floaters[]" value="spouse" id="spouse_others" checked>
|
||||
</td>
|
||||
<td class="ff-min-col">
|
||||
<div class="ff-age-wrap">
|
||||
<span class="ff-field-label">Min Age:</span>
|
||||
<input class="underline-input ff-age-input min_age" type="number" name="spouse_min_age" id="spouse_min_age_others" value="18">
|
||||
</div>
|
||||
</td>
|
||||
<td class="ff-max-col">
|
||||
<div class="ff-age-wrap">
|
||||
<span class="ff-field-label">Max Age:</span>
|
||||
<input class="underline-input ff-age-input max_age" type="number" name="spouse_max_age" id="spouse_max_age_others" value="60">
|
||||
</div>
|
||||
</td>
|
||||
<td class="ff-pay-label-col">
|
||||
<span class="ff-field-label">Is Payable by employee:</span>
|
||||
</td>
|
||||
<td class="ff-pay-check-col">
|
||||
<input class="form-check-input mt-0" type="checkbox" name="is_payable_employee_for_spouse" id="is_payable_employee_for_spouse_others" value="1">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="ff-member-label-col">
|
||||
<span class="text-dark fw-semibold">Children:</span>
|
||||
</td>
|
||||
<td class="ff-member-control-col">
|
||||
<select name="family_floaters[]" id="children_others" class="form-select form-control d-inline-block ms-2" style="width: 86px;">
|
||||
<option value="0">None</option>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="ff-min-col">
|
||||
<div class="ff-age-wrap">
|
||||
<span class="ff-field-label">Min Age:</span>
|
||||
<input class="underline-input ff-age-input min_age" type="number" name="child_min_age" id="child_min_age_others" value="0">
|
||||
</div>
|
||||
</td>
|
||||
<td class="ff-max-col">
|
||||
<div class="ff-age-wrap">
|
||||
<span class="ff-field-label">Max Age:</span>
|
||||
<input class="underline-input ff-age-input max_age" type="number" name="child_max_age" id="child_max_age_others" value="25">
|
||||
</div>
|
||||
</td>
|
||||
<td class="ff-pay-label-col">
|
||||
<span class="ff-field-label">Is Payable by employee:</span>
|
||||
</td>
|
||||
<td class="ff-pay-check-col">
|
||||
<input class="form-check-input mt-0" type="checkbox" name="is_payable_employee_for_child" id="is_payable_employee_for_child_others" value="1">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<span class="text-dark">Select Other Members:</span>
|
||||
</td>
|
||||
<td colspan="4">
|
||||
<select name="family_floaters[]" id="family_floaters_others" class="form-select form-control" style="max-width: 430px;">
|
||||
<option value="0">None</option>
|
||||
<option value="1P">Only one parent (Either Father / Mother)</option>
|
||||
<option value="2P">Only two parents (Father+Mother)</option>
|
||||
<option value="1PIL">Only one parent in law (Either MIL / FIL)</option>
|
||||
<option value="2PIL">Only two parents in law (FIL + MIL)</option>
|
||||
<option value="2EPORPIL">Parents or PIL (Any two of Father, Mother, MIL, FIL)</option>
|
||||
<option value="EPORPIL">Either Parents or PIL (Parents or Parents In Law)</option>
|
||||
<option value="4EPORPIL">Parents + PIL (Father + Mother + MIL + FIL)</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="other_members_age_row" class="policy-72-other-members-age-row">
|
||||
<td colspan="2" class="ff-elders-col">
|
||||
<div class="ff-elders-wrap">
|
||||
<span class="ff-field-label">Elders Count:</span>
|
||||
<input class="underline-input ff-elders-count-input" type="number" name="elder_member_count" id="member_count_others" value="0" readonly>
|
||||
</div>
|
||||
</td>
|
||||
<td class="ff-min-col">
|
||||
<div class="ff-age-wrap">
|
||||
<span class="ff-field-label">Min Age:</span>
|
||||
<input class="underline-input ff-age-input" type="number" name="other_member_min_age" id="other_member_min_age_others" value="18">
|
||||
</div>
|
||||
</td>
|
||||
<td class="ff-max-col">
|
||||
<div class="ff-age-wrap">
|
||||
<span class="ff-field-label">Max Age:</span>
|
||||
<input class="underline-input ff-age-input" type="number" name="other_member_max_age" id="other_member_max_age_others" value="60">
|
||||
</div>
|
||||
</td>
|
||||
<td class="ff-pay-label-col">
|
||||
<span class="ff-field-label">Is Payable by employee:</span>
|
||||
</td>
|
||||
<td class="ff-pay-check-col">
|
||||
<input class="form-check-input mt-0" type="checkbox" name="is_payable_employee_for_elders" id="is_payable_employee_for_elders_others" value="1">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="append_html_for_other_policy_terms_72_after_family"></div>
|
||||
@ -754,15 +816,16 @@ function si_keup_num_to_word2(input) {
|
||||
function syncPolicy72ElderMemberCount() {
|
||||
var map = { '0': 0, '1P': 1, '2P': 2, '1PIL': 1, '2PIL': 2, '2EPORPIL': 2, 'EPORPIL': 1, '4EPORPIL': 4 };
|
||||
var v = $('#family_floaters_others').val();
|
||||
$('#member_count_others').val(map[v] !== undefined ? map[v] : 0);
|
||||
var elderCount = map[v] !== undefined ? map[v] : 0;
|
||||
$('#member_count_others').val(elderCount);
|
||||
}
|
||||
|
||||
function togglePolicy72OtherMembersAgeRow() {
|
||||
var v = $('#family_floaters_others').val();
|
||||
if (v && v !== '0') {
|
||||
$('#other_members_age_row').addClass('policy-72-other-ages-open');
|
||||
$('#other_members_age_row').addClass('policy-72-other-ages-open').css('display', 'table-row');
|
||||
} else {
|
||||
$('#other_members_age_row').removeClass('policy-72-other-ages-open');
|
||||
$('#other_members_age_row').removeClass('policy-72-other-ages-open').css('display', 'none');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user