Image moves while doing show/hide
-
Hi I'm trying to show/hide a panel through javascript by using below code. Problem is when I click on the arrow and hide the panel below, arrow moves from its position towards left. I've tried many things but can't have it still. Please help me to fix it. Thanks in advance -------------------------------------------- <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <script language="javascript"> function change() { var imgEle = document.getElementById('imgArrow'); var Panel1 = document.getElementById('<%= Panel1.ClientID %>'); if(Panel1.style.display == 'block') { Panel1.style.display='none'; imgEle.src = "images/lft-arw.gif"; } else { Panel1.style.display='block'; imgEle.src = "images/drop-arw.gif"; } } </script> </head> <body> <form id="form1" runat="server"> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%"> <tr> <td colspan ="2"> </td> </tr> <tr> <td style="width: 100px"> <table border="3" bordercolor="blue" cellpadding="0" cellspacing="0" style="width: 100px;text-align: center"> <tr> <td style="width:98px" align="left">Price </td> <td style="width:2px;" align="right"><IMG id="imgArrow" SRC="images/drop-arw.gif" onclick="javascript:change();" /></td> </tr> <tr> <td colspan="2" id="pnlParent"> <asp:Panel ID="Panel1" runat="server"> <table border="0" cellpadding="0" cellspacing="0" style="width:100%;"> <tr> <td>From </td> <td><asp:textbox runat=server ID="txtFrom" /> </td> </tr>
-
Hi I'm trying to show/hide a panel through javascript by using below code. Problem is when I click on the arrow and hide the panel below, arrow moves from its position towards left. I've tried many things but can't have it still. Please help me to fix it. Thanks in advance -------------------------------------------- <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <script language="javascript"> function change() { var imgEle = document.getElementById('imgArrow'); var Panel1 = document.getElementById('<%= Panel1.ClientID %>'); if(Panel1.style.display == 'block') { Panel1.style.display='none'; imgEle.src = "images/lft-arw.gif"; } else { Panel1.style.display='block'; imgEle.src = "images/drop-arw.gif"; } } </script> </head> <body> <form id="form1" runat="server"> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%"> <tr> <td colspan ="2"> </td> </tr> <tr> <td style="width: 100px"> <table border="3" bordercolor="blue" cellpadding="0" cellspacing="0" style="width: 100px;text-align: center"> <tr> <td style="width:98px" align="left">Price </td> <td style="width:2px;" align="right"><IMG id="imgArrow" SRC="images/drop-arw.gif" onclick="javascript:change();" /></td> </tr> <tr> <td colspan="2" id="pnlParent"> <asp:Panel ID="Panel1" runat="server"> <table border="0" cellpadding="0" cellspacing="0" style="width:100%;"> <tr> <td>From </td> <td><asp:textbox runat=server ID="txtFrom" /> </td> </tr>
Nitin1981 wrote:
<asp:Panel ID="Panel1" runat="server">
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;">make table width to 98% and also panel width to 98%, i.e.
<asp:Panel ID="Panel1" runat="server" style="width:98%;">
<table border="0" cellpadding="0" cellspacing="0" style="width:98%;">