Getting rid of blue select line in chrome

Thread is closed for posting
6 posts, 0 answers
  1. Garrett
    Garrett avatar
    35 posts
    Member since:
    Feb 2012

    Posted 28 Jul 2014 Link to this post

    Hi there,

    I have a chart that has active areas set but when the page is rendered and the area is drawn with html, it has a blue outline where the area is. I tried the typical img border:none stylesheet trick but it does not work. Is there an attribute I can set or anything to make this line go away?

    I have attached a screenshot of the chart I'm working with, the line is around the blue piece with the 15 over it.
  2. Garrett
    Garrett avatar
    35 posts
    Member since:
    Feb 2012

    Posted 28 Jul 2014 in reply to Garrett Link to this post

    I forgot to say that in IE it appears the stylesheet thing works, but not chrome.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 29 Jul 2014 Link to this post

    Hello Garrett,

    Could you try to reproduce the mentioned issue with the code below and then tell us what changes you have made, so that I can make an investigation locally?
    ASPX:
    <telerik:RadChart ID="RadChart1" runat="server" Height="400px" Width="600px">
        <Series>
            <telerik:ChartSeries Type="Pie" Name="Series 1" Appearance-LegendDisplayMode="ItemLabels">
                <Items>
                    <telerik:ChartSeriesItem YValue="18" Name="Item1">
                    </telerik:ChartSeriesItem>
                    <telerik:ChartSeriesItem YValue="2" Name="Item2">
                    </telerik:ChartSeriesItem>
                    <telerik:ChartSeriesItem YValue="1" Name="Item3">
                    </telerik:ChartSeriesItem>
                    <telerik:ChartSeriesItem YValue="9" Name="Item4">
                    </telerik:ChartSeriesItem>
                </Items>
            </telerik:ChartSeries>
        </Series>
        <PlotArea Appearance-FillStyle-MainColor="Transparent" Appearance-FillStyle-SecondColor="Transparent"></PlotArea>
    </telerik:RadChart>



    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Garrett
    Garrett avatar
    35 posts
    Member since:
    Feb 2012

    Posted 29 Jul 2014 in reply to Danail Vasilev Link to this post

    Hi Danail,

    Basically my chart is very similar to yours but I have added this in the code behind:

    protected void RadChart1_ItemDataBound(object sender, ChartItemDataBoundEventArgs e)
        {
            e.SeriesItem.ActiveRegion.Attributes = "target=_blank";
            switch (e.SeriesItem.Index)
            {
                case 0: // receivables to generate
                    {
                        e.SeriesItem.ActiveRegion.Tooltip = "Receivables to Generate";
                        e.SeriesItem.ActiveRegion.Url = "http://www.google.com/";
                        e.SeriesItem.ActiveRegion.Attributes = "onclick=\"window.open('http://www.google.com/', null); return false;\"";
                         
                        break;
                    }
                case 1: // unsubmitted deals
                    {
                        e.SeriesItem.ActiveRegion.Tooltip = "Unsubmitted Deals";
                        e.SeriesItem.ActiveRegion.Url = "http://www.google.com/";
                        e.SeriesItem.ActiveRegion.Attributes = string.Format("onclick=\"Open({0}); return false;\"", "'UnsubmittedDeals'");
                        break;
                    }
                case 2: // unapproved deals
                    {
                        e.SeriesItem.ActiveRegion.Tooltip = "Unapproved Deals";
                        e.SeriesItem.ActiveRegion.Url = "http://www.google.com/";
                        e.SeriesItem.ActiveRegion.Attributes = string.Format("onclick=\"Open({0}); return false;\"", "'UnapprovedDeals'");
                        break;
                    }
                case 3: // unapproved payouts
                    {
                        e.SeriesItem.ActiveRegion.Tooltip = "Unapproved Payouts";
                        e.SeriesItem.ActiveRegion.Url = "http://www.google.com/";
                        e.SeriesItem.ActiveRegion.Attributes = string.Format("onclick=\"Open({0}); return false;\"", "'UnapprovedPayouts'");
                        break;
                    }
                default:
                    break;
            }
        }


    If you inspect the element it is clearly the HTML plot area that is drawn when the page is rendered:

    <area shape="poly" href="XXXXXXXXXXXXX.aspx" coords="213,212,108,222,102,164,144,113,202,107,260,101,311,143,317,201,317,204,317,208,317,211" alt="Unapproved Payouts" title="Unapproved Payouts" onclick="Open('UnapprovedPayouts'); return false;">

    Typically you can combat area shape outlines by using this css:

    <style>a img {border:none; }</style>

    but unfortunately this does not affect the grid for some reason.

    So it's difficult to tackle because the line has nothing to do with the chart, but the chart is preventing the fix somehow.
  6. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 30 Jul 2014 Link to this post

    Hi Garrett,

    You must use the following style:
    <style>
        img[usemap], map area {
            outline: none;
        }
    </style>

    More information is available here.

    You can also fin the full runnable example on this regard in the attached archive.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Garrett
    Garrett avatar
    35 posts
    Member since:
    Feb 2012

    Posted 30 Jul 2014 in reply to Danail Vasilev Link to this post

    Wonderful! Thank you! This works great.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017