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

Enlarge the avaiable spece when showing tables


Hello,
Today I'm your spammer... I was wondering if it's simple and possib le to reduce the space as show in the image so that when there's a table, more data are shown.



Thanks
Paolo


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 (14)


https://ibb.co/C91SVnz



Hi happy,

No problem at all. You just need to change the container from the fixed to the fluid one by using .container-fluid instead .container

Regards.



Hello Sean,
Thanks for your fast reply as always, can you please tell me where have I to change this?

Thanks
Paolo



Hi,

Please look at the content part of the layout. May I know which Metronic version and demo you are using?

Regards.



Hello,
I'm using Metronic v8.0.38 Angular Demo1 version



Hi,

Please change container-xxl class to container-fluid for the content container with

Regards.


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.

Hello again,
Looking at the layout-init.service.ts class I've seen that there're 3 init function


private initContent() {
const width = this.layout.getProp("content.width") as string;
this.layout.setCSSClass(
"contentContainer",
width === "fluid" ? "container-fluid" : "container-xxl"
);
}

private initToolbar() {
const display = this.layout.getProp("toolbar.display") as boolean;
if (!display) {
return;
}

document.body.classList.add("toolbar-enabled");
const widthClass = this.layout.getProp("toolbar.width") as string;
this.layout.setCSSClass(
"toolbarContainer",
widthClass === "fluid" ? "container-fluid" : "container-xxl"
);
...}

private initFooter() {
const width = this.layout.getProp("footer.width") as string;
this.layout.setCSSClass(
"footerContainer",
width === "fluid" ? "container-fluid" : "container-xxl"
);
}



isn't it best to set content.width to fluid



Oh yes, it was part of the layout options. In this case, then you can use the settings. Good spot happy



excuse me, I've seen that the layout-init.service.ts changed a bit from 8.1.0 to 8.1.4, and setting to 'fluid' is no longer working... how can I have again the whole space filled?
Thanks



May I know if you are using React version or the HTML version?
layout-init.service.ts is used in the React version.



no, I'm using the Angular one



Demo1 of the Angular app was rewritten in version 8.1.4 and it doesn't have backward compatibility, which means it's not possible to upgrade your old version to it, only possible way is to start work with 8.1.4 and move inside the new application.

Regards,
Keenthemes support



Hello,
I was not aware about this total renew.... btw I have to tell you that there's some error/typos

in enviroment.ts


export const environment = {
production: false,
appVersion: "v8.1.3", <----should be 8.1.4 since the file is from the 8.1.4 package


the're a lot of
appContentContiner
in the code.... shouldn't it be
appContentContainer


About my question is how do I tell to the grid I placed inside the content to take the whole avaiable space and size to it? If I've got a table with just 2 columns it won't take the whole width.

Thanks



Hi Paolo,

Thx for your last message, we will fix it.

Regards,
Keenthemes support


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  :(