RocItem position problem

[Tam]

Hi.
I'm using RadOrgChart with custom itemtemplate.
It works fine in FF but in Chrome & IE 10 it has a problem that show in my attachment.
I found that there's a div with class "rocViewPort". In FF its width is "160px" but in Chrome is "0px".
Below is all custom css in use

.RadOrgChart li .rocItem {
    height: auto !important;
    width: 150px !important;
}
.rocItemTemplate {
    border-radius: 10px !important;
    height: auto !important;
}
.RadOrgChart li .rocItemTemplate {
    text-align: center;
    height: auto !important;
    padding: 0px !important;
}
.RadOrgChart .rocItemContent {
    height: auto !important;
}
.rocLineDown {
    top: 24px !important;
}

Can someone help me on this problem?


Thanks.

[Magdalena]

Hello Tam,

I have applied the CSS code you had provided but the result is different as in the images. You can see the behavior of tested project in this video. Could you please modify the attachment to be exactly as in your case and send me back the modified project to I can test it locally?

By the way I have noticed that you are using the !important to overwrite the inbuilt styles. The good practice is to avoid this method of overwriting and using it only if it is necessary (for example to overwrite inline styles). A better way is making a selector stronger, for example by adding the html ahead.

Regards,
Magdalena
Telerik

[Tam]

Hi Magdalena,
This is so strange. After modifying to match my case, test site still worked fine.
I moved my whole css to the test project but nothing happened. Only my published site has this problem.

Some more information about my site:
- It's running on Sharepoint 2010
- It has lots of Telerik controls on page such as Tabstrip, RadMultipage, RACB, RadWindow, RadStyleSheetManager, RadGrid, RadMenu... and this OrgChart has a RadTooltip inside.

There must be some reasons to make the div with class "rocViewPort" has 0px width on Chrome. When I change to 160px using Firebug, it worked.
Well, I cannot upload my modified code due to "Allowed extensions: .jpg, .jpeg, .gif, .png".
Hope someone can help. I was really messed up with this problem.



Thank you so much.

[Magdalena]

Hi Tam,

It is quite hard to determinate the reason of the issue from the provided information. If you want to send the project would suggest you to isolate the issue to a sample project with only RadOrgChart in it.
You can open a support ticket where you have more options for the allowed files attached. You can also upload it to some  server like dropbox.
 
Regards,
Magdalena
Telerik