Library Search - Category labels are not right aligned when viewed in RTL language

[pcenov]

Observed behavior

The labels of the Categories are not right aligned when viewed in RTL language.

Expected behavior

The labels of the Categories should be right aligned.

Steps to reproduce the issue

1. Install the following build.
2. Import some channels and run the following management command: kolibri manage labeltestdata
3. Switch to RTL language such as Arabic and observe the labels of the Categories.

Additional information

Usage Details

• OS: Windows 10
• Browser: Chrome

[pcenov]

@radinamatic

[akash5100]

can you point out the code? It would be helpful

[MisRob]

Hi @akash5100, it seems that categories are in this <div> of EmbeddedSidePanel component.

Do you use Vue.js devtools? Besides other things, it can be handy for locating a component in Vue code since it can display the whole tree of Vue components

and it also offers the "Select component in a page" feature. Once you have the component name, you can locate it in the code more easily :)

Are you still planning to work on this issue?

[akash5100]

Thanks for the information, I will start working on it.

[MisRob]

Great, thank you

[MisRob]

@akash5100 I'm adding you as an assignee and am also adding myself. I am not working on it, assigning myself only to keep an eye on the issue. Let me know if you need anything.

[akash5100]

Hey @MisRob, are you here?
I haven't changed the code yet, I tried the Vue developer tools ( It was amazing ), Can you check the following output?

before

after making changes in developer console

[MisRob]

Thank you @akash5100, the output looks good to me 👍 We also have a section on RTL support in our documentation that might be helpful to check before submitting a PR, if you haven't seen it already.

[akash5100]

Hi @MisRob, I found that dir: rtl was not working on the KButton component so I tried changing the display type. I am not sure this is correct or wrong but it gives the desired output.
Please have a look at this, if anything is wrong please tell me.

[akash5100]

@MisRob should I submit a PR with the above solution?

[MisRob]

Hi @akash5100, we use dir="auto" for user-generated text (e.g a resource title) but categories labels are predefined in our codebase so there should be no need to change direction or dir. If you have a fix working, feel free to open a PR, and we can follow up there after seeing your code changes.

Just to clarify, was your recording made on a dev server with a hot reload?

[MisRob]

I see an issue that might also mean a problem in our automatic flipping of text-align from left to right that should happen during the build process. However, this can also get broken on the dev server with hot reloading on which is something we're aware of and it shouldn't impact bundles produced without hot reload (mentioned in the guide I referenced). So asking to know if this would be something to check on too.

Thank you for debugging.

[akash5100]

No, I haven't used hot reload,

Hi @akash5100, we use dir="auto" for user-generated text (e.g a resource title) but categories labels are predefined in our codebase so there should be no need to change direction or dir. If you have a fix working, feel free to open a PR, and we can follow up there after seeing your code changes.

Just to clarify, was your recording made on a dev server with a hot reload?

[akash5100]

I started the server with yarn run devserver
I think hot reload is off in this command.

[akash5100]

Sorry to disturb you but I am new to vuejs can you help how should I change the display to flex for each KButton's

[MisRob]

Was there any particular reason for using flex to fix this issue? Since I saw on your recording that we have set text-align: left on buttons, at first, I'd recommend checking that it's been changed properly to text-align: right after you switch to RTL language without hot reload. If it's not happening, then you can try to do it in code on your own by conditionally choosing between text-align: right and text-align: left style based on whether isRtl is true or false. isRtl is one of our utilities that is available for use in each component. You can see an example here, or you can search the codebase for more examples.

Regarding styling Vue components or Vue components in general, I recommend Vue documentation, where you can also find a section on various ways to style components, including dynamic styling. Regarding styling specifically KButtons that are coming from Kolibri Design System you can have a look at appearanceOverrides property.

[akash5100]

Thank you @MisRob for your guidance.
I submitted a PR please have a look!

[MisRob]

Thank you too, @akash5100