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

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