Wierd Positionig Issues

5 posts, 0 answers
  1. Mike
    Mike avatar
    20 posts
    Member since:
    Aug 2008

    Posted 03 Dec 2008 Link to this post

    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


  2. Mike
    Mike avatar
    20 posts
    Member since:
    Aug 2008

    Posted 03 Dec 2008 Link to this post

    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


  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Martin
    Admin
    Martin avatar
    585 posts

    Posted 08 Dec 2008 Link to this post

    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.
  5. Mike
    Mike avatar
    20 posts
    Member since:
    Aug 2008

    Posted 10 Dec 2008 Link to this post

    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









  6. Martin
    Admin
    Martin avatar
    585 posts

    Posted 11 Dec 2008 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017