Cannot set imagebutton with proper position respect to the background image

  1. #1

    Cannot set imagebutton with proper position respect to the background image

    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>
    Click image for larger version. 

Name:	2021-01-11_124223.jpg 
Views:	6 
Size:	46.3 KB 
ID:	25489Click image for larger version. 

Name:	2021-01-11_124448.jpg 
Views:	6 
Size:	41.3 KB 
ID:	25490
  2. #2
    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!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Fabrício, I have to say thousands thanks to you!! You saved me on these days. It's really help me.
  4. #4
    Glad it helped, thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 1
    Last Post: May 16, 2012, 1:57 PM
  2. [CLOSED] Set css for the images via an ImageButton
    By majunior in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Jun 24, 2011, 2:47 PM
  3. Set Viewport Background color or image
    By geodan in forum 1.x Help
    Replies: 4
    Last Post: May 28, 2010, 10:59 AM
  4. [CLOSED] background image position in HTMLeditor
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 15
    Last Post: May 10, 2010, 3:06 AM
  5. Change Tab background color or background image
    By georgelanes in forum 1.x Help
    Replies: 0
    Last Post: Nov 06, 2008, 4:55 PM

Tags for this Thread

Posting Permissions