[Solved] ASP.NET controls styling issues in SharePoint 2007

[Michael]

I love the Telerik controls, and have decided to use them in a SharePoint 2007 project.

For the most part, they are working well, and functioning perfectly.

There are some issues however, and I'm wondering if anyone has come across this.  I've attached some screenshots.  The problem seems to be centered around textboxes.

Thanks for your time

I've included the markup for my textboxes and grid:

Grid

%@ Page Debug="true"
         Inherits="CCS.PageCode.Contacts, CCS, Version=1.0.0.0, Culture=neutral, PublicKeyToken=69b76c41ff52f857"
         meta:progid="SharePoint.WebPartPages.Document" %>

<%@ Assembly Name="Telerik.Web.UI, Version=2012.1.215.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" %>
<%@ Assembly Name="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"  %>
<%@ Register Assembly="Telerik.Web.UI, Version=2012.1.215.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>

<asp:Content ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
    Contact Listing
</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderTitleBreadcrumb" runat="server">
    <a href="/">Westminster</a> > Contact Listing
</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
    Contact Listing
</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="false" Skin="Office2010Blue">
    </telerik:RadSkinManager>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Office2010Blue" />
    <telerik:RadGrid ID="RadGrid1" runat="server" EnableViewState="true" AllowFilteringByColumn="true"
        AllowSorting="true" AllowPaging="true" AllowCustomPaging="true" PageSize="15"
        AutoGenerateColumns="false" OnItemCreated="RadGrid1_ItemCreated" OnNeedDataSource="RadGrid1_NeedDataSource">
        <PagerStyle Mode="NextPrevAndNumeric" />
        <MasterTableView IsFilterItemExpanded="true">
            <Columns>
                <telerik:GridBoundColumn DataField="ID" HeaderText="Contact ID" />
                <telerik:GridHyperLinkColumn DataTextField="Name" HeaderText="Name" DataNavigateUrlFields="ID" UniqueName="Name"
                    DataNavigateUrlFormatString="~/_layouts/WCC/EditContact.aspx?ID={0}" DataType="System.String"
                    FilterControlWidth="100" />
                <telerik:GridBoundColumn DataField="Address" HeaderText="Address" FilterControlWidth="150" />
                <telerik:GridBoundColumn DataField="Postcode" HeaderText="Postcode" />
                <telerik:GridBoundColumn DataField="ContactIs" HeaderText="Contact Is" />
                <telerik:GridCheckBoxColumn DataField="Active" HeaderText="Active" />
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
</asp:Content>

TextBoxes

<%@ Page Debug="true"
         Inherits="CCS.PageCode.EditContact, CCS, Version=1.0.0.0, Culture=neutral, PublicKeyToken=69b76c41ff52f857"
         meta:progid="SharePoint.WebPartPages.Document" %>

<%@ Assembly Name="Telerik.Web.UI, Version=2012.1.215.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" %>
<%@ Assembly Name="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"  %>
<%@ Register Assembly="Telerik.Web.UI, Version=2012.1.215.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>

<asp:Content ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
    Contact Listing
</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderTitleBreadcrumb" runat="server">
    <a href="/">Westminster</a> > <a href="/_layouts/WCC/Contacts.aspx">Contact Listing</a> > Editing Contact
</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
    Editing Contact: <asp:Label id="lblName" runat="server" />
</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
</asp:Content>

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="false" Skin="Office2010Blue">
    </telerik:RadSkinManager>


    <div class="ms-formbody">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td class="ms-formlabel">Title</td>
            <td><telerik:RadTextBox ID="txtTitle" runat="server" Width="200" Height="40"></telerik:RadTextBox></td>
        </tr>
        <tr>
            <td class="ms-formlabel">First Name</td>
            <td><telerik:RadTextBox ID="txtFirstName" runat="server"></telerik:RadTextBox></td>
        </tr>
        <tr>
            <td class="ms-formlabel">Surname *</td>
            <td><telerik:RadTextBox ID="txtSurname" runat="server"></telerik:RadTextBox></td>
        </tr>
        <tr>
            <td class="ms-formlabel">Salutation</td>
            <td><telerik:RadTextBox ID="txtSalutation" runat="server"></telerik:RadTextBox></td>
        </tr>
        <tr>
            <td class="ms-formlabel">Position</td>
            <td><telerik:RadTextBox ID="txtPosition" runat="server"></telerik:RadTextBox></td>
        </tr>
        <tr>
            <td class="ms-formlabel">Address 1</td>
            <td><telerik:RadTextBox ID="txtAddress1" runat="server"></telerik:RadTextBox></td>
        </tr>
        <tr>
            <td class="ms-formlabel">Address 2</td>
            <td><telerik:RadTextBox ID="txtAddress2" runat="server"></telerik:RadTextBox></td>
        </tr>
        <tr>
            <td class="ms-formlabel">Town / City</td>
            <td><telerik:RadTextBox ID="txtTown" runat="server"></telerik:RadTextBox></td>
        </tr>
        <tr>
            <td class="ms-formlabel">County</td>
            <td><telerik:RadTextBox ID="txtCounty" runat="server"></telerik:RadTextBox></td>
        </tr>
        <tr>
            <td class="ms-formlabel">Postcode</td>
            <td><telerik:RadTextBox ID="txtPostcode" runat="server"></telerik:RadTextBox></td>
        </tr>
        <tr>
            <td class="ms-formlabel">Work Telephone</td>
            <td><telerik:RadTextBox ID="txtWorkPhone" runat="server"></telerik:RadTextBox></td>
        </tr>
        <tr>
            <td class="ms-formlabel">Home Telephone</td>
            <td><telerik:RadTextBox ID="txtHomePhone" runat="server"></telerik:RadTextBox></td>
        </tr>
        <tr>
            <td class="ms-formlabel">Email Address</td>
            <td><telerik:RadTextBox ID="txtEmail" runat="server"></telerik:RadTextBox></td>
        </tr>
        <tr>
            <td class="ms-formlabel">Contact Is</td>
            <td><telerik:RadTextBox ID="txtContactIs" runat="server"></telerik:RadTextBox></td>
        </tr>
    </table>

    <telerik:RadButton ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click"></telerik:RadButton>

    </div>
</asp:Content>

[Michael]

Its worth mentioning that SharePoint 2007 runs in quirks mode.  If I start up the dev tools in IE8 and switch quirks mode off, the telerik controls look fine, but the rest of the sharepoint site is messed up (can't win).

Thanks

[Tsvetoslav]

Hello Michael,

This issue will be fixed for Service Pack 1, however, running in Quirks Mode is a very old and obsolete mode of rendering content in the browser and should be avoided by all means.


Greetings, Tsvetoslav
the Telerik team

[Michael]

Thanks for that Tsvetoslav,  do you have an estimated release date for SP1?

Regarding running in quirks mode; I believe this is the default rendering method of sharepoint 2007.  There is little I can do to avoid it in this instance.

Best Regards,
Michael

[Tsvetoslav]

Hi Michael,

The service pack should be coming out around the middle of April.


Greetings, Tsvetoslav
the Telerik team