0

I have 3 buttons in a row on my asp.net page, I use a javascript to set the button in the middle(ButtonSR) to invisible, but by doing that, I also want the button under it to take its place instead of leaving a empty space. Here is my asp.net code for these three button:

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Editing <b class="caret"></b></a>
              <span class="dropdown-arrow"></span>
              <ul class="dropdown-menu">
                <li><a href="#" id="ButtonLR" class="btn btn-inverse" style="font-weight:bold; color:white">&nbsp Load Resources</a></li>
                <li><asp:Button ID="ButtonSR" Text="Save Resources " runat="server" CssClass="btn btn-inverse" onclick="ButtonSR_Click" /></li>
                <li><a href="#" id="historyBtn" class="btn btn-inverse" style="font-weight:bold; color:white">&nbsp History</a></li>
              </ul>
            </li>

And here is my javascript to set the button invisible:

 document.getElementById('ButtonSR').style.visibility = 'hidden';

How do I make historyBtn to take ButtonSR's place in javascript after setting ButtonSR invisible, in order to avoid empty space on my page?

Cœur
  • 37,241
  • 25
  • 195
  • 267
SSilicon
  • 253
  • 1
  • 2
  • 16

2 Answers2

2

use this

document.getElementById('ButtonSR').style.display="none";

Here is more info about the difference between visibility: hidden and display:none What is the difference between visibility:hidden and display:none?

Community
  • 1
  • 1
rob
  • 715
  • 2
  • 6
  • 20
1

I'm pretty sure that by using jquery .hide() instead of javascript's style.visibility='hidden' the button would not leave an empty space.

So, assuming you have jquery available something like : 

$('#ButtonSR').hide();
CoqPwner
  • 913
  • 1
  • 11
  • 24