Стиль div: скрытый тег занимает место

Question

У меня проблема. У меня есть две кнопки HTML, и я хочу показать одну за один раз. У меня есть код, который работает нормально, но проблема в космосе. В графическом интерфейсе присутствуют пробелы обеих кнопок, что недопустимо. Я хочу разместить обе кнопки в одном месте.

Код:

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>

Мне нужно изменить это как:

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>

Но это не работает.

Answer 1

Вы хотите display: none;, а не visibility: hidden.

Редактировать

В отредактированном коде вы используете display: true для отображения кнопки, но правильный синтаксис будет: display: inline. Для просмотра дополнительных параметров просмотра: w3schools.com / css / css_display_visibility.asp .

Если это не решит вашу проблему, пожалуйста, уточните, в чем заключается ваша проблема точно .