This is a migrated thread and some comments may be shown as answers.

asp:text input styles getting cleared on full load

1 Answer 74 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Brett
Top achievements
Rank 1
Brett asked on 17 Oct 2012, 07:26 PM
Hi!

I'm running PIE(http://css3pie.com/) and am trying to style my <asp:textbox> inputs using my own custom CSS.   When the page first loads, the CSS styles I have written are applied, but then once all the javascript runs on the page and the telerik style stuff appears, all of the CSS for my text input boxes get cleared in IE, and in Chrome a bunch of them just get overridden.  

I have added the tags EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False" to an input to see if it had an effect, but nothing so far. 

In the pictures attached I show the <asp:textbox> input (login name) having loaded the CSS correctly and the regular non css <input type="textbox"> loaded at the bottom with the telerik Radbutton not loaded yet (on the login button).

The second image shows the login name input as totally blank, the other inputs having applied the CSS3 work that PIE applies, and the Telerik Radbutton styles applied.   

The css looks like this:

HTML BODY input[type=text]
{
color: #777c75;
padding: 6px 10px;
 border: 1px solid #9dabb8;
width: 200px;
-pie-background:url('/images/cssStyle/searchInputBackground.png') repeat-x 0px 0px;
backgroundurl('/images/cssStyle/searchInputBackground.png') repeat-x;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
behavior: url(/includes/PIE.htc);
 
}

The HTML looks like this after being fully loaded:

<input name="ctl00$MasterPage$UserWelcome1$UserNameTextBox" class=" pie_first-child      " id="ctl00_MasterPage_UserWelcome1_UserNameTextBox" style="width: 145px;" _pieId="_19" EnableEmbeddedSkins="False" EnableEmbeddedBaseStylesheet="False" />


And the aspx looks like this:

<telerik:RadAjaxPanel ID="LoginPanel" runat="server" Visible="False" meta:resourcekey="LogoutPanelResource1"
       EnableAJAX="True" Enabled="True" LoadingPanelID="RadAjaxLoadingPanel2">
       <asp:Literal runat="server" ID="boxstart"></asp:Literal>
       <div style="float: right">
           <a id="ResendPasswordLink" onclick="return ExitPage();" href="~/Login/ResetPassword.aspx"
               runat="server">
               <asp:Literal ID="passwordLink" runat="server"></asp:Literal>
           </a>
       </div>
       <div>
           <span style="font-size: 18px; font-weight: bold;">
               <asp:Literal ID="loginText" runat="server" />
           </span>
       </div>
       <div class="loginForm">
           <asp:Literal ID="loginName" runat="server" />
           <asp:TextBox  ID="UserNameTextBox" runat="server" Width="145px" meta:resourcekey="UserNameTextBoxResource1"  EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False" />
           <asp:Literal ID="password" runat="server" />
           <asp:TextBox ID="UserPassword" runat="server" Width="75px" TextMode="Password" meta:resourcekey="UserPasswordResource1" EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False" />
           <telerik:RadButton runat="server" ID="RadLogin" OnClick="RadLoginClick" />
       </div>
       <asp:CheckBox ID="RememberMeChk" runat="server" meta:resourcekey="RememberMeChkResource1">
       </asp:CheckBox>
       <asp:Label ID="RememberMe" Style="color: Black" runat="server" meta:resourcekey="RememberMeResource1"></asp:Label>
       <asp:CustomValidator runat="server" ID="CustomValidator1" Display="None" EnableClientScript="False"></asp:CustomValidator>
       <asp:ValidationSummary runat="server" ID="WelcomeUserValidationSummary" ForeColor="Red"
           ShowSummary="True" />
       <asp:Literal runat="server" ID="boxstop"></asp:Literal>
   </telerik:RadAjaxPanel>



1 Answer, 1 is accepted

Sort by
0
Galin
Telerik team
answered on 22 Oct 2012, 04:09 PM
Hello,

Only the RadFormDecorator decorates the regular <asp:textbox>, but based on the provided markup it seems you are not using it.

However, in case you are setting EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False" the provided styles should work.

Additionally, you can look at this blog post.

Greetings,
Galin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
General Discussions
Asked by
Brett
Top achievements
Rank 1
Answers by
Galin
Telerik team
Share this question
or