Closed ainnamran closed 1 day ago
How can i change the footer to the end the page. The default it stacked on my field.
`@extends(backpack_view('layouts.plain')) @section('header')
<style> .card_panel { /* padding-top: 50px; */ padding: 20px; border-radius: 8px; width: 90%; margin: auto; min-height: 800px; /* Adjust this as needed */ background-color: #add8e6; /* Light blue background */ } .bg-light-blue { --bs-text-opacity: 1; background-color: #AECCE4 !important; } .row{ text-align: center; justify-content: center; /* font-size: 40px; */ padding-bottom: 50px; padding-top: 50px; } .text-input{ border: none; width: 100%; } .title{ font-size: 14px; } .input-td{ width: 100%; } .label-td{ text-align: center; padding: 20px; } .table-upper{ width: 100%; } .special-input-form { /* background-color: white; */ border: none; border-radius: 20px; font-size:1.5rem; width: 50%; font-size: 18px; /* padding: 10px; */ } </style> </head>
@endsection @section('content')
@endsection
@section('after_scripts')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10/dist/sweetalert2.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10/dist/sweetalert2.min.css"> <script> $(document).ready(function() { let groupIndex = 1; $('#add-group').click(function() { let newGroup = ` <div class="card mb-3"> <div class="card-body bg-light-blue"> <div class="form-row"> <div class="form-group col-md-4"> <label for="child_name_${groupIndex}">Name as in MyKad / MyKid / Passport</label> <input type="text" class="form-control" id="child_name_${groupIndex}" name="children[${groupIndex}][name]" required> </div> <div class="form-group col-md-4"> <label for="child_mykad_${groupIndex}">MyKad / MyKid / Passport</label> <input type="text" class="form-control" id="child_mykad_${groupIndex}" name="children[${groupIndex}][mykad]" required> </div> <div class="form-group col-md-2"> <label for="child_gender_${groupIndex}">Gender M / F</label> <select class="form-control" id="child_gender_${groupIndex}" name="children[${groupIndex}][gender]" required> <option value="">-</option> <option value="M">M</option> <option value="F">F</option> </select> </div> <div class="form-group col-md-2"> <label for="child_dob_${groupIndex}">Date of Birth</label> <input type="date" class="form-control" id="child_dob_${groupIndex}" name="children[${groupIndex}][dob]" required> </div> </div> <div class="form-row"> <div class="form-group col-md-2"> <label for="child_tax_relief_${groupIndex}">Tax Relief</label> <select class="form-control" id="child_tax_relief_${groupIndex}" name="children[${groupIndex}][tax_relief]" required> <option value="">-</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option> <option value="F">F</option> </select> </div> <div class="form-group col-md-2"> <label for="child_tax_relief_percentage_${groupIndex}">Tax Relief (%)</label> <input type="number" class="form-control" id="child_tax_relief_percentage_${groupIndex}" name="children[${groupIndex}][tax_relief_percentage]" required> </div> <div class="form-group col-md-4"> <label for="child_status_${groupIndex}">Status (A / B / C / D / E / F)</label> <input type="text" class="form-control" id="child_status_${groupIndex}" name="children[${groupIndex}][status]" required> </div> </div> </div> </div>`; $('#children-data-group').append(newGroup); groupIndex++; }); let educationIndex = 1; $('#add-education-group').click(function() { let newGroup = ` <div class="card mb-3 education-group"> <div class="card-body bg-light-blue"> <div class="form-row"> <div class="form-group col-md-3"> <label for="education_from_${educationIndex}">From</label> <input type="date" class="form-control" name="education[${educationIndex}][from]" required> </div> <div class="form-group col-md-3"> <label for="education_to_${educationIndex}">To</label> <input type="date" class="form-control" name="education[${educationIndex}][to]" required> </div> <div class="form-group col-md-3"> <label for="education_school_${educationIndex}">School / College / University</label> <input type="text" class="form-control" name="education[${educationIndex}][school]" required> </div> <div class="form-group col-md-3"> <label for="education_qualification_${educationIndex}">Qualification</label> <select class="form-control" name="education[${educationIndex}][qualification]" required> <option value="">-</option> <!-- Add qualification options here --> </select> </div> <div class="form-group col-md-12"> <label for="education_achievements_${educationIndex}">Achievements</label> <input type="text" class="form-control" name="education[${educationIndex}][achievements]"> </div> </div> </div> </div>`; $('#education-data-group').append(newGroup); educationIndex++; }); let employmentIndex = 1; $('#add-employment-group').click(function() { let newGroup = ` <div class="card mb-3 employment-group"> <div class="card-body bg-light-blue"> <div class="form-row"> <div class="form-group col-md-3"> <label for="employment_from_${employmentIndex}">From</label> <input type="date" class="form-control" name="employment[${employmentIndex}][from]" required> </div> <div class="form-group col-md-3"> <label for="employment_to_${employmentIndex}">To</label> <input type="date" class="form-control" name="employment[${employmentIndex}][to]" required> </div> <div class="form-group col-md-3"> <label for="employment_position_${employmentIndex}">Position Held</label> <input type="text" class="form-control" name="employment[${employmentIndex}][position]" required> </div> <div class="form-group col-md-3"> <label for="employment_employer_${employmentIndex}">Name of Employer</label> <input type="text" class="form-control" name="employment[${employmentIndex}][employer]" required> </div> <div class="form-group col-md-3"> <label for="employment_last_earned_${employmentIndex}">Last Earned</label> <input type="text" class="form-control" name="employment[${employmentIndex}][last_earned]" required> </div> <div class="form-group col-md-9"> <label for="employment_reason_${employmentIndex}">Reason For Leaving</label> <input type="text" class="form-control" name="employment[${employmentIndex}][reason]" required> </div> </div> </div> </div>`; $('#employment-history-group').append(newGroup); employmentIndex++; }); let membershipIndex = 1; $('#add-membership-group').click(function() { let newGroup = ` <div class="card mb-3 membership-group"> <div class="card-body bg-light-blue"> <div class="form-row"> <div class="form-group col-md-3"> <label for="membership_from_${membershipIndex}">From</label> <input type="date" class="form-control" name="membership[${membershipIndex}][from]" required> </div> <div class="form-group col-md-3"> <label for="membership_to_${membershipIndex}">To</label> <input type="date" class="form-control" name="membership[${membershipIndex}][to]" required> </div> <div class="form-group col-md-3"> <label for="membership_position_${membershipIndex}">Position Held</label> <input type="text" class="form-control" name="membership[${membershipIndex}][position]" required> </div> <div class="form-group col-md-3"> <label for="membership_society_${membershipIndex}">Professional Bodies / Societies</label> <input type="text" class="form-control" name="membership[${membershipIndex}][society]" required> </div> </div> </div> </div>`; $('#professional-membership-group').append(newGroup); membershipIndex++; }); let languageIndex = 1; $('#add-language-group').click(function() { let newGroup = ` <div class="card mb-3 language-group"> <div class="card-body bg-light-blue"> <div class="form-row"> <div class="form-group col-md-4"> <label for="language_name_${languageIndex}">Language</label> <input type="text" class="form-control" name="languages[${languageIndex}][name]" required> </div> <div class="form-group col-md-4"> <label for="language_writing_${languageIndex}">Writing (Level)</label> <select class="form-control" name="languages[${languageIndex}][writing]" required> <option value="">-</option> <!-- Add writing level options here --> </select> </div> <div class="form-group col-md-4"> <label for="language_spoken_${languageIndex}">Spoken (Level)</label> <select class="form-control" name="languages[${languageIndex}][spoken]" required> <option value="">-</option> <!-- Add spoken level options here --> </select> </div> </div> </div> </div>`; $('#languages-group').append(newGroup); languageIndex++; }); }); </script>
@endsection`
Close because duplicate here.
How can i change the footer to the end the page. The default it stacked on my field.
`@extends(backpack_view('layouts.plain')) @section('header')
@endsection @section('content')
@endsection
@section('after_scripts')
@endsection`