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

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<code> class to <code>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

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