Wierd Positionig Issues

[Mike]

Hi there everyone,

I have just starting using these RadControls, and man, what a great job you guys have done... Its been an absolute pleasure working with them...

That said i am having some wierd browser compatibility issues with the RadRotator. I believe it has something to do with my styling of the ItemTemplate of the control...

This works exactly as i want it to work in Firefox but it IE i get blank nothingness where there is supposed to be my ItemTemplate. occasionaly it will display a sliver of the image i am wanting to display. I am assuming that it is cliping the content of the ItemTemplate for some reason.

I am using some styling for the layers inside the ItemTemplate of the control. Here is the code:

<rad:RadRotator ID="RadRotator1" runat="server" OnItemClick="RadRotator1_ItemClick"

OnItemDataBound="RadRotator1_ItemDataBound" Width="430" Height="395">

<ItemTemplate>

<div id="ResortSpecialContainer">                 <asp:ImageButton ID="btnSpecialImage" runat="server" />

<div id="SpecialName">

<asp:Label ID="lblName" runat="server" /></div>

<div id="SpecialTag">

<asp:Label ID="lblTag" runat="server" /></div>

<div id="SpecialText">

<asp:Label ID="lblText" runat="server" /></div>

</div>

</ItemTemplate>

</rad:RadRotator>

#ResortSpecialContainer{
    height: 395px;
    width: 430px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    top: 1px;
    left: 0px;
    clear: both;
}
#ResortSpecialContainer #SpecialName{
    font-family: "Trebuchet MS", Arial, Verdana;
    font-size: 18px;
    color: #FFFFFF;
    position: absolute;
    top: 270px;
    text-align: center;
    left: 55px;
    width: 320px;
    whitewhite-space: nowrap;
    overflow: hidden;
}
#ResortSpecialContainer #SpecialTag{
    font-family: "Trebuchet MS", Arial, Verdana;
    font-size: 10px;
    color: #FFFFFF;
    position: absolute;
    top: 295px;
    text-align: center;
    left: 65px;
    width: 300px;
    font-weight: bold;
    whitewhite-space: nowrap;
    overflow: hidden;
}
#ResortSpecialContainer #SpecialText{
    font-family: "Trebuchet MS", Arial, Verdana;
    font-size: 18px;
    color: #FFFFFF;
    position: absolute;
    top: 315px;
    text-align: center;
    left: 85px;
    width: 260px;
    whitewhite-space: nowrap;
    overflow: hidden;
}

The layers inside ResortSpecialContainer are absolute positioned to display on top of the image...

Can anyopne see what i am doing wrong here and why IE is way off the reservation on this?

Duncan

[Mike]

Oh, i forgot:

if i do this:

<div id="ResortSpecialContainer">
    <rad:RadAjaxPanel ID="AjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1">
        <rad:RadRotator ID="RadRotator1" runat="server" OnItemClick="RadRotator1_ItemClick"
            OnItemDataBound="RadRotator1_ItemDataBound" Width="430" Height="395">
            <ItemTemplate>
                <asp:ImageButton ID="btnSpecialImage" runat="server" />
                <div id="SpecialName">
                    <asp:Label ID="lblName" runat="server" /></div>
                <div id="SpecialTag">
                    <asp:Label ID="lblTag" runat="server" /></div>
                <div id="SpecialText">
                    <asp:Label ID="lblText" runat="server" /></div>
            </ItemTemplate>
        </rad:RadRotator>
    </rad:RadAjaxPanel>
</div>

The image displays and the ItemTemplat div's display but are repeated ontop of one another for each bound item. I am assuming that this is because of their absolution positioning. So i move ResortSpecialContainer inside the ItemTemplate... This solved the divs repeating ontop of one another but as mentioned in the previous post, IE now does not display much of anything. I am assuming that the RadRotator wraps it own layers around the Template...

Duncan

[Martin]

Hi Duncan,

We are glad you like RadControls suite for ASP.NET AJAX suite, and also we would like to be able to help with your issue. However, in order to be more productive and avoid many threads, I would like to ask you for the following. Prepare a sample project with your scenario, layout, html, etc, then open a new support ticket and send us that project. The behavior you have described may be caused by the absolute positioning, but it can also be caused by missing or non-xhtml doctype, etc.

Once we have your project, we will be able to help.

All the best,
Martin Ivanov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Mike]

That would be difficult... This is a SiteFinity project...

In any case i seemed to have solved it, honestly i am not sure how. It took an additional wrapper layer both outside the RadRotator ItemTemplate and inside. I suspect that the RadRotator lays out the each image bound it it in a "strip" of sorts and moves across, may be wrong about that, not sure.

If this is the case the layer positioning is essential, if a position is used on a div inside the RadRotator ItemTemplate then it could be positioned outside the current viewable area. I suspect the wrapper layer is keeping the ItemTemplate layers reletive to the current view... I dunno... The following works in both IE and FF

#ResortSpecialContainer{
    height: 395px;
    width: 430px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    top: 1px;
    left: 0px;
    clear: both;
}
#ResortSpecialContainer #ResortSpecialArea{
    height: 395px;
    width: 430px;
    position: relative;
}
#ResortSpecialContainer #ResortSpecialArea #SpecialName{
    font-family: "Trebuchet MS", Arial, Verdana;
    font-size: 18px;
    color: #FFFFFF;
    position: absolute;
    top: 270px;
    text-align: center;
    left: 55px;
    width: 320px;
    white-space: nowrap;
    overflow: hidden;
}
#ResortSpecialContainer #ResortSpecialArea #SpecialTag{
    font-family: "Trebuchet MS", Arial, Verdana;
    font-size: 10px;
    color: #FFFFFF;
    position: absolute;
    top: 295px;
    text-align: center;
    left: 65px;
    width: 300px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
}
#ResortSpecialContainer #ResortSpecialArea #SpecialText{
    font-family: "Trebuchet MS", Arial, Verdana;
    font-size: 18px;
    color: #FFFFFF;
    position: absolute;
    top: 315px;
    text-align: center;
    left: 85px;
    width: 260px;
    white-space: nowrap;
    overflow: hidden;
}

<rad:RadAjaxPanel ID="AjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1">
    <div id="ResortSpecialContainer">
        <rad:RadRotator ID="RadRotator1" runat="server" OnItemDataBound="RadRotator1_ItemDataBound"
            Width="430" Height="395">
            <ItemTemplate>
                <div id="ResortSpecialArea">
                    <asp:ImageButton ID="btnSpecialImage" runat="server" />
                    <div id="SpecialName">
                        <asp:Label ID="lblName" runat="server" /></div>
                    <div id="SpecialTag">
                        <asp:Label ID="lblTag" runat="server" /></div>
                    <div id="SpecialText">
                        <asp:Label ID="lblText" runat="server" /></div>
                </div>
            </ItemTemplate>
        </rad:RadRotator>
    </div>
</rad:RadAjaxPanel>

Thanks for the input,

Duncan

[Martin]

Hello Duncan,

We are glad you have managed to handle this issue. Positioning is a tricky technique, and should be used very carefully and only when necessary, as a positined element impacts not only itself in the DOM, but also its parent and siblings.

Sincerely yours,
Martin Ivanov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.