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

Can not set item width

5 Answers 221 Views

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

Graham King asked on 22 Apr 2008, 09:30 AM

Hi,

No matter what I do I can not set the width of a menu item.

Here's a cut down version of the markup.

    
            rad:RadMenu ID="RadMenu1" runat="server" Skin="Web20" OnClientItemOpen="OnClientItemOpenHandler" 
        
                                    Width="100%" OnClientLoad="removeDelay" CausesValidation="false" EnableScreenBoundaryDetection="false"> 
        
            <Items> 
        
            <rad:RadMenuItem ID="RadMenuItem4" runat="server" Text="OPTIONS" Style="text-align: left;"> 
        
                <Items> 
        
                    <rad:RadMenuItem ID="RadMenuItem5" runat="server" Text="Export"> 
        
                        <Items> 
        
                            <rad:RadMenuItem ID="RadMenuItem6" runat="server" Value="MenuItemExportOptions" CssClass="StyleToSetMaxWidth"> 
        
                                <ItemTemplate> 
        
                                    <div id="ExportData" class="margin"> 
        
                                        Please note exports will include managers<br /> 
        
                                        (where appropriate) 
        
                                        <asp:RadioButtonList ID="ExportExcelOptionsMenu" runat="server"> 
        
                                            <asp:ListItem Text="As one file" Value="0" Selected="True"> 
        
                                            </asp:ListItem> 
        
                                            <asp:ListItem Text="As individual files" Value="1"> 
        
                                            </asp:ListItem> 
        
                                        </asp:RadioButtonList> 
        
                                        <div style="text-align: right"> 
        
                                            <asp:LinkButton ID="MenuExportButton" runat="server" CssClass="GoButton" Text="Go" 
        
                                                OnClick="ExportButton_Click" OnClientClick=" return CheckSelectedRows()" /></div> 
        
                                    </div> 
        
                                </ItemTemplate> 
        
                            </rad:RadMenuItem> 
        
                        </Items> 
        
                    </rad:RadMenuItem> 
        
                </Item> 
        
            </rad:RadMenu>

The menu item ends up with a load of white space to the right of the RadButtonList which means the menu item goes off the edge of the screen.
If I set EnableScreenBoundaryDetection="true" then because then menu item would go off the edge of the screen it moves it to the top, and moves it off the screen anyway!
I'm happy to leave EnableScreenBoundaryDetection="false" if I can set the width of the menu item.

The style is here:

    
            <style type="text/css">      
        
                .StyleToSetMaxWidth      
        
                {      
        
                    width: 250px !important; 
        
                    max-width: 250px !important; 
        
                }          
        
            </style>

5 Answers, 1 is accepted

answered on 23 Apr 2008, 01:09 PM

Hello Graham,

Have you tried setting the Width property for the template item:

    
            <rad:RadMenuItem ID="RadMenuItem5" runat="server" Text="Export">  
        
                                        <Items> 
        
                                            <rad:RadMenuItem ID="RadMenuItem6" 
        
                                             Width="220px" 
        
                                             runat="server"   
        
                                             Value="MenuItemExportOptions" > 
        
                                                <ItemTemplate> 
        
                                                    <div id="ExportData" class="margin">

This should allow you to regulate the width of the template container.

Regards,
Peter
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 23 Apr 2008, 01:56 PM

AJAXEnabledWebSite3.zip

Hi Graham,

I am not sure why the Width property is not working in your project. Please, find attached a small demo project for reference.

Peter
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 23 Apr 2008, 02:12 PM

Hi Peter,

I'm afraid your demo project shows exactly the same behaviour as my real project but I have found in more details what is happening.

You can see here (link) that there is loads of white space (marked in red) next to the controls. Given that the div which the "Go" linkButton is in has text-align:right, you can see where the edge of the div is so this is not pushing the right side of the menu item out.

The width of the menu item is always at least 271px. If the width property is set less than this it makes no difference, if it is more than this value, then the menu item expands.

Do you have any other ideas how I can get rid of the whitespace?

Accepted