RadPageLayout CSS Fail

5 posts, 0 answers
  1. Ben
    Ben avatar
    10 posts
    Member since:
    Dec 2014

    Posted 22 Dec 2014 Link to this post

    I've rat-holed on CSS and the RadPageLayout control thinking I am at fault for the design problems of my page. Turns out it is not me that is mucking things up.

    The straw that broke the camels back was the following story.

    I had a CSS class named .intro in a Telerik ASP.NET AJAX web project, renamed .intro it to .introhdr and changed the aspx markup to reflect the new name. When the web page was loaded, the CSS properties of said class were not used at all. The . Rename the class back to intro, rename the markup to reflect intro, render and the page reflected the CSS properties.

    I've wasted a few hours on this control. .introhdr h1 {
        color:#D2DFCC;
        margin-top:5px;
        font-size:2em;
    }

    What other controls in the "DevCraft" ASP.NET AJAX suite do you have that are the same quality?



    Why was RadPageLayout added to the toolset and released in this state?

            <telerik:RadPageLayout ID="pageLayout" runat="server" ShowGrid="false" RegisterWithScriptManager="true" GridType="Fluid">
                <Rows>
                    <telerik:LayoutRow runat="server">
                        <Columns>
                            <telerik:LayoutColumn runat="server" HtmlTag="Section">
                                <section class="introhdr">
                                    <h1>Alternative Energy Fuel Stations</h1>
                                    <h3>Locate biodiesel, compressed natural gas, ethanol, electric charging, hydrogen, liquefied natural gas, and propane station locations.
                                    </h3>
                                </section>
    .introhdr {
        border-radius: 0px 0px 7px 0px;
        background: -webkit-linear-gradient(#374A3C, #82976E);  /*For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#374A3C, #82976E);  /*For Opera 11.1 to 12.0  */
        background: -moz-linear-gradient(#374A3C, #82976E); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#374A3C, #82976E); /* Standard syntax */
        padding: 0px 10px 20px;
        background-color:#82976E;
        margin-top:0px;
    }
    NOTE this h1 class was renamed as well. .
    .introhdr h1 {
        color:#D2DFCC;
        margin-top:5px;
        font-size:2em;
    }

    Telerik_UI_for_ASP.NET_AJAX_2014_3_1209_Dev_hotfix

    Microsoft Visual Studio Ultimate 2013
    Version 12.0.30723.00 Update 3
    Microsoft .NET Framework
    Version 4.5.51641

    Installed Version: Ultimate

    Architecture and Modeling Tools   06181-004-0451013-02453
    Microsoft Architecture and Modeling Tools
        
    UML® and Unified Modeling Language™ are trademarks or registered trademarks of the Object Management Group, Inc. in the United States and other countries.

    Team Explorer for Visual Studio 2013   06181-004-0451013-02453
    Microsoft Team Explorer for Visual Studio 2013

    Visual Basic 2013   06181-004-0451013-02453
    Microsoft Visual Basic 2013

    Visual C# 2013   06181-004-0451013-02453
    Microsoft Visual C# 2013

    Visual C++ 2013   06181-004-0451013-02453
    Microsoft Visual C++ 2013

    Visual F# 2013   06181-004-0451013-02453
    Microsoft Visual F# 2013

    Visual Studio 2013 Code Analysis Spell Checker   06181-004-0451013-02453
    Microsoft® Visual Studio® 2013 Code Analysis Spell Checker

    Portions of International CorrectSpell™ spelling correction system © 1993 by Lernout & Hauspie Speech Products N.V. All rights reserved.

    The American Heritage® Dictionary of the English Language, Third Edition Copyright © 1992 Houghton Mifflin Company. Electronic version licensed from Lernout & Hauspie Speech Products N.V. All rights reserved.

    Windows Phone SDK 8.0 - ENU   06181-004-0451013-02453
    Windows Phone SDK 8.0 - ENU

    Application Insights Tools for Visual Studio Package   1.0
    Application Insights Tools for Visual Studio

    ASP.NET and Web Tools   12.3.50717.0
    Microsoft Web Developer Tools contains the following components:
    Support for creating and opening ASP.NET web projects
    Browser Link: A communication channel between Visual Studio and browsers
    Editor extensions for HTML, CSS, and JavaScript
    Page Inspector: Inspection tool for ASP.NET web projects
    Scaffolding: A framework for building and running code generators
    Server Explorer extensions for Microsoft Azure Websites
    Web publishing: Extensions for publishing ASP.NET web projects to hosting providers, on-premises servers, or Microsoft Azure

    ASP.NET Web Frameworks and Tools 2012.2   4.1.21001.0
    For additional information, visit http://go.microsoft.com/fwlink/?LinkID=309563

    ASP.NET Web Frameworks and Tools 2013   5.2.20703.0
    For additional information, visit http://www.asp.net/

    Common Azure Tools   1.2
    Provides common services for use by Azure Mobile Services and Microsoft Azure Tools.

    Microsoft Azure Mobile Services Tools   1.2
    Microsoft Azure Mobile Services Tools

    NuGet Package Manager   2.8.50313.46
    NuGet Package Manager in Visual Studio. For more information about NuGet, visit http://docs.nuget.org/.

    Office Developer Tools for Visual Studio 2013 ENU   12.0.30626
    Microsoft Office Developer Tools for Visual Studio 2013 ENU

    PowerShell Tools   1.2
    Provides file classification services using PowerShell

    PreEmptive Analytics Visualizer   1.2
    Microsoft Visual Studio extension to visualize aggregated summaries from the PreEmptive Analytics product.

    SQL Server Analysis Services   
    Microsoft SQL Server Analysis Services Designer
    Version 12.0.2000.8

    SQL Server Integration Services   
    Microsoft SQL Server Integration Services Designer
    Version 12.0.2430.0

    SQL Server Reporting Services   
    Microsoft SQL Server Reporting Services Designers
    Version 12.0.2430.0

    Telerik ASP.NET AJAX VSExtensions   2014.5.1021.0
    Telerik UI for ASP.NET AJAX VSExtensions

    Windows Phone 8.1 SDK Integration   1.0
    This package integrates the tools for the Windows Phone 8.1 SDK into the menus and controls of Visual Studio.

    Workflow Manager Tools 1.0   1.0
    This package contains the necessary Visual Studio integration components for Workflow Manager.
  2. Ben
    Ben avatar
    10 posts
    Member since:
    Dec 2014

    Posted 23 Dec 2014 Link to this post

    ttt
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 25 Dec 2014 Link to this post

    Hello Ben,

    Could you be more specific what is the issue at your side? I have tested the provided code with the mentioned version and everything seems to be fine and styles are applied. Could you send me a screen cast what exactly happens at you side and when the appearance is correct?

    Regards,
    Peter Filipov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Ben
    Ben avatar
    10 posts
    Member since:
    Dec 2014

    Posted 30 Dec 2014 Link to this post

    [Problem]
    RadPageLayout was not using the class assigned to it.

    [Steps]
    Rename the existing class named ".intro" in the CSS file to .introhdr
    Chang the RadPageLayout.Rows.LayoutRow.Colums.LayoutColumn.section class attribute value to reflect new name (.introhdr )

    [expected]
    No change in look for section after page loads

    [actual]
    The section was using the wrong CSS values (where they came from I don't know I didn't look. Inherited maybe?)


    Further, if I renamed the class back to what it was prior to the rename, everything was fine (expected CSS was used)

    I'm going to try using this control again today.
    class were not used at all.

    I removed the control to move forward. Now I want to try it again because I need the advertized features of the RadPageLayout.
  6. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 05 Jan 2015 Link to this post

    Hi Ben,

    I did the described and everything is working fine. Could you please record a video what exactly happens with control at your side.

    Regards,
    Peter Filipov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017