Can not set item width

6 posts, 1 answers
  1. Graham King
    Graham King avatar
    19 posts
    Member since:
    Dec 2006

    Posted 22 Apr 2008 Link to this post

    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>  
  3. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 23 Apr 2008 Link to this post

    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
  5. Graham King
    Graham King avatar
    19 posts
    Member since:
    Dec 2006

    Posted 23 Apr 2008 Link to this post

    Hi Peter,

    I had already tried the Width property, but it has no effect.
  7. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 23 Apr 2008 Link to this post

    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
  8.
  9. Graham King
    Graham King avatar
    19 posts
    Member since:
    Dec 2006

    Posted 23 Apr 2008 Link to this post

    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?
  11. Answer
    Peter
    Admin
    Peter avatar
    6637 posts

    Posted 23 Apr 2008 Link to this post


    Probably you are viewing the test page under IE 6 browser, because we were able to reproduce the problem only after using this browser. If that't the case, you can go ahead and use the following fix:
    <style type="text/css">  
    .level2 .text { padding-right: 0 !important; }  
    </style> 




    Peter
    the Telerik team

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