[Solved] Skin Web20 - statusbar height problem

[Fakhrul]

Hi,

I have set Web20 as Skin for radManager and VisibleStatusBar="false", VisibleTitleBar="false". Titlebar visible  false is working but Status Bar visible false not working. It shows Status bar. For Skin WebBlue, it works fine.

How can solve this?

Thanks in Advance

Fakhrul

[Georgi Tunev]

Hi Fakhrul,

I tried to reproduce the problem but everything is working as expected on my side. Below you can find the code that I used and I have also attached the result - could you please check them and let me know if I have missed something?

<script type="text/javascript">
function openWin(url)
{
    radopen(url, null);
}

</script>

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<telerik:RadWindowManager
    VisibleStatusbar="false"
    Skin="Web20"
    VisibleTitlebar="false"
    ID="RadWindowManager1"
    runat="server">
    <Windows>
        <telerik:RadWindow ID="PopUp" runat="server">
        </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>
<button onclick="openWin('http://www.google.com'); return false;">open RadWindow</button>

If you still experience problems, please open a support ticket and send me a small sample project that reproduces them. I will check it right away.


Kind regards,
Georgi Tunev
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Fakhrul]

Hi,

I have tried exactly same code like you, but its still same. I couldnt able to attach my screenshot.

Do i need to change css? which css?

Thanks!

Fakhrul

[Georgi Tunev]

Hello Fakhrul,

You must open a support ticket in order to be able to use attachments. Please open a new ticket and send us a sample project where the problem could be reproduced so we could check it.


Best wishes,
Georgi Tunev
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Fakhrul]

Ok, i have open a support ticket. ref # 199996.

[Georgi Tunev]

Hello Fakhrul,

In the screenshot that you sent me there is no status bar. By design the Web20 skin for the window has a higher footer (compared to the header). If statusbar is enabled, it will be rendered above the footer - I attached a screenshot where you could see where the statusbar is positioned.

Please note that you are using an old version of the controls. With Q1 2009 all skins received a major face-lift and the screenshot that I initially sent you is from the new version. As you can see, there the header and the footer have equal height.

All the best,
Georgi Tunev
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Fakhrul]

Hi,

What should i do if i want this footer same as thick/bar at top, right and left?

Thanks!

Fakhrul

[Martin]

Hi Fakhrul,

In order to modify the skin, you should:

1. Go to [RadControlsInstallationFolder]/Skins and copy Window.css
2. Create a new folder in your project named 'Skins"
3. Paste Window.css in the new folder
4. Go to [RadControlsInstallationFolder]/Skins/Web20
5. Copy Window.Web20.css and the Window folder
6. Paste these in your Skins folder
7. Add EnableEmbeddedBaseStylesheet="false" and EnableEmbeddedSkins="false" in the server declaration of RadWindow
8. Register Window.css and Window.Web20.css files in the head section of your webpage. First comes Window.css, then Window.Web20.css
9. Set Skin="Web20" in the server declaration of RadWindow
10. Make sure that the paths to the CSS files are correct
11. Reload the page to see if the skin is applied correctly
12. Edit Window.css and Window.Web20.css as well as the images in the Window/ folder the way you need in order to create the new skin.

Best wishes,
Martin Ivanov
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Fakhrul]

Thanks. I have almost done according to your steps. 

<telerik:RadWindowManager
    ID="RadWindowManager1"
    runat="server">
    <Windows>
        <telerik:RadWindow ID="PopUp" runat="server" VisibleStatusbar="false"
    Skin="Web20" VisibleTitlebar="false"  >
        </telerik:RadWindow>
    </Windows>
</telerik:RadWindowManager>

From Server side i set  PopUp.EnableEmbeddedBaseStylesheet="false", PopUp.EnableEmbeddedSkins="false" and PopUp.Skin="Web20" and modify css class accordingly. Its works fine when i open PopUp window.

But when i set  RadWindowManager1.EnableEmbeddedBaseStylesheet="false", RadWindowManager1.EnableEmbeddedSkins="false" and RadWindowManager1.Skin="Web20", it create problem. its shows extra footer height, extra top height, and window sise cannot set. same problem shows for radalert also.

What my requirement is that, popup window do not show title bar but radalert will show title bar. what should i do in this case?

Thanks in Advance

Fakhrul

[Martin]

Hi Fakhrul,

On your second question - if you set VisibleTitleBar="false" in the server declaration of RadWindow, the popups will lose their titlebar, however the alert. prompt and confirm will have a titlebar.

On your first question - make sure that you have registered Window.css and Window.Web20.css in the head section of your webpage. This is required if you are using external basestylesheet and skin for our controls. Also, make sure that the link tags you are using to register these files come after your styles, as the issue you have described looks like inherited global styles. Try to exclude your styles and check if the issue persists. If it is solved, you should change your element selectors with class selectors to avoid further unwanted inheritance.

Best wishes,
Martin Ivanov
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.