Visual problem with Imagebuttons

  1. #1

    Visual problem with Imagebuttons

    This issue is appearing in almost every .aspx file in my project. When I load the .aspx file for the fist time, the imagebuttons are not displaying properly. However if I reload the page, the buttons are displayed properly.

    For expample:

    When I run this .aspx pages for the first time imagebuttons are failing:
    Click image for larger version. 

Name:	forum1.png 
Views:	74 
Size:	9.7 KB 
ID:	25044 Click image for larger version. 

Name:	forum3.png 
Views:	65 
Size:	7.2 KB 
ID:	25045

    When I press F5 or I reload the pages the imagebuttons are displayed properly:
    Click image for larger version. 

Name:	Forum2.png 
Views:	109 
Size:	8.8 KB 
ID:	25046Click image for larger version. 

Name:	Forum4.png 
Views:	114 
Size:	14.7 KB 
ID:	25047

    I have tried to modify the Css by adding a new class called ".btnspain", but is still not working:
    Click image for larger version. 

Name:	Forum5.png 
Views:	73 
Size:	50.4 KB 
ID:	25048

    Here you have my Login Code:


    <%@ Page Title="Login Jhayber" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Extranet.Default" %>
    <%@ 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">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
     
    
    <head runat="server" >
        <title>B2B</title>
            
        <style type="text/css">
    
            .x-toolbar-footer{
                background-color:#ffffff;
            }
            .x-window-header-default-top{
                background-color:#ffffff;
            }
            .x-window-header-default{
                border-color:#000000;
            }
            .x-window-header-title-default{
                color:#000000;
                font-size:16px;
                line-height:30px;
            }
            .x-window-default{
                border-color:#ffffff;
            }
            .x-btn-default-small
            {
                background-color:#ffffff;
            }
            .x-btn-default-small{
                border-color:#ffffff;
            }
            .x-btn-inner-default-small{
                color:#000000;
            }
            .x-btn-over.x-btn.x-btn-default-small{
                background-color:#e6e3e3;
                border-color:#ffffff;
    
            }
    
            .btnspain{
                left:12px;
                top:4px;
            }
    
        </style>
    
         <script type="text/javascript">
    
             var Alerta = function (keyCode, e) {
                 Ext.Msg.confirm(
    
                     'Delete Rows',
                     'Are you sure?',
                     function (btn) {
                         if (btn == 'yes') {
                             alert("dijo si");
                         }
                     });
             };
    
             var Alert2 = function () {
                 __doPostBack("btnLogin", "");
                 
             };
    
    
        </script>
    </head>
    <body>
        
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
                
            <ext:Label ID="lblMessage" runat="server" />
            <ext:Panel ID="FormPanel1" runat="server">
            <Content>
                <ext:Window ID="Window1" runat="server" Closable="false" Resizable="false"
                Height="200" Icon="Lock" Title="Iniciar Sesión" Draggable="false" Width="380" Modal="true"
                BodyPadding="5" Layout="formlayout" >
    
                    <Items>
                        <ext:TextField  ID="txtUsername" runat="server" FieldLabel="Usuario" 
                            AllowBlank="false" BlankText="Your username is required." AnchorHorizontal="100%" AutoFocus="true" AutoFocusDelay="100" />
                        <ext:TextField   ID="txtPassword" runat="server" InputType="Password"   FieldLabel="Contraseña" 
                            AllowBlank="false"  BlankText="Your password is required." AnchorHorizontal="100%"  />
                        <ext:TextField   ID="Idioma" runat="server" FieldLabel="Idioma" Text="español" 
                            AllowBlank="false" AnchorHorizontal="100%"  hidden="true"/>
                    </Items>
                    
                    <Buttons>
                        <ext:ImageButton 
                             AnchorHorizontal="12px"
                                cls="btnspain"
                                MinWidth="10"
                                MarginSpec="0 10 0 0"
                                ToggleGroup="Grupoidiomas"
                                runat="server"  
                                ImageUrl="/img/spain.png"
                             >
                                <DirectEvents>
                                    <Click OnEvent="español"></Click>
                                </DirectEvents>
                            </ext:ImageButton>
    
                            <ext:ImageButton
                                MinWidth="10"
                                MarginSpec="0 10 0 0"
                                ToggleGroup="Grupoidiomas"
                                runat="server"  
                                ImageUrl="/img/united-kingdom.png">
                                <DirectEvents>
                                    <Click OnEvent="english"></Click>
                                </DirectEvents>
                            </ext:ImageButton>
    
                            <ext:ImageButton
                                MinWidth="10"
                                MarginSpec="0 10 0 0"
                                ToggleGroup="Grupoidiomas"
                                runat="server" 
                                ImageUrl="/img/germany.png">
                            </ext:ImageButton>
    
                            <ext:ImageButton
                                MinWidth="10"
                                ToggleGroup="Grupoidiomas"
                                MarginSpec="0 20 0 0"
                                runat="server" 
                                ImageUrl="/img/france.png">
                            </ext:ImageButton>
    
                        <ext:Button ID="btnLogin" runat="server" Text="Entrar" Icon="Accept" Width="100" TextAlign="Center">
                            <Listeners>
                                <Click Handler="
                                    if (!#{txtUsername}.validate() || !#{txtPassword}.validate()) {
                                        Ext.Msg.alert('Error','El usuario y la clave son campos obligatorios');
                                        // return false to prevent the btnLogin_Click Ajax Click event from firing.
                                        return false; 
                                    }" />
                            </Listeners>
                            <DirectEvents>
                                <Click OnEvent="btnLogin_Click">
                                    <EventMask ShowMask="true" Msg="Comprobando..." MinDelay="500" />
                                </Click>
                            </DirectEvents>
                        </ext:Button>
    
                        <ext:Button ID="btnCancel" runat="server" Text="Cancelar" Icon="Decline" Width="100" TextAlign="Center">
                            <Listeners>
                                <Click Handler="#{Window1}.hide();#{lblMessage}.setText('LOGIN CANCELADO')" />
                            </Listeners>
                        </ext:Button>
                    </Buttons>
             </ext:Window>
             </Content>
            </ext:Panel>
            
            <ext:KeyMap runat="server" Target="={Ext.getBody()}" >
                <Binding>
                    <ext:KeyBinding Handler="Alert2" >
                        <Keys>
                            <ext:Key Code="ENTER" />
                        </Keys>
                    </ext:KeyBinding>
                </Binding>
            </ext:KeyMap>
        </form>
    </body>
    </html>
    Thank You for your help, and sorry for English.

    Pascu.
  2. #2
    Hello, @Pascu! Welcome to Ext.NET forums!

    Unfortunately your test case is throwing some errors when I try to run it, and without the image files I don't think we'll be able to see anything at all in the image buttons.

    The code sample you provide should include only the minimum amount of code required to reproduce the issue. Code unrelated to the issue is to be removed. Anyone should be able to copy + paste your sample into a local Visual Studio test project and run without having to make modifications.

    Tips for creating simplified code samples

    If Exceptions or syntax errors are thrown when testing your code sample, we'll let you know so you can revise your original sample. Then we'll review again with the updated sample.

    When posting your code samples in the forums, please paste that sample within [CODE] tags. The [CODE] tags will add formatting and syntax highlighting to your sample.

    The following two forum posts provide many excellent tips for posting in the forums:

    1. More Information Required
    2. Forum Guidelines

    The 'more information required' thread also has some very useful templates of test cases you can refer to see roughly how your test case should look like.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello Fabricio, thank you for your answer.

    I have simplified my code, but you will need the image of the imagebuttons.

    Here are the images:
    Name:  spain.png
Views: 77
Size:  419 BytesName:  united-kingdom.png
Views: 77
Size:  488 Bytes

    In case of error, I have uploaded them to imgur, you only need to change the name or the ImageUrl: https://imgur.com/a/1Vdsm


    Here is the code:
    <%@ Page Title="Login Jhayber" Language="C#" AutoEventWireup="true" CodeBehind="Default2.aspx.cs" Inherits="Extranet.Default2" %>
    <%@ 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">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
     
    
    <head runat="server" >
        <title>B2B</title>
            
        
    </head>
    <body>
        
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
                
            <ext:Label ID="lblMessage" runat="server" />
            <ext:Panel ID="FormPanel1" runat="server">
            <Content>
                <ext:Window ID="Window1" runat="server" Closable="false" Resizable="false"
                Height="200" Icon="Lock" Title="Iniciar Sesión" Draggable="false" Width="380" Modal="true"
                BodyPadding="5" Layout="formlayout" >
    
                    <Items>
                        <ext:TextField  ID="txtUsername" runat="server" FieldLabel="Usuario" 
                            AllowBlank="false" BlankText="Your username is required." AnchorHorizontal="100%" AutoFocus="true" AutoFocusDelay="100" />
                        <ext:TextField   ID="txtPassword" runat="server" InputType="Password"   FieldLabel="Contraseña" 
                            AllowBlank="false"  BlankText="Your password is required." AnchorHorizontal="100%"  />
                        <ext:TextField   ID="Idioma" runat="server" FieldLabel="Idioma" Text="español" 
                            AllowBlank="false" AnchorHorizontal="100%"  hidden="true"/>
                    </Items>
                    
                    <Buttons>
                        <ext:ImageButton 
                             AnchorHorizontal="12px"
                                cls="btnspain"
                                MinWidth="10"
                                MarginSpec="0 10 0 0"
                                ToggleGroup="Grupoidiomas"
                                runat="server"  
                                ImageUrl="/img/spain.png"
                             >
                            </ext:ImageButton>
    
                            <ext:ImageButton
                                MinWidth="10"
                                MarginSpec="0 10 0 0"
                                ToggleGroup="Grupoidiomas"
                                runat="server"  
                                ImageUrl="/img/united-kingdom.png">
                            </ext:ImageButton>
    
                        <ext:Button ID="btnLogin" runat="server" Text="Entrar" Icon="Accept" Width="100" TextAlign="Center">
                        </ext:Button>
    
                        <ext:Button ID="btnCancel" runat="server" Text="Cancelar" Icon="Decline" Width="100" TextAlign="Center">
                        </ext:Button>
                    </Buttons>
             </ext:Window>
             </Content>
            </ext:Panel>
            
    
        </form>
    </body>
    </html>
    Thank you very much,

    Pascu
  4. #4
    Hello @Pascu!

    In your example, I can reproduce the issue in chrome and firefox. IE and Edge places the icons correctly.

    But if I remove lines 40 and 49 from your test case, it works fine in all browsers. It is also not clear why you have your line 37. It seems that you attempted to move the icons around a little but, as per your first post, it looks like the result you want does not require the custom padding/anchorings at all.

    At least if I remove those lines I see something similar to what you shot after you written:

    When I press F5 or I reload the pages the imagebuttons are displayed properly:
    In your first post.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello Fabricio,

    I have deleted those lines and it works fine in IE but is still giving the issue in Chrome and Firefox:

    Click image for larger version. 

Name:	Screenshot-2017-9-26 Login Jhayber.png 
Views:	69 
Size:	6.5 KB 
ID:	25052

    %@ Page Title="Login Jhayber" Language="C#" AutoEventWireup="true" CodeBehind="Default2.aspx.cs" Inherits="Extranet.Default2" %>
    <%@ 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">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
     
    
    <head runat="server" >
        <title>B2B</title>
            
        
    </head>
    <body>
        
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
                
            <ext:Label ID="lblMessage" runat="server" />
            <ext:Panel ID="FormPanel1" runat="server">
            <Content>
                <ext:Window ID="Window1" runat="server" Closable="false" Resizable="false"
                Height="200" Icon="Lock" Title="Iniciar Sesión" Draggable="false" Width="380" Modal="true"
                BodyPadding="5" Layout="formlayout" >
    
                    <Items>
                        <ext:TextField  ID="txtUsername" runat="server" FieldLabel="Usuario" 
                            AllowBlank="false" BlankText="Your username is required." AnchorHorizontal="100%" AutoFocus="true" AutoFocusDelay="100" />
                        <ext:TextField   ID="txtPassword" runat="server" InputType="Password"   FieldLabel="Contraseña" 
                            AllowBlank="false"  BlankText="Your password is required." AnchorHorizontal="100%"  />
                        <ext:TextField   ID="Idioma" runat="server" FieldLabel="Idioma" Text="español" 
                            AllowBlank="false" AnchorHorizontal="100%"  hidden="true"/>
                    </Items>
                    
                    <Buttons>
                        <ext:ImageButton 
                                cls="btnspain"
                                MinWidth="10"
                                ToggleGroup="Grupoidiomas"
                                runat="server"  
                                ImageUrl="/img/spain.png"
                             >
                            </ext:ImageButton>
    
                            <ext:ImageButton
                                MinWidth="10"
                                ToggleGroup="Grupoidiomas"
                                runat="server"  
                                ImageUrl="/img/united-kingdom.png">
                            </ext:ImageButton>
    
                        <ext:Button ID="btnLogin" runat="server" Text="Entrar" Icon="Accept" Width="100" TextAlign="Center">
                        </ext:Button>
    
                        <ext:Button ID="btnCancel" runat="server" Text="Cancelar" Icon="Decline" Width="100" TextAlign="Center">
                        </ext:Button>
                    </Buttons>
             </ext:Window>
             </Content>
            </ext:Panel>
            
    
        </form>
    </body>
    </html>
    The issue is happening in almost every imagebutton in my webpage, and I have a lot of them.
  6. #6
    Hello @Pascu!

    Ok, I see, this happens only if you close the tab and re-open it with the url. Refreshing is exactly what you pointed that "fixed" it.

    As you are using static images I believe best would be you specify image's exact width/height. Now for some reason this MinWidth parameter is having some side effect that (at a first thought) shouldn't. In fact, just setting the button's width does not do, but setting MinWidth to anything below the actual image width makes the button follow the actual specified width.

    In other words, for your icons, use this on the image button specification:

    MinWidth="10"
    Width="24"
    Height="24"
    This is happening because the layout in the toolbar forces the buttons to use the whole area width. Notice you do specify width to the other buttons on the same toolbar so, the image buttons must follow the pattern.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Thank you very much Fabricio, it works pretty well now

Similar Threads

  1. [CLOSED] ImageButtons with mouse hover
    By Zdenek in forum 3.x Legacy Premium Help
    Replies: 7
    Last Post: Aug 06, 2015, 12:59 PM
  2. Replies: 2
    Last Post: Jul 29, 2015, 8:24 AM
  3. Replies: 0
    Last Post: Oct 18, 2012, 2:31 PM
  4. Replies: 5
    Last Post: Apr 28, 2012, 7:42 AM
  5. Problem coolite run with Visual Studio 2005
    By Amorim in forum 1.x Help
    Replies: 1
    Last Post: Dec 10, 2008, 3:33 PM

Posting Permissions