Support forums - CSS dropdown menu renders full screen

Support forums » Products » Cute Editor for .NET » Re: CSS dropdown menu renders full screen

CSS dropdown menu renders full screen

Last post 07-18-2007, 9:15 AM by michl. 10 replies.


	Sort Posts: Previous Next

04-20-2007, 9:22 AM 28650

jattwood
Joined on 12-26-2005
Posts 22

CSS dropdown menu renders full screen

Reply Quote

Getting a strange behaviour with the CSS dropdown box rendering at 100+% of the browser window (see below). This was not occurring in 5.3 Any suggestions?

04-20-2007, 1:31 PM 28657 in reply to 28650

jattwood
Joined on 12-26-2005
Posts 22

Re: CSS dropdown menu renders full screen

Reply Quote

More info on this. After further investigation, it appears that the css property "float:right;" is causing the issues. For some reason, if this appears anywhere in your CSS declaration for either the page or the editor, the dropdown for CSS styles will render over 100% in width...very strange. Remove all instances of float:right and everything is fine.

Since I need float:right to render multiple page elements, this is a bug -- at least to me.

Jamie

04-23-2007, 1:24 PM 28715 in reply to 28657

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

Re: CSS dropdown menu renders full screen

Reply Quote

Jamie,

Can you create a simple aspx page showing the problem and send it to me?

It works for me.

asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
asp wysiwyg html editor: http://cutesoft.net/ASP
asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
Live Support: http://cutesoft.net/live-support/default.aspx

04-23-2007, 1:56 PM 28718 in reply to 28650

jattwood
Joined on 12-26-2005
Posts 22

Re: CSS dropdown menu renders full screen

Reply Quote

I can, but then I would have to deploy 6 to the live site, and I can do that right now. It is easy to reproduce. Please do the following:

1) Create external css file with this definition inside it

.ceTest {

float:right;

}

2) Create your aspx file using the below code (IMPORTANT: note that the page uses the same external css definition as the control's EditorWysiwygModeCss property):

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ceTest.aspx.cs" Inherits="ceTest" %>
<%@ Register Assembly="CuteEditor" Namespace="CuteEditor" TagPrefix="CE" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>CeTest</title>

</head>

<body>

<div>

<ce:editor id="Editor1" runat="server" EditorWysiwygModeCss="ceTest.css"></ce:editor>

</div>

</form>

</body>

</html>

04-24-2007, 4:25 PM 28796 in reply to 28718

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

Re: CSS dropdown menu renders full screen

Reply Quote

jattwood,

This example works OK for me.

05-09-2007, 12:21 PM 29436 in reply to 28796

jattwood
Joined on 12-26-2005
Posts 22

Re: CSS dropdown menu renders full screen

Reply Quote

OK - Now that I can deploy CE6 to a remote site, I can demonstrate this bug (see above code example).

View with IE 7 to see 100% dropdown width when float:right is contained in an external CSS (even though it's container class is not even being used anywhere.)

http://www.proteaninteractive.com/cetest.aspx

Thanks,

Jamie

05-11-2007, 1:16 PM 29559 in reply to 29436

jattwood
Joined on 12-26-2005
Posts 22

Re: CSS dropdown menu renders full screen

Reply Quote

Adam, please take a look at this link and let me know if you can suggest any fixes. You will have to wait a bit for the toolbar to load", then click on the CSS dropdown bar, it will render full width of IE& browser....

http://www.proteaninteractive.com/cetest.aspx

Jamie

05-23-2007, 11:04 AM 29979 in reply to 29559

jattwood
Joined on 12-26-2005
Posts 22

Re: CSS dropdown menu renders full screen

Reply Quote

Any updates for this one yet?

Thanks,

Jamie

http://www.proteaninteractive.com/cetest.aspx

05-23-2007, 12:58 PM 29989 in reply to 29979

Adam
Joined on 09-23-2003
Aurora, ON
Posts 18,678

Re: CSS dropdown menu renders full screen

Reply Quote

Jamie,

Open CeText.css and replace the following code:

float:right;

with

text-align:right;

07-18-2007, 5:47 AM 31655 in reply to 29989

michl
Joined on 08-17-2004
Posts 7

Re: CSS dropdown menu renders full screen

Reply Quote

Adam,

I'm having the same troubles, without using float in my .css.

Using following .css-File is rendering over more than the full screen:

.BGImage {
background-image: url(AdlitzerKopf01.gif);
background-repeat: no-repeat;
}
.Date {
color: #6e628a;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}

.Login {
color: #6e628a;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}
A.Login:link {
text-decoration: none;
color: #6e628a;
}

A.Login:visited {
text-decoration: none;
color: #6e628a;
}

A.Login:active   {
    text-decoration:    none;
    color: #6e628a;
}

A.Login:hover    {
    text-decoration:    none;
    color: #6e628a;
}
.Hostname {
color: #6e628a;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
A.Hostname:link {
    text-decoration:    none;
    color:#6e628a;
}

A.Hostname:visited {
text-decoration: none;
color:#6e628a;
}

A.Hostname:active   {
    text-decoration:    none;
    color:#6e628a;
}

A.Hostname:hover    {
    text-decoration:    none;
    color:#6e628a;
}

/* Main Menu */

.MainMenu_MenuContainer {
background-color: transparent;

}

.MainMenu_MenuBar {

}

.MainMenu_MenuItem {
font-family: Arial, Helvetica, sans-serif;
color: #6e628a;
font-size: 13px;
cursor:hand;
font-weight: bold;

}

.MainMenu_MenuIcon {
}

.MainMenu_SubMenu {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CCCCCC;
background-color: #efefef;
font-weight:bold;

}

.MainMenu_MenuBreak {
}

.MainMenu_MenuItemSel {
background-color: #6e628a;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight:bold;
color: #ffffff;
cursor:hand;
}

.MainMenu_MenuArrow {
color: #efefef;
}

.MainMenu_RootMenuArrow {
color: #efefef;
}

.Normal {
font-family: Arial, Helvetica;
color: #515151;
}

.Head   {
    font-family: Arial, Helvetica;
    font-size: 16px;
    font-weight:    bold;
    color: #515151;
}
.LeftPane   {
background-color:#CECBDA;
padding: 4px;
color: #6e628a;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}

.ContentPane {
padding: 4px;
}

07-18-2007, 9:15 AM 31656 in reply to 31655

michl
Joined on 08-17-2004
Posts 7

Re: CSS dropdown menu renders full screen

Reply Quote

Adam,

it seems, that "padding" is causing the troubles - do you know, which css-Properties are causing these problems?