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

Dynamic width mode


Hi, is it possible to add a dynamic page width button to the page? Can you add this as a feature in the next update?

Also, how can I keep the side menu status in memory?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (10)


Hi,

For the sidebar state, you can refer to this post.

Regarding the dynamic width, could you please clarify it?

Regards.



Hi, I want to dynamically switch between 'Fluid' and 'Fixed' modes.



Hi,

You can put the button and toggle all the containers with app-container classes by applying the:

container-fluid - for fluid mode
container-xxl - for fixed mode

Regards.



How can I do it? Can you share a sample code?



Hi,

Sure, we will share the code as soon as possible. Do you want the function that can be triggered by a button put in a page ?

Regard.



Hi,
the dynamic width button can be added next to the dark mode button.



Hi,

Please put this function at the bottom of the page, after all, js includes, and put a button to toggle it:


// On document ready
KTUtil.onDOMContentLoaded(function () {
document.querySelector("#my_button").addEventListener("click", function() {
var containers = document.querySelectorAll(".app-container");

[].slice.call(containers).map(function(container) {

if (container.classList.contains("container-fluid")) {
container.classList.add("container-xxl");
container.classList.remove("container-fluid");
} else {
container.classList.add("container-fluid");
container.classList.remove("container-xxl");
}
});
});
});



<button class="btn btn-primary">Toggle</button>


Regards.



Hi,

Thank you very much for your interest. I think it will be a useful function if you add it in the new upcoming version. It can be more functional if it can be developed with API.



Also can you make it so that it keeps the width state in the cache?



Hi,

Noted, we will consider implementing it in a future update.
You can refer to this solution if you need to implement this urgently.

Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(