This is a migrated thread and some comments may be shown as answers.

RocItem position problem

3 Answers 32 Views
OrgChart
This is a migrated thread and some comments may be shown as answers.
Tam
Top achievements
Rank 1
Tam asked on 11 Nov 2013, 08:45 AM
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.

3 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 12 Nov 2013, 10:01 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Tam
Top achievements
Rank 1
answered on 12 Nov 2013, 02:32 PM
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.
0
Magdalena
Telerik team
answered on 15 Nov 2013, 09:09 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
OrgChart
Asked by
Tam
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Tam
Top achievements
Rank 1
Share this question
or