RocItem position problem

4 posts, 0 answers
  1. Tam
    Tam avatar
    2 posts
    Member since:
    Nov 2013

    Posted 11 Nov 2013 Link to this post

    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.
  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 12 Nov 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tam
    Tam avatar
    2 posts
    Member since:
    Nov 2013

    Posted 12 Nov 2013 Link to this post

    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.
  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 15 Nov 2013 Link to this post

    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.
Back to Top