+1-888-365-2779
Try Now
More in this section

Forums / Designing with Sitefinity / YUI Grids and Sitefintiy Page/Template Admin

YUI Grids and Sitefintiy Page/Template Admin

12 posts, 0 answered
  1. JohnGassman
    JohnGassman avatar
    18 posts
    Registered:
    03 Nov 2006
    01 Jan 2009
    Link to this post
    Hello,

    I am trying to use the YUI (Yahoo User Interface) grids CSS and seem to be running into a problem when editing pages and templates in the sitefinity admin pages. The layout of the page gets altered to the point where some page elements are not accessible (i.e. Theme selector in template admin). Specifically, the administration "chrome" is messed up - the area above the page content is affected, and the right column seems to be OK.

    This seems to be true on both Firefox 3 and IE7. The line that seems to cause the issue is a "margin: auto" setting on the "doc" container (standard YUI grid HTML container element - it's a div encapsulating everything on the page).

    Here is my markup:
    1<%@ Master Language="C#" %> 
    2 
    3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    4 
    5<script runat="server"
    6</script> 
    7 
    8<html xmlns="http://www.w3.org/1999/xhtml" > 
    9<head runat="server"
    10    <title>Untitled Page</title> 
    11    <meta http-equiv="content-type" content="text/html; charset=utf-8" />      
    12     
    13</head> 
    14<body class="home"
    15<div id="doc" class="yui-t5"
    16    <form id="PageForm" runat="server"
    17        <asp:ScriptManager ID="ScriptManager1" runat="server"
    18        </asp:ScriptManager> 
    19        <div id="hd"
    20            <rna:PageBanner ID="PageBanner" runat="server" /> 
    21            <div id="TopNavigation"
    22                <rna:PageMainNav ID="MainNav" runat="server" /> 
    23            </div> 
    24        </div> 
    25        <div id="bd"
    26            <div id="yui-main"
    27                <div class="yui-b"
    28                    <div class="yui-gb"
    29                        <div class="yui-u first"
    30                            <asp:ContentPlaceHolder id="Column1" runat="server"></asp:ContentPlaceHolder> 
    31                        </div> 
    32                        <div class="yui-u"
    33                            <asp:ContentPlaceHolder id="Column2" runat="server"></asp:ContentPlaceHolder> 
    34                        </div> 
    35                        <div class="yui-u last"
    36                            <asp:ContentPlaceHolder id="Column3" runat="server"></asp:ContentPlaceHolder> 
    37                        </div> 
    38                    </div> 
    39                </div> 
    40            </div> 
    41            <div class="yui-b"><asp:ContentPlaceHolder id="SideBarContent" runat="server"></asp:ContentPlaceHolder></div>     
    42        </div> 
    43        <div id="ft"
    44            <rna:PageFooter ID="PageFooter" runat="server" /> 
    45        </div> 
    46   </form> 
    47</div> 
    48</body> 
    49</html> 
    50 

    and here is the applicable CSS (as reported by firebug):
    #doc, #doc2, #doc3, #doc4, .yui-t1, .yui-t2, .yui-t3, .yui-t4, .yui-t5, .yui-t6, .yui-t7 { 
    margin:auto; 
    min-width:750px; 
    text-align:left; 
    width:57.69em; 

    If I comment out the "margin:auto;" setting, the layout is OK, otherwise, it's messed up.

    Please note that the live site looks as it should - it's only when editing the page or the template in the sitefinity admin pages that the layout is affected.

    Thanks for any insight as to how I might fix this.

    Regards,
    John Gassman
    Workstate Consulting
  2. Gabe Sumner
    Gabe Sumner avatar
    440 posts
    Registered:
    09 Sep 2007
    02 Jan 2009
    Link to this post
    Hey John,

    I'm taking a stab in the dark here; does toggling the Edit Mode make any difference?  In the past I've found the Classic Edit Mode to be more forgiving.

    This option is at the top of the page in the page editor (next to the template selection).

    Gabe Sumner
    http://www.sitefinitywatch.com/
  3. JohnGassman
    JohnGassman avatar
    18 posts
    Registered:
    03 Nov 2006
    02 Jan 2009
    Link to this post
    Hey Gabe,

    Thanks for the reply. Though, we are already using "Classic" mode, since the overlay mode behaves sketchily in some cases.

    -john
  4. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    08 Jan 2009
    Link to this post
    Hi JohnGassman,

    We should test YUI with your masterpage and styles in order to see what the best option will be.
    How about disabling YUI when you are in Edit mode? This way you will have all of the rest functionality available. Here's the code that will help you in this case:
     private bool IsPageInAdmin() 
        { 
           // will return TRUE is the page is viewed in administration part 
            if (this.Page.Request.QueryString.ToString().IndexOf("cmspagemode=preview") > 0) 
              return true
          // will return TRUE is the page is in editing mode 
            if (this.Page.Request.QueryString.ToString().IndexOf("cmspagemode=edit") > 0) 
              return true
          // the page is viewed in the public part. 
          return false
        } 

    All the best,
    Georgi
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. ColinBowern
    ColinBowern avatar
    20 posts
    Registered:
    12 Aug 2012
    21 Feb 2009
    Link to this post
    Disabling the styles in the admin mode feels like a hack and defeats the purpose of having a visual editor, no?
  6. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    25 Feb 2009
    Link to this post
    Hello Colin,

    It seems like a hack indeed, but the javascripts and the css styles of these tools are interfering with the Sitefinity page editor. We will check if there is a workaround for this again and will come back if we find something interesting.

    Kind regards,
    Georgi
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  7. JohnGassman
    JohnGassman avatar
    18 posts
    Registered:
    03 Nov 2006
    25 Feb 2009
    Link to this post
    Georgi,

    Thank you for the follow-up. I do want to clarify that we are only using the CSS base and reset features of YUI - so YUI javascript is not a contributing factor here. Also, it appears as though the basic CSS that I mentioned in my initial post is causing the edit view layout issue. That CSS is pretty basic, and is a fairly typical approach to centering content in web pages. Although, I have not tested a more minimal set of CSS to see if I can force the issue with much simpler CSS.

    I have to say that we think Sitefinity is a great product, with the best, most responsive support we have ever experienced! And, we know how complicated this issue is. However, we also believe that, ideally, nothing in the page layout or content should affect the behavior of the utilities used to maintain those pages.

    Best regards,
    John Gassman
    Workstate Computing
  8. KMac
    KMac avatar
    133 posts
    Registered:
    15 Dec 2008
    25 Feb 2009
    Link to this post
    Hey John,

    Also just taking a stab in the dark, but we also use YUI for our layouts and the only thing that I can see that you have that's different from what we have is the class of 'home' on the body. Is it possible that there's some specificity issues between your styles and some sitefinity class by the same name? We also use a strict dtd (but that will introduce a few other headaches).

    Kalvin
  9. JohnGassman
    JohnGassman avatar
    18 posts
    Registered:
    03 Nov 2006
    25 Feb 2009
    Link to this post
    Hello Kalvin,

    That's a good point, but that "home" class is only applied on the Home page, and we are experiencing the same formatting issue on all pages of our site. It is entirely possible that some cascading/specificity conflict is occuring, though the firebug tool is pretty good about letting you know which styles apply a given element. I was able to pinpoint the YUI style that caused the issue, and it did not *appear* that there were any Sitefinity admin-mode classes that were clashing.

    Thanks for making me think on it though!

    Best regards,
    John Gassman
    Workstate Consulting
  10. Ivan
    Ivan avatar
    478 posts
    Registered:
    16 Jun 2015
    03 Mar 2009
    Link to this post
    Hello JohnGassman,

    we are glad that you were able to figure out the problem. YUI being fairly popular, we'll try to arrange with our UX team to make a KB on how to work with YUI in Sitefinity. Hopefully, this will help in the future.

    Best wishes,
    Ivan
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  11. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    04 Mar 2009
    Link to this post
    Hi JohnGassman,

    I have managed to reproduce your initial problem. I think it happens because you have a div (<div id="doc" class="yui-t5">) outside the form tag in your masterpage. In page editor mode all html inside the form tag is placed in a special div (<div class="sf_wrapper">). And in your case the first div stays outside the subsidiary div causing layout problems.

    Is there a reason why you have done so? Try to move the div inside the form tag to see if the problem persists.

    <%@ Master Language="C#" %>  
          
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
          
        <script runat="server">  
        </script>  
          
        <html xmlns="http://www.w3.org/1999/xhtml" >  
        <head id="Head1" runat="server">  
            <title>Untitled Page</title>  
            <meta http-equiv="content-type" content="text/html; charset=utf-8" />       
        </head>  
        <body class="home">  
            <form id="PageForm" runat="server">  
        <div id="doc" class="yui-t5">  
               ............. 
        </div>  
           </form>  
        </body>  
        </html>  


    Greetings,
    Katia
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  12. JohnGassman
    JohnGassman avatar
    18 posts
    Registered:
    03 Nov 2006
    05 Mar 2009
    Link to this post
    Hello Katia,

    Bingo! I completely overlooked that. I switched the form/div tags around, and all is looking great. Thank you very much!

    Best regards,
    John Gassman
    Workstate Consulting
Register for webinar
12 posts, 0 answered