div style:hidden tag is taking space

Question

I have a problem. I have two HTML buttons, and I want to show one at one time. I have code which is working fine but the problem is of space. In the GUI, spaces of both buttons are present which is not acceptable. I want to place both buttons on the same location.

The code is:

function searchWithin(id)
{
    if(document.getElementById("searchwithin").checked)
     {
     document.getElementById('searchwithin_'+id+'_searchButton').style.visibility="visible";
     document.getElementById(id+'-form-submit').style.visibility="hidden";
     }
     else
     {
         document.getElementById('searchwithin_'+id+'_searchButton').style.visibility="hidden";
         document.getElementById(id+'-form-submit').style.visibility="visible";
     }
}

<g2:button style="visibility:visible;" id="${g2:escapeXml(componentId)}-form-submit" name="submitButton" type="submit" value="Search" bamId="${searchBarBam}" actionName="${action}" inputClass="p-userSearchButton" />&nbsp;

<input style="visibility:hidden;" type="button"  class="p-userSearchButton" name ="searchinresult" id="searchwithin_${componentId}_searchButton" value="Search Within" onClick="javascript:($C('${componentId}')).filterBySearchWithIn('${searchBarBam}','${componentId}-form-text');"></input>

I need to change it like:

document.getElementById('searchwithin_'+id+'_searchButton').style.display="none";
     document.getElementById(id+'-form-submit').style.display="true";

<g2:button style="display:true;" 
           id="${g2:escapeXml(componentId)}-form-submit" 
           name="submitButton" 
           type="submit" 
           value="Search" 
           bamId="${searchBarBam}" 
           actionName="${action}" 
           inputClass="p-userSearchButton" />&nbsp;

<input style="display:none;" 
       type="button"  
       class="p-userSearchButton" 
       name ="searchinresult" 
       id="searchwithin_${componentId}_searchButton" 
       value="Search Within" 
       onClick="javascript:($C('${componentId}')).filterBySearchWithIn('${searchBarBam}','${componentId}-form-text');"></input>

But it's not working.

Answer 1

You want display: none; not visibility: hidden .

Edit

In your edited code you use display: true to show a button, but correct syntax would be: display: inline . For more display options view: w3schools.com/css/css_display_visibility.asp .

If this does not fix your problem, please define more clearly what your issue is exactly .