This is a migrated thread and some comments may be shown as answers.

Wierd Positionig Issues

4 Answers 73 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 03 Dec 2008, 10:35 PM
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{ 
    height395px
    width430px
    margin-rightauto
    margin-leftauto
    positionrelative
    top1px
    left0px
    clearboth
#ResortSpecialContainer #SpecialName{ 
    font-family"Trebuchet MS"ArialVerdana
    font-size18px
    color#FFFFFF
    positionabsolute
    top270px
    text-aligncenter
    left55px
    width320px
    whitewhite-spacenowrap
    overflowhidden
#ResortSpecialContainer #SpecialTag{ 
    font-family"Trebuchet MS"ArialVerdana
    font-size10px
    color#FFFFFF
    positionabsolute
    top295px
    text-aligncenter
    left65px
    width300px
    font-weightbold
    whitewhite-spacenowrap
    overflowhidden
#ResortSpecialContainer #SpecialText{ 
    font-family"Trebuchet MS"ArialVerdana
    font-size18px
    color#FFFFFF
    positionabsolute
    top315px
    text-aligncenter
    left85px
    width260px
    whitewhite-spacenowrap
    overflowhidden
 

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


4 Answers, 1 is accepted

Sort by
0
Mike
Top achievements
Rank 1
answered on 03 Dec 2008, 10:43 PM
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


0
Martin
Telerik team
answered on 08 Dec 2008, 02:37 PM
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.
0
Mike
Top achievements
Rank 1
answered on 10 Dec 2008, 05:37 PM
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









0
Martin
Telerik team
answered on 11 Dec 2008, 06:59 AM
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.
Tags
Rotator
Asked by
Mike
Top achievements
Rank 1
Answers by
Mike
Top achievements
Rank 1
Martin
Telerik team
Share this question
or