PDA

View Full Version : Cannot set imagebutton with proper position respect to the background image



josephmkchan
Jan 11, 2021, 4:52 AM
I am new in EXT.NET, I want to create the image button with the background path but tried many times about the imagebutton attributes but still not the expected position (especially on the PostionY), so I used the window and set the imagebutton inside, however, seems there are some spacing between the form inline to the background, so I cannot set the imagebutton on the top of screen, and there are something on the image box, below the code and attached the idea of the images on the roadpath but I cannot make it happen with the current code setting, could you give me some idea how to do, thanks



<%@ Page Title="Inbound Tracker" Language="C#" AutoEventWireup="true" CodeBehind="InboundTracker.aspx.cs" Inherits="eZConnect.InboundTracker" %>


<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>


<script runat="server">
override protected void OnInit(EventArgs e)
{
base.OnInit(e);
}

protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{

}
}

protected void Button_Click(object sender, DirectEventArgs e)
{

}


</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Inbound Tracker</title>
<style>

body {
background-image: url("/images/shipment_path_blank.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top;
}

.transparent-window,
.transparent-window .x-window-body,
.transparent-window .x-panel-body {
background-color: transparent;
}

.transparent-panel {
background-color: transparent;
}


</style>
</script>
</head>
<body>
<ext:ResourceManager runat="server" Theme="None"/>
<form runat="server">
<ext:Window
ID="TransWindow1"
runat="server"
Cls="transparent-window"
Border="false"
Header="false"
initCenter="false"
PageX="550"
PageY="0"
>
<Items>

<ext:ImageButton
runat="server"
ImageUrl="/images/shipment_small.png"
OverImageUrl="/images/shipment_big.png"
DisabledImageUrl="/images/shipment_small.png"
PressedImageUrl="/images/shipment_big.png"
border="true"
>
<DirectEvents>
<Click OnEvent="Button_Click" />
</DirectEvents>
</ext:ImageButton>
</Items>
</ext:Window>

</form>
</body>
</html>


2548925490

fabricio.murta
Jan 12, 2021, 6:57 PM
Hello @josephmkchan!

What about this:



<%@ Page Title="Inbound Tracker" Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Inbound Tracker</title>
<style>
body {
background-image: url("images/63065-path.png");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top;
}

.floating-button {
position: absolute;
}
</style>
</head>
<body>
<ext:ResourceManager runat="server" Theme="None"/>
<form runat="server">
<ext:ImageButton
runat="server"
ImageUrl="images/63065-ship.png"
Cls="floating-button"
X="650"
y="15"
StyleSpec="border:solid 1px blue" />
</form>
</body>
</html>


Notice I left this StyleSpec border just as an example; it is often useful for debugging (it'll show the button "hit box"), when you're done positioning, just remove it. Vary border colors as you are "nesting" components (buttons within windows, etc).

The positioning shouldn't be perfect with your actual images as I just tried to position based in the sample images you posted, so it's up to you to pinpoint the location of the button in the example. Anyway, it's "free" to move wherever you want within the window.

Hope this helps!

josephmkchan
Jan 13, 2021, 2:42 AM
Fabrício, I have to say thousands thanks to you!! You saved me on these days. It's really help me.

fabricio.murta
Jan 13, 2021, 2:50 PM
Glad it helped, thanks for the feedback!