Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

RTL Sidebar white space


hi
i am using metronic v8 with angular v18
and i got a problem with RTL style file
when change language to ar (RTL) I typed this code in app.component.ts
ngOnInit() {
this.modeService.init();
const lang = this.translationService.getSelectedLanguage();

if (lang === 'ar') {
document.documentElement.setAttribute('dir', 'rtl');
document.documentElement.setAttribute('lang', 'ar');
document.getElementById('kt_app_wrapper')?.style.setProperty('margin-left', '0', 'important');
this.setStyle('assets/css/style.rtl.css');
} else {
document.documentElement.setAttribute('dir', 'ltr');
document.documentElement.setAttribute('lang', 'en');
this.setStyle('assets/css/style.css');
}

}
private setStyle(href: string) {
let linkEl = document.getElementById('appStyle') as HTMLLinkElement;
if (!linkEl) {
linkEl = document.createElement('link');
linkEl.rel = 'stylesheet';
linkEl.id = 'appStyle';
document.head.appendChild(linkEl);
}
linkEl.href = href;
  }

and it works very good but my problem is
there is a white space (sidebar) make my content disappear if there is an image can i upload it to see
this white space comes from
<app-sidebar #ktSidebar id="kt_app_sidebar" class="app-sidebar flex-column" [ngClass]="appSidebarDefaultClass"> </app-sidebar>
in en mode it works because this white space is fixed on left so sidebar on left normally
but in mode ar and rtl the sidebar moves to right so this fixed white space will be visible top on my conetent
how to remove it ????


user
Mohamed Elyamani 9 months ago
RTL
3 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
Faizal Author 8 months ago

Hi

Please upload the screenshots to imgbb.com, then paste the URL without https.

Make sure your custom RTL CSS is loaded after the main Metronic CSS files to for proper override:

/* Add this to ensure your styles override Metronic defaults */

html[dir="rtl"] #kt_app_sidebar {

    right: 0 !important;

    left: auto !important;

    position: fixed !important;

}



html[dir="rtl"] #kt_app_wrapper {

    margin-left: 0 !important;

    margin-right: var(--bs-app-sidebar-width, 265px) !important;

}



Thanks


user
Mohamed Elyamani 8 months ago

Hi Faizal
i can't insert a screenshot i don't know how
but the problem not solved using your code
i used this in app.component.ts
//=====================
ngOnInit() {
this.modeService.init();
const lang = this.translationService.getSelectedLanguage();

if (lang === 'ar') {
document.documentElement.setAttribute('dir', 'rtl');
document.documentElement.setAttribute('lang', 'ar');
document.getElementById('kt_app_wrapper')?.style.setProperty('margin-left', '0', 'important');
this.setStyle('assets/css/style.rtl.css');
} else {
document.documentElement.setAttribute('dir', 'ltr');
document.documentElement.setAttribute('lang', 'en');
this.setStyle('assets/css/style.css');
}

}
private setStyle(href: string) {
let linkEl = document.getElementById('appStyle') as HTMLLinkElement;
if (!linkEl) {
linkEl = document.createElement('link');
linkEl.rel = 'stylesheet';
linkEl.id = 'appStyle';
document.head.appendChild(linkEl);
}
linkEl.href = href;
  }
//=============
** and put this style
//==============
html[dir="rtl"] {
/* Sidebar */
#kt_app_sidebar {
right: 0 !important;
left: auto !important;
}

#kt_app_wrapper {
margin-left: 0 !important;
margin-right: var(--bs-app-sidebar-width, 265px) !important;
}

/* خلي الهيدر نفسه يمتد يمين */
#kt_app_header {
right: 0 !important;
left: auto !important;
width: calc(100% - var(--bs-app-sidebar-width, 265px)) !important;
margin-right: var(--bs-app-sidebar-width, 265px) !important;
margin-left: 0 !important;
}

/* عدل الكونتينر جوه الهيدر */
#kt_app_header_container {
padding-right: 30px !important;
padding-left: 0 !important;
  }


user
Faizal Author 8 months ago

Hi Mohamed Elyamani

The issue is that Metronic v8's RTL implementation doesn't automatically adjust the sidebar positioning and content wrapper margins. You need to modify your app.component.ts to handle the sidebar positioning for RTL mode properly.
Here's the updated code for your ngOnInit() method:

ngOnInit() {

  this.modeService.init();

  const lang = this.translationService.getSelectedLanguage();



  if (lang === "ar") {

    document.documentElement.setAttribute("dir", "rtl");

    document.documentElement.setAttribute("lang", "ar");

    document.getElementById("kt_app_wrapper")?.style.setProperty("margin-left", "0", "important");

    this.setStyle("assets/css/style.rtl.css");

    

    // Fix RTL sidebar positioning

    const sidebar = document.getElementById("kt_app_sidebar");

    if (sidebar) {

      sidebar.style.setProperty("right", "0", "important");

      sidebar.style.setProperty("left", "auto", "important");

    }

    

    // Adjust content wrapper for RTL

    const contentWrapper = document.getElementById("kt_app_wrapper");

    if (contentWrapper) {

      contentWrapper.style.setProperty("margin-right", "0", "important");

      contentWrapper.style.setProperty("margin-left", "auto", "important");

    }

  } else {

    document.documentElement.setAttribute("dir", "ltr");

    document.documentElement.setAttribute("lang", "en");

    this.setStyle("assets/css/style.css");

    

    // Reset sidebar positioning for LTR

    const sidebar = document.getElementById("kt_app_sidebar");

    if (sidebar) {

      sidebar.style.setProperty("left", "0", "important");

      sidebar.style.setProperty("right", "auto", "important");

    }

    

    // Reset content wrapper for LTR

    const contentWrapper = document.getElementById("kt_app_wrapper");

    if (contentWrapper) {

      contentWrapper.style.setProperty("margin-left", "0", "important");

      contentWrapper.style.setProperty("margin-right", "auto", "important");

    }

  }

}


If this doesn't resolve the issue, please share a screenshot of the white space problem.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(