RadPageLayout CSS Fail

[Ben]

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.

[Ben]

ttt

[Peter Filipov]

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

 

 

[Ben]

[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.

[Peter Filipov]

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