Ngx-admin: Add Right To Left Language Support

Created on 6 Nov 2016  路  19Comments  路  Source: akveo/ngx-admin

  • I'm submitting a ...
    [ ] bug report
    [* ] feature request
    [ ] question about the decisions made in the repository

I want to add Right To Left Language (RTL) support to theme. so what is you opinion?
Language like Persian,Arabic,.. start from right and end at left

So how should i start? add a variable in style-sheet file for that or..?
Thanks

enhancement

Most helpful comment

hi
when install ngx-admin, go to app/@theme/theme.module.ts and edit like this:
`
const NB_THEME_PROVIDERS = [

...NbThemeModule.forRoot(
{
name: 'cosmic',
},
[ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME ],
DEFAULT_MEDIA_BREAKPOINTS,
NbLayoutDirection.RTL

).providers,
...NbSidebarModule.forRoot().providers,
...NbMenuModule.forRoot().providers,
];
`

All 19 comments

+1 can the side menu also can be at left?

@vitaly87 yes can be but it be more user friendly if it moved to the right

@PejmanNik what should be changed to support this? what css what prop?

Hi,
I love your theme and need ASAP RTL support.
Do you intend to support RTL soon?

Thanks,
Chen

please update rtl code

hello can you add rtl support

still no support or configuration from contributors that how we can integrate RTL feature with ngx-Admin theme.

I'm creating a "rtl.css" file based on blur theme and can share it when finished. there is an issue that all styles load in the heading so we have to use "!important". I really appreciate if developers suggest any simple way to create a new RTL CSS file that can override default styles. the theme system docs are so confusing. why there is not a simple CSS file? :sob:

It will be nice to have RTL support.
Is it going to happen any time soon?

I'm working on that but as I'm customizing it for my current project, it won't help you enough. I'll create a usable version for all users as soon as possible.

@pourmirzai waiting for that usable RTL version.. 馃憤

still no RTL version?

Hi
I switched to another framework to create my project so I've abandoned the RTL file. Before this, I've changed many classes in templates and not sure if these files will help you enough.
Here is instruction:

  1. Add this line just before </head> in /src/index.html:
    <link rel="stylesheet" href="assets/rtl.css">
  2. download attached zip file and extract it.
  3. put rtl.css in /src/assets/
  4. put fonts folder inside /src/assets/. Attached Fonts are opensource and free to use.
  5. put blur-bg-new.jpg folder inside /src/assets/images

That' it. hope this helps someone. the expected screen is also attached.
Good luck

RTL for NGX-admin.zip
download

Hey Guys, the RTL support is on its way into the next release. You can check the corresponding PR here https://github.com/akveo/ngx-admin/pull/1634.

How can I set default for RTL?

RTL support is released now, here the docs https://akveo.github.io/nebular/#/docs/usability/righttoleft-rtl. Hope you find it useful!

hi
when install ngx-admin, go to app/@theme/theme.module.ts and edit like this:
`
const NB_THEME_PROVIDERS = [

...NbThemeModule.forRoot(
{
name: 'cosmic',
},
[ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME ],
DEFAULT_MEDIA_BREAKPOINTS,
NbLayoutDirection.RTL

).providers,
...NbSidebarModule.forRoot().providers,
...NbMenuModule.forRoot().providers,
];
`

Hi,
I've done what you have said, but side bar is still on the left side, what should i do?

for sidebar add "start" without quote to <nb-sidebar start></<nb-sidebar>

Was this page helpful?
0 / 5 - 0 ratings

Related issues

AZm1n picture AZm1n  路  4Comments

pulfabio picture pulfabio  路  4Comments

igorls picture igorls  路  3Comments

yanyim picture yanyim  路  3Comments

fabltd picture fabltd  路  3Comments