Stacked Footer

[ainnamran]

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')

@csrf

Full Name (as per MyKad)		Email		MyKad No.
Date of Birth		Citizenship	Select country Afghanistan Albania Algeria Andorra Angola Antigua and Barbuda Argentina Armenia Australia Austria Azerbaijan Bahamas Bahrain Bangladesh Barbados Belarus Belgium Belize Benin Bhutan Bolivia Bosnia and Herzegovina Botswana Brazil Brunei Bulgaria Burkina Faso Burundi Côte d Ivoire Cabo Verde Cambodia Cameroon Canada Central African Republic Chad Chile China Colombia Comoros Congo (Congo-Brazzaville) Costa Rica Croatia Cuba Cyprus Czechia (Czech Republic) Democratic Republic of the Congo Denmark Djibouti Dominica Dominican Republic Ecuador Egypt El Salvador Equatorial Guinea Eritrea Estonia Eswatini (fmr. Swaziland) Ethiopia Fiji Finland France Gabon Gambia Georgia Germany Ghana Greece Grenada Guatemala Guinea Guinea-Bissau Guyana Haiti Holy See Honduras Hungary Iceland India Indonesia Iran Iraq Ireland Italy Jamaica Japan Jordan Kazakhstan Kenya Kiribati Kuwait Kyrgyzstan Laos Latvia Lebanon Lesotho Liberia Libya Liechtenstein Lithuania Luxembourg Madagascar Malawi Malaysia Maldives Mali Malta Marshall Islands Mauritania Mauritius Mexico Micronesia Moldova Monaco Mongolia Montenegro Morocco Mozambique Myanmar Namibia Nauru Nepal Netherlands New Zealand Nicaragua Niger Nigeria North Korea North Macedonia Norway Oman Pakistan Palau Palestine State Panama Papua New Guinea Paraguay Peru Philippines Poland Portugal Qatar Romania Russia Rwanda Saint Kitts and Nevis Saint Lucia Saint Vincent and the Grenadines Samoa San Marino Sao Tome and Principe Saudi Arabia Senegal Serbia Seychelles Sierra Leone Singapore Slovakia Slovenia Solomon Islands Somalia South Africa South Korea South Sudan Spain Sri Lanka Sudan Suriname Sweden Switzerland Tajikistan Tanzania Thailand Timor-Leste Togo Tonga Trinidad and Tobago Tunisia Turkey Turkmenistan Tuvalu Uganda Ukraine United Arab Emirates United Kingdom United States of America Uruguay Uzbekistan Vanuatu Venezuela Vietnam Yemen Zambia Zimbabwe	Gender	Select gender Female Male
Race	Select Race Malay Chinese Indian	Passport		Passport Expiry
Status	Select Status Single Married Divorced Widow	Religion	Select Religion Islam Buddhism Hinduism Sikhism Catholicism Judaism Bahai Confucianism Native Taoism Wicca Shinto Eastern Orthodox Roman Religion Paganism	Contact No.
Home No.		Weight (kg)		Height (cm)
Resedential Address
Line 1			Line 2
Postcode		City		State
Country
Permanent Address
Line 1			Line 2
Postcode		City		State
Country
Education Data From To School / College / University Qualification - Achievements
+ Add Group
Employment History From To Position Held Name of Employer Last Earned Reason For Leaving
+ Add Group
Professional Membership / Societies From To Position Held Professional Bodies / Societies
+ Add Group
Languages Language Writing (Level) - Spoken (Level) -
+ Add Group
Children Data Name as in MyKad / MyKid / Passport MyKad / MyKid / Passport Gender M / F - M F Date of Birth Tax Relief - A B C D E F Tax Relief (%) Status (A / B / C / D / E / F)
+ Add Group
@include('filter.ageChild')
Submit

@endsection

@section('after_scripts')
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<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>

<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`

[jcastroa87]

Hello @ainnamran

I cant see correctly all the code, can you share in other way please.

In any case, you can follow the example on our footer template.

Cheers.

[jcastroa87]

Due to not activity, I will close this issue, but please feel free to re-open or create a new one if needed.

Cheers.