remove hidden div space with css

Question

In image above I have marked space that is occupied by my input field (which has hidden visibility).

What I want is to remove that space and only use it when user hit the search icon (my search icon will come to the right side, next to the user image)

Codes

html

<div id="searchbtn"><span class="fas fa-search"></span></div> //search icon

                <form class="form-inline" action="/search" target="_blank" method="GET" role="search">
                    {{ csrf_field() }}

                    <div class="navfix">
                        <div id="navfix2">
                            <div id="search" class=" hide"> //search id
                                <div class="input-group-icon"> //input field
                                    <input type="text" name="q" class="single-input" autocomplete="off" placeholder="Search in blog... 'type + enter' " required class="single-input">
                                    <div id="searchremovebtn" class="icon"><i class="far fa-window-close"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>

css

.hide{
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
}
.show{
    visibility: visible;
    opacity: 1;
    transition: visibility 1s, opacity 1s linear;
}
.navfix {
  position:relative;
  margin-right: 0;
}
.navfix2 {
  position:absolute;
}

jQuery

// search script
$(document).ready(function() {
var trig = 1;
//fix for chrome
$("#search").addClass('hide');
  //animate searchbar width increase to  +150%
  $('#searchbtn').click(function(e) {
       //handle other nav elements visibility here to avoid push down 
    $('#search').removeClass('hide');
    $('#search').addClass('show');
    $('#searchbtn').removeClass('show');
    $('#searchbtn').addClass('hide');
   if (trig == 1){
      $('#navfix2').animate({
        width: '+=150',
        marginRight: 0
      }, 100);

     trig ++; 
     }
  });
  // if user leaves the form the width will go back to original state
  $("#searchremovebtn").click(function() {
      $('#navfix2').animate({
      width: '-=150'
    }, 100);
   trig = trig - 1;
    //handle other nav elements visibility first to avoid push down
        $('#search').removeClass('show');
        $('#search').addClass('hide');
        $('#searchbtn').addClass('show');
        $('#searchbtn').removeClass('hide');
  });
});
                </div>
                </form>

score 0 · Answer 1 · answered Apr 28 '18 at 20:47

0

visibility: collapse; will work.

answered Apr 28 '18 at 20:47

set0gut1

1,652
1
8
21

it pushed it to the left side – mafortis Apr 28 '18 at 20:55

score 0 · Answer 2 · answered May 04 '18 at 04:51

Use display none instead.

.hide{
    display: none;
}
.show{
    display: block; // or display: inline-block depends on your needs.
}

As per "kemiller2002"

display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.

More info here

as i said to kemiller https://stackoverflow.com/questions/50080923/remove-hidden-div-space-with-css/50080934#comment87177971_50080934 — mafortis, May 04 '18 at 09:01

remove hidden div space with css

Codes

2 Answers2