When i click on "Click me" link to show up a hidden div, the labels "title3" , "title4" and "title5" move down a bit.
I don't want that, i want them to keep their current position.

Markup:

<head runat="server">
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

      <script language="javascript" type="text/javascript">

      function HideLabel(button) {

         var rowObj = document.getElementById("thediv");
         if (rowObj.style.display == "none")
              rowObj.style.display = "";            
         else
              rowObj.style.display = "none";
      }

      </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <table cellpadding="0" cellspacing="0"> 
        <tr class="item">                       
            <td class="itemData" >
                <asp:LinkButton ID="TheButton" runat="server"  OnClientClick="HideLabel();return false;" Text="Click me"   />
                <br />
                Info:
                <asp:Label ID="Label4" runat="server" Text="info..." />                                                            
                <div id="thediv" style="display:none;" runat="server" >                                        
                        <asp:Label ID="TextBox1" style=" border: thin solid #000000;padding: 4px 4px 4px 4px;" runat="server" Width="75%" Text="blabla blabla blabla" ></asp:Label>                      
                    </div>                                                           

            </td>
            <td class="lb1" >
               <asp:Label ID="Label1" runat="server" Text="title3"/>
            </td>
            <td class="lb2" >
               <asp:Label ID="Label2" runat="server" Text="title4" />                            
            </td>
            <td class="lb3">
                <asp:Label ID="Label3" runat="server" Text="title5" />
            </td>           
        </tr>                                                  
     </table>                          
    </div>
    </form>
</body>

CSS:

body
{
    font-family: Arial, Verdana, Sans-serif;
    font-size: 12px;
}

.item
{
    background-color: #F0FAFE;
    color: Black;             
}

.itemData
{
    Width:310px;
    border-bottom: solid thin #D5E6EC;
}
.lb3
{
     border-bottom: solid thin #D5E6EC;
     padding-left:5px;
     width:80px;
     vertical-align:middle;
}
.lb1
{
    border-bottom: solid thin #D5E6EC;
    width:90px;
    padding-left:5px;
    text-align: center;
    vertical-align:middle;
}
.lb2
{
    border-bottom: solid thin #D5E6EC;
    width: 110px;
    text-align: center;
    vertical-align:middle;
}
  • Please validate your code first! It seems to contain raw asp, with both tags and attributes which do not exist in html. It is also helpful if you can provide a link to a hosted example, as few people are prepared to create a copy of your page in order to test it. Richard Grevers about 7 years ago
  • I just don't have a place where i can upload my work (that supports asp.net) markiz about 7 years ago

2 answers

0
points

Would it not make sense then to set a height on .itemData equal to the space occupied by the hidden div when it's shown?

Answered about 7 years ago by Tony Crockford
  • I'll try that. markiz about 7 years ago
  • I would have to do it with JS because the content that will appear in div is dynamic. And also this only happens in IE... markiz about 7 years ago
0
points

What you can do, if I'm understanding your goal correctly, is to set your td.lb[1|2|3] elements to have a vertical-align: top; paired with a padding-top of about 9px. This should (from what I was able to put together out of the code snippets you provided) get your desired effect. The labels are going to move when the table gets taller, because of that vertical-alignment. It'll push the elements down the height of the cell to the middle, because that's what you've told it to do.

Answered about 7 years ago by Michael Tierney