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>
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
0
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
The other solution is to remove floating from the RadMenu
Regards,
Magdalena
Telerik
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.