Tab close image not fixed

7 posts, 0 answers
  1. RichJ
    RichJ avatar
    83 posts
    Member since:
    Aug 2006

    Posted 01 Aug 2013 Link to this post

    Hi all,

    I have a tabstrip that has tabs dynamically added client-side.
    Each tab has a close icon attached - this is working absolutely fine.

    However, if for whatever reason the window containing the tabstrip is scrolled, the tabs move but the icons are fixed in place and left "floating".
    Is there a way to ensure the close img always moves with the tab?

    Cheers
    Rich
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 05 Aug 2013 Link to this post

    Hi VaticNZ,

    Try setting the image position to relative. Please have a look into the following CSS I tried which works fine at my end.

    CSS:
    <style type="text/css">
        .RadTabStrip .rtsLink img
        {
            border: 0;
            position: relative;
            right: -2px;
            margin-top: 3px;
        }
    </style>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dan
    Dan avatar
    14 posts
    Member since:
    Jul 2013

    Posted 05 Aug 2013 Link to this post

    Hellow Shinu, I too have such a requirement. It will be really helpful you can post the entire code you tried.
  5. RichJ
    RichJ avatar
    83 posts
    Member since:
    Aug 2006

    Posted 05 Aug 2013 Link to this post

    Hi Shinu - thanks for your reply.

    I already have this CSS in place and the result is the same with or without.

    Any other ideas?

    Cheers
    Rich
  6. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 05 Aug 2013 Link to this post

    Hi,

    Please have a look into the following full code.

    ASPX:
    <div style="height: 100px; border: 1px solid red; overflow: scroll">
        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" Skin="Office2007"
            OnClientLoad="OnClientLoad">
            <Tabs>
                <telerik:RadTab runat="server" Selected="True" Text="RadTab1">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <input id="Button1" type="button" value="Add Tab" onclick="addtab()" />
        <br />
        <br />
        <telerik:RadButton ID="RadButton1" runat="server" Text="PostBack">
        </telerik:RadButton>
    </div>

    JavaScript:
    <script type="text/javascript">
        var tabStrip1;
     
        function OnClientLoad() {
            tabStrip1 = $find('<%= RadTabStrip1.ClientID %>');
     
            for (var i = 0; i < tabStrip1.get_tabs().get_count(); i++) {
                AttachCloseImage(tabStrip1.get_tabs().getItem(i), "../Images/Close.png");
            }
        }
     
        function addtab() {
            var tab = new Telerik.Web.UI.RadTab();
            tab.set_text("Root RadTab" + tabStrip1.get_tabs().get_count());
            tabStrip1.trackChanges();
            tabStrip1.get_tabs().add(tab);
            AttachCloseImage(tab, "../Images/Close.png");
            tabStrip1.commitChanges();
        }
     
        function CreateCloseImage(closeImageUrl) {
            var closeImage = document.createElement("img");
            closeImage.src = closeImageUrl;
            closeImage.alt = "Close this tab";
            return closeImage;
        }
     
        function AttachCloseImage(tab, closeImageUrl) {
            var closeImage = CreateCloseImage(closeImageUrl);
            closeImage.AssociatedTab = tab;
            closeImage.onclick = function (e) {
                if (!e) e = event;
                if (!e.target) e = e.srcElement;
     
                deleteTab(tab);
     
                e.cancelBubble = true;
                if (e.stopPropagation) {
                    e.stopPropagation();
                }
     
                return false;
            }
            tab.get_innerWrapElement().appendChild(closeImage);
        }
     
        function deleteTab(tab) {
            var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
     
            var tabToSelect = tab.get_nextTab();
            if (!tabToSelect)
                tabToSelect = tab.get_previousTab();
     
            tabStrip.get_tabs().remove(tab);
     
            if (tabToSelect)
                tabToSelect.set_selected(true);
        }
     
    </script>

    CSS:
    <style type="text/css">
        .RadTabStrip .rtsLink img
        {
            border: 0;
            position: relative;
            right: -2px;
            margin-top: 3px;
        }
    </style>

    Thanks,
    Shinu.
  7. RichJ
    RichJ avatar
    83 posts
    Member since:
    Aug 2006

    Posted 06 Aug 2013 Link to this post

    Hi Shinu,

    Thanks for your response.

    This is the exact code and css I'm already using.

    Rich
  8. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 09 Aug 2013 Link to this post

    Hi RichJ,

    Unfortunately I couldn't replicate this issue at my end.

    Thanks,
    Shinu.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017