12 Answers, 1 is accepted
Rank 2
I have added style shown below, in order to hide the default icon in RadAlert and it is working fine for me.
CSS:
| <style type="text/css"> |
| div.radwindow_Default .windowcontent .windowpopup.radalert |
| { |
| background:none !important; |
| } |
| </style> |
Thanks,
Shinu
The approach that Shinu has used is the correct one. You can use it without any concerns.
All the best,
Martin Ivanov
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.
Rank 2
Veteran
The CSS is for Q3 2008 while you are using Q2 2010 - there were some changes made to the dialog skinning during this period.
With the current version you could use the following style
.radalert { background:none !important; }but I would recommend to use a custom alert template (where you can remove completely the icon from the code) instead - more info is available here. This way you will ensure that such changes would not affect the content of the dialog.
Greetings,
Georgi Tunev
the Telerik team
Rank 1
Can you please tell me where i put this Css class
This is a CSS selector that should be placed on the same page where the RadWindowManager is.
e.g.
<head id="Head1" runat="server"> <title></title> <style type="text/css"> .radalert { background: none !important; } </style></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <script type="text/javascript"> function showWin() { radalert("test"); } </script> <button onclick="showWin(); return false;"> Show RadWindow</button> <telerik:RadWindowManager ID="RadWindowManager1" runat="server"> </telerik:RadWindowManager> </form>Regards,
Georgi Tunev
the Telerik team
Rank 1
Hello,
I used this code
.radalert
{
background: none !important;
}
.radconfirm
{
background: none !important;
}
</style>
<!-- content start -->
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" IconUrl=""
Skin="None">
</telerik:RadWindowManager>
<script type="text/javascript">
function callConfirm() {
radconfirm(
'Sunteti sigur?', confirmCallBackFn, 330, 100, null, "Reclamatii 1.0");
}
function confirmCallBackFn(arg) {
var ajaxManager = $find("<%=RadAjaxManager1.ClientID%>");
if (arg) {
ajaxManager.ajaxRequest(
'ok');
}
else {
ajaxManager.ajaxRequest(
'cancel');
}
}
</
script>
The icon is still displayed. Any idea?
.radalert ; .radconfirm ; > <!-- content start --> ="RadAjaxManager1_AjaxRequest"> > ="RadGrid1"> > /> > > > > ="" ="text/javascript"> callConfirm() { ); confirmCallBackFn(arg) { ); (arg) { ); { ); >The . Any idea?
.radalert ; .radconfirm ; > <!-- content start --> ="RadAjaxManager1_AjaxRequest"> > ="RadGrid1"> > /> > > > > ="" ="text/javascript"> callConfirm() { ); confirmCallBackFn(arg) { ); (arg) { ); { ); >The . Any idea?
Your code seems to be working as expected on my end, as you can see in the video I recorded during my tests: http://screencast.com/t/oZy0OrfCGTL. You can find my test page attached as a reference. Please make sure that this is the actual code you are using when you observe this behavior. What I would recommend as well is to clear your browser's cache and rebuild your application in case some settings and CSS have been cached. You can also try using the background-image property and set it to none, as it is a bit more specific:
.radalert { background-image: none !important; } .radconfirm { background-image: none !important; }If you are still experiencing difficulties I would advise that you open a support ticket and send us a runnable page that isolates this behavior so we can examine it locally and pinpoint the cause.
Best wishes,
Marin
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Rank 1
You can use the RadWindow client API to modify the alert as you would do with any RadWindow. To allow only Close behavior you should use set_behaviors method. To hide the titlebar (this will, however, hide also the [X] icon along with it), you should call set_visibleTitlebar. Sample script is available below:
function CallAlert() { var oAlert = radalert("Alert", null, null, "Alert"); //change behaviors, keep titlebar but remove Move oAlert.set_behaviors(Telerik.Web.UI.WindowBehaviors.Close); //remove the titlebar at all oAlert.set_visibleTitlebar(false); }On a side note, I am glad to inform you that we implemented an easier way to change or remove the icon by adding an additional optional parameter when calling radalert and radconfirm instead of overriding CSS - a sample updated demo is available below:
http://demos.telerik.com/aspnet-ajax/window/examples/browserdialogboxes/defaultcs.aspx
I hope that the provided information on changing behavior and looks are helpful, let me know how it goes.
Greetings,
Svetlina Anati
the Telerik team
Rank 1
If I remove image from the radalert it keeps an Empty Space on the left side of the alert . How to remove/adjust the empty space?
Thanks,
Gopal
Rank 2
Please try the below CSS to achieve your scenario.
CSS:
<style type="text/css"> .RadWindow .rwWindowContent .radalert { background: none !important; } .RadWindow .rwDialogText { margin-left: -25%; } .RadWindow .rwDialogPopup .rwPopupButton, .RadWindow .rwDialogPopup .rwPopupButton span { margin-left: -20%; }</style>Thanks,
Princy.