Web Development Blog

Resize RadSplitter to the size of its content

Working with the Telerik RadSplitter control I had the situation where I had dynamic controls in a panel inside a RadSplitter.

If you are using any sort of tree control or expanding panel you will find the RadSplitter is only resized to the size of the contents when the page first loads and if you change the height of the content you get scroll bars. This is quite undesirable if you are using the left panel for some sort of navigation. I searched for a solution and all information from Telerik indicate this is by design and the control doesn't support this type of behavior.

But it is possible, if you look at the online help you will see they use the splitter control with this exact behavior. Find a page with a little bit on content and expand the tree menu.You will find the RadSplitter controls height is increased and no scroll bars appear. So how come it works here?

I inspected the HTML and styles to see what the differences were with my control. I found the height on each RadPane was set to auto.

So here is the basic setup of the RadSplitter, RadPanelBar and RadPanes. 

<telerik:RadSplitter ID="RadSplitter1" runat="server" CssClass="Splitter" Width="970px" 
    BorderSize="0"
    <telerik:RadPane ID="RadPane1" CssClass="NavigationPanel" runat="server" Width="200px" 
        MaxWidth="200"
        <telerik:RadPanelBar runat="server" ID="RadPanelBar1" Width="200px" CausesValidation="False"
            <Items> 
                <telerik:RadPanelItem runat="server" Text="Show All" Value="showall"
                </telerik:RadPanelItem> 
                <telerik:RadPanelItem Text="Messages" runat="server" Expanded="True" Value="messagesummary"
                    <Items> 
                        <telerik:RadPanelItem Text="Item 1" runat="server"
                        </telerik:RadPanelItem> 
                        <telerik:RadPanelItem Text="Item 2" runat="server"
                        </telerik:RadPanelItem> 
                        <telerik:RadPanelItem Text="Item 3" runat="server"
                        </telerik:RadPanelItem> 
                    </Items> 
                </telerik:RadPanelItem> 
            </Items> 
        </telerik:RadPanelBar> 
    </telerik:RadPane> 
    <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" EnableResize="False" /> 
    <telerik:RadPane ID="RadPane2" CssClass="ContentPanel" runat="server"
        <asp:Panel ID="Panel1" runat="server"
            <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder> 
        </asp:Panel> 
    </telerik:RadPane> 
</telerik:RadSplitter> 

The height is set using JavaScript so the easiest way is to override the height using CSS.

 
.Splitter,.NavigationPanel,.ContentPanel  
    heightauto !important; 

After this CSS addition you will find the splitter will resize to the height of the panels content.


Running Silverlight in Firefox 5 on OSX requires restart in 32 bit mode

I ran into the problem with Firefox 5 where when I visited a web page using Silverlight that Firefox prompted me that the plugin would not work and I would need to restart in 32 bit mode. After the restart I would work but its a pain as each time I restarted I would be prompted to again.

As it turned out all I had to do was update my version of the Silverlight plugin as the problem had been fixed. First I uninstalled Silverlight on OSX it quite straight forward. I followed the  instructions from Microsoft.

 

Removing Silverlight plugins on Macintosh

  1. Access your hard drive
    Double-click the hard drive icon on your desktop
  2. Find the plugin
    Navigate to your Internet Plug-Ins directory: /Library/Internet Plug-Ins/
  3. Remove the plugin
    Drag any of the following into your trash bin:
    • Silverlight.plugin
    • WPFe.plugin
       

Installing Silverlight

After removing the old version I went to the Silverlight install page and downloaded the latest version and ran the instalation program.


jQuery News Ticker

I wanted a typewriter news ticker that would display news items one character at a time. I had a look round and there are a few jQuery news tickers available but I just wanted something very simple that worked with jQuery 1.3.2. I couldn't find a plugin that exactly fitted my requirements so I decided to make my own.

The news ticker reads the markup which can be either an unordered list of news items or a collection of links. Getting the jQuery news ticker working is as follows, the code and documentation is here.

 
        $(document).ready(function () { 
            $("#news").newsticker(); 
        });