2

I combined morphsearch with google search and now have a custom search for my site. however, the morph search refuses to occupy 100% window height when called. My html..

<div id="morphsearch" class="morphsearch">       
    <form id="searchForm" class="morphsearch-form" method="post">
        <input id="s" class="morphsearch-input" type="search" placeholder="Search Dundaah..."/>
        <input class="morphsearch-submit" type="submit" value="Submit" id="submitButton" />         
    </form>        
    <div id="resultsDiv" class="morphsearch-content2"></div>
 <span class="morphsearch-close"></span>
    <span class="morphsearch-close2"></span>        
</div>

The links to the css, component.css the js script2.js and search.js an example of the problem website (click on the red fist to see the search). I've tried 100vh, didn't work...much appreciated.

Ash
  • 2,108
  • 2
  • 17
  • 22
Max Njoroge
  • 489
  • 3
  • 21
  • 2
    looks like 100% in my browsers (Chrome, FF, IE) - which browser are you using? – lucas Oct 29 '15 at 11:18
  • http://stackoverflow.com/questions/33389583/aside-height-should-be-100-covering-the-whole-side/33389633#33389633 this might help – imGaurav Oct 29 '15 at 11:19

1 Answers1

2

You can do this in a couple of ways:

CSS 1

You set the #morphsearch position to absolute, make sure #morphsearch dosent have parents, and if he does make sure they dont have relative, absolute or fixed positions.

#morphsearch { position: absolute; left:0; top:0; width:100%; height:100%;}

CSS 2

Set min-height and height 100% to html and body

body, html {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

Javascript/jQuery

$('#morphsearch').css({
    'width': $(window).width(), 'height': $(window).height()
});
  • thank you but hasn't worked out for me, when the morpsearch is open, it's still not occupying the full browser window, some content behind the overlay can still be srolled – Max Njoroge Oct 29 '15 at 16:35
  • Make a fiddle with the CSS and HTML –  Oct 30 '15 at 06:35