Tab close image not fixed

[RichJ]

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

[Shinu]

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.

[Dan]

Hellow Shinu, I too have such a requirement. It will be really helpful you can post the entire code you tried.

[RichJ]

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

[Shinu]

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.

[RichJ]

Hi Shinu,

Thanks for your response.

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

Rich

[Shinu]

Hi RichJ,

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

Thanks,
Shinu.