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

Simple RadMenu DIV Question

1 Answer 34 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 18 Nov 2014, 09:20 PM
I have a web form using Visual studio 2012. On this form, I have two DIV's. One DIV has a RadMenu and the other DIV has some text. I wanted to put some space in between the text and the RadMenu but I cannot seem to make it work using DIV properties margin and/or padding.

I know there is an easy way to do this but I need to use the margin attributes to make it work. The design time view looks perfect but when I run using IE or Chrome the margin-top property for the second DIV is above the RadMenu.

Is this a case where the RadMenu is being rendered at the end?

Here is my test code (there is no code behind):

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.cssPageDivMenu
{
background-color: lightyellow;
text-align: left;
display: block;
}

.cssPageDivTitle
{
background-color: lightblue;
text-align: left;
margin-bottom: 15px;
margin-top: 15px;
display: block;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<div class="cssPageDivMenu">
<telerik:RadMenu ID="RadMenuPage" runat="server" Width="100%">
<Items>
<telerik:RadMenuItem runat="server" NavigateUrl="~/a.aspx" Text="A Page">
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" NavigateUrl="~/b.aspx" Text="B Page">
</telerik:RadMenuItem>
</Items>
</telerik:RadMenu>
</div>
<div class="cssPageDivTitle">
Page Title
</div>
</form>
</body>
</html>

1 Answer, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 21 Nov 2014, 09:15 AM
Hello Ryan,

As the RadMenu in classic render mode is floated, it is necessary to clear them by applying the following styles to its parent
.cssPageDivMenu:after {
    content: "";
    display: block;
    clear: both;
}
 
.cssPageDivMenu {
    zoom: 1;
}

The other solution is to remove floating from the RadMenu
html .RadMenu {
    float: none;
}

Do not hesitate to contact us if you have other questions.


Regards,
Magdalena
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Menu
Asked by
Ryan
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Share this question
or