PDA

View Full Version : Visual problem with Imagebuttons



Pascu
Sep 22, 2017, 7:27 AM
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:
25044 25045

When I press F5 or I reload the pages the imagebuttons are displayed properly:
2504625047

I have tried to modify the Css by adding a new class called ".btnspain", but is still not working:
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.

fabricio.murta
Sep 22, 2017, 7:34 PM
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 (http://forums.ext.net/showthread.php?61176-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 (http://forums.ext.net/showthread.php?10205-More-Information-Required)
2. Forum Guidelines (http://forums.ext.net/showthread.php?3440-Forum-Guidelines-For-Posting-New-Topics)

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.

Pascu
Sep 25, 2017, 8:06 AM
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:
2504925050

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

fabricio.murta
Sep 25, 2017, 3:32 PM
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!

Pascu
Sep 26, 2017, 8:38 AM
Hello Fabricio,

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

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.

fabricio.murta
Sep 26, 2017, 5:19 PM
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!

Pascu
Sep 27, 2017, 6:43 AM
Thank you very much Fabricio, it works pretty well now