Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Sticky footer as per demos


Hello

In the demos, regardless of the amount of content in the "content" area, the footer is positioned at the bottom of the viewport.

When developing locally, the footer moves up the body area, to the bottom of the available content.

I have validated the class names for footer & content divs are the same as per the demos.

I want the footer to stay at the bottom of the viewport, regardless of how much content is available in the body.

What could I be doing wrong?


Text formatting options
Submit

Replies (12)


Hi,

Could you please let us know which Metronic version and demo are you referring to ?

Regards.



Metronic version 8, demo 1.

https://snipboard.io/lypmzX.jpg

-----------------------

Also, when using Blazor, I use the JSInterop to import the plugins.bundle.js and scripts.bundle.js files, when loading the initial dashboard (from demo 1), the dropdowns work fine.

If I then navigate to another page using the <NavLink> component in Blazor, and go back to the dashboard, the dropdowns no longer work -- however, the menu dropdowns & user menu in the header still work. Only the dropdowns as part of the dashboard widgets stop working...any ideas?



Hi,

Can you please double-check your code? Original Demo 1 layout's footer sticks to the bottom by default as you can see:



Regards.



Which div defines the behaviour of the footer to stick to the bottom of the view port?

I have checked the css classes on both the footer & the content body sections, both of which match the demo template (as I have copy/pasted the code)

Thanks



The code should be exactly as per the demo1's original code, up to the content area. If any element or class is missed this will not work. Please get the original template and try to cleanup the content and you will get the footer stuck to the button.



Hi Sean

I have managed to resolve that issue.

Please could you take a look at the 2nd question I had raised? Copied below for reference:

Also, when using Blazor, I use the JSInterop to import the plugins.bundle.js and scripts.bundle.js files, when loading the initial dashboard (from demo 1), the dropdowns work fine.

If I then navigate to another page using the component in Blazor, and go back to the dashboard, the dropdowns no longer work -- however, the menu dropdowns & user menu in the header still work. Only the dropdowns as part of the dashboard widgets stop working...any ideas?



Hi,

Yes if you are loading our js components as it is shown in our doc the components will be initialized on the first-page load.

This is a bug we will fix in upcoming releases.

For now, you can reinitialize components separately on your pages.

To initialize our KTMenu component use init function.

KTMenu.init();



Thanks for your response Lauris.

What would be the Blazor way to do this? Using JSInterop? i.e

await JS.InvokeVoidAsync("KTMenu.init"));

Thanks



Sorry, the correct function for reinitialization should be KTMenu.createInstances.

Yes, you can do this using InvokeVoidAsync in your file:

@inject IJSRuntime JS

@code {
protected override void OnAfterRender(bool firstRender)
{
if(firstRender){
JS.InvokeVoidAsync("KTMenu.createInstances");
}
}
}



Great thanks, that fixes the dropdown issue.

How would one go about re initialising Select2?

Is there a way to "catch all" reinitialize everything?

When is the fix you mentioned due to be released?

Thanks



Hi,

You do not need to initialize Select2 elements separately.
Check our Selec2 doc for more info:
https://preview.keenthemes.com/metronic8/demo1/documentation/forms/select2.html

We usually do not confirm a release date, we will try to release a fix as soon as possible.



Hi Wandie,
Can you share how did you resolve the footer issue?


Text formatting options
Submit
Text formatting options
Submit