Editor-Document Manager: right to left support in IE 8,9, 10

[ido nahmias]

Editor-Document Manager: right to left support in IE 8,9, 10

Open the document manager and select on of the files.
Then you can notice in the file description, that there is a big space between the labels and the text-boxes.

*See the attached screenshot.

Thanks

[Ianko]

Hi Ido,

I tried to reproduce the same issue locally, but to no avail. As I tested the described problem I did not find any problematic visual elements on the Document Manager in RadEditor. I am attaching a short clip showing the test process, so you can let me now if I am missing something that leads to the scenario in the attached picture. 

As I am just guessing about the steps leading to this issue I would recommend you to check for some custom CSS rules in your project that can lead to such problem.

After reviewing your project and you still encounter the same issue, please get back to me with a sample project that isolates the problematic scenario, so I can investigate the visual problems. 

Regards,
Ianko
Telerik

[ido nahmias]

hi
 
you didnt try the Right to Left example.
please try this example :
http://demos.telerik.com/aspnet-ajax/editor/examples/righttoleft/defaultcs.aspx

Thanks

[Ianko]

Hello Ido,

Thank you for the additional information. I have logged this for fixing your Telerik points will be updated for your report.

The possible workaround for this issue is setting custom styling rule in the CSS file directed from the DialogsCssFile property:

.LinkManager .reDialogLabel span,
.LinkManager .reLabelCell
{
    width:50px;
}

This way the label and the table cell are limited to the desired width.

I am attaching the customized CSS file and a picture showing the results from this customizations.

 
Regards,
Ianko
Telerik

[ido nahmias]

that solution didn't worked for us. the bug occurs on explorer 8 and 9.
we tried something else and it seems to work:
.reControlsLayout .reControlCell
{
    text-align:right !important;
} 

there is a different problem with chrome and explorer 10 i attached a photo showing the problem.
I took the phone from the telerik demo site

[Ianko]

Hello Ido,

This is a known issue and it is going to be fixed with the previously logged bug for the Right to Left support.

The workaround for this issue is adding the following CSS rule:

.LinkManager .reDropdown
{
    left: 0 !important;
}

Regards,
Ianko
Telerik

[ido nahmias]

Hi, 
I tried to apply your solution to our code.
the problem in chrome and explorer 10 is fixed but it causes the same problem in explorer 9 & 8 (it is out of the screen).
each browser calculate the left differently.

[Ianko]

Hi Ido,

Please excuse me for missing to include IE 8 and 9 in the solution.

The updated sample below should help you resolve the problem:

.reToolWrapper {
    float: right !important;
    position: relative;
}

#LinkCssClass {
    position: absolute;
    top: -12px;
    left: 0;
}

Regards,
Ianko
Telerik

[ido nahmias]

Hi,

Thank you for your help.
I tried again to apply you solution and now it doesn't work on chrome. i'm not sure exactly what i suppose to do.
this works on chrome:

.LinkManager .reDropdown

{

    left: 0 !important;

}

but when i combine it with:

.reToolWrapper {

    float: right !important;

    position: relative;

}

 

#LinkCssClass {

    position: absolute;

    top: -12px;

    left: 0;

}

it doesn't work.
 
I need to write a different CSS for each browser?

[Ianko]

Hi Ido,

You can find attached a sample project with a CSS file for the right to left support. You can follow the setup from there for your own.

Regards,
Ianko
Telerik