Feb 02, 2012, 11:09 AM
[CLOSED] A floating (hidden until mouseover) button in the top left of a Viewport
Hi,
I'm trying to create the effect of a hidden button (which will probably be a menu button) in a viewport page which only displays when you hover over the top left corner of the page. I've found that this works fine with simple CSS effects, however when I put a Viewport on the page which is Fitted to the page using a FitLayout and then itself contains a layout which is NOT absolute, I can't position the button, it dissapears to X=-9999999 and Y=-999999 positions.
I want to absolutely position something over the top of a ViewPort basically.
I'm trying to create the effect of a hidden button (which will probably be a menu button) in a viewport page which only displays when you hover over the top left corner of the page. I've found that this works fine with simple CSS effects, however when I put a Viewport on the page which is Fitted to the page using a FitLayout and then itself contains a layout which is NOT absolute, I can't position the button, it dissapears to X=-9999999 and Y=-999999 positions.
I want to absolutely position something over the top of a ViewPort basically.
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ext:ResourceManager ID="extResourceManager" runat="server" />
<head id="Head1" runat="server">
<style type="text/css">
.hiddenMenuContainer
{
width: 50px;
height: 50px;
background-color: #dedede;
}
.editSettings
{
position: absolute;
top: 5px;
left: 5px;
}
/*button css*/
.hiddenMenuContainer .editSettings
{
display: none;
}
.hiddenMenuContainer:hover .editSettings
{
display: inline;
}
</style>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="hiddenMenuContainer">
<div class="editSettings">
<ext:Button ID="Button1" runat="server" Icon="Cog" Scale="Large" />
</div>
</div>
<ext:Viewport ID="Viewport1" runat="server">
<Items>
<ext:FitLayout ID="FitLayout1" runat="server">
<Items>
<ext:Panel ID="ControlContainer" runat="server" Header="false" BodyBorder="false"
Layout="FitLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Center" Pack="Center" />
</LayoutConfig>
<Items>
</Items>
</ext:Panel>
</Items>
</ext:FitLayout>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by Daniil; Feb 02, 2012 at 12:44 PM.
Reason: [CLOSED]