Fixing incorrect footer position when toggling sidebar drawer

This commit is contained in:
Dita Aji Pratama 2024-09-29 19:48:14 +07:00
parent ce6e139e54
commit 2bb770c937
4 changed files with 10 additions and 16 deletions

View File

@ -1,3 +1,3 @@
<footer class="footer" id="footer"> <footer class="footer fixed-bottom" id="footer">
<p>${copyright}</p> <p>${copyright}</p>
</footer> </footer>

View File

@ -26,7 +26,7 @@ body {
.content { .content {
margin-left: 250px; margin-left: 250px;
padding: 20px; padding-bottom: 20px;
transition: margin-left 0.3s ease-in-out; transition: margin-left 0.3s ease-in-out;
} }
@ -35,18 +35,15 @@ body {
} }
.footer { .footer {
position: fixed;
bottom: 0;
width: calc(100% - 250px);
margin-left: 250px;
background-color: #f8f9fa; background-color: #f8f9fa;
padding: 10px; padding-top: 5px;
text-align: center; text-align: center;
margin-left: 250px;
transition: margin-left 0.3s ease-in-out; transition: margin-left 0.3s ease-in-out;
z-index: 1010;
} }
.footer.full-width { .footer.full-width {
width: 100%;
margin-left: 0; margin-left: 0;
} }

View File

@ -79,7 +79,7 @@
</div> </div>
<!-- Footer --> <!-- Footer -->
<footer class="footer" id="footer"> <footer class="footer fixed-bottom" id="footer">
<p>&copy; 2024 Dita Aji Pratama. All rights reserved.</p> <p>&copy; 2024 Dita Aji Pratama. All rights reserved.</p>
</footer> </footer>

View File

@ -26,7 +26,7 @@ body {
.content { .content {
margin-left: 250px; margin-left: 250px;
padding: 20px; padding-bottom: 20px;
transition: margin-left 0.3s ease-in-out; transition: margin-left 0.3s ease-in-out;
} }
@ -35,18 +35,15 @@ body {
} }
.footer { .footer {
position: fixed;
bottom: 0;
width: calc(100% - 250px);
margin-left: 250px;
background-color: #f8f9fa; background-color: #f8f9fa;
padding: 10px; padding-top: 5px;
text-align: center; text-align: center;
margin-left: 250px;
transition: margin-left 0.3s ease-in-out; transition: margin-left 0.3s ease-in-out;
z-index: 1010;
} }
.footer.full-width { .footer.full-width {
width: 100%;
margin-left: 0; margin-left: 0;
} }