Search form in masthead not accepting input

trummonte · 2016-03-26 09:09:24

Search is working fine if I go to the search page. I put a search form on the top of the page using PHP but it doesn't let you enter any text. Here is the phplugins entry:

// Search on top
function ttg_header_masthead( $style, $path ) {
echo '
<div id="search" class="collapse clearfix" style="float: right; overflow: auto; margin-top: 5px;">
<form action="/search" method="GET">
<input type="text" id="q" name="q" value="" placeholder="Search" style="width: 260px; height: 24px; color: #FFFFFF; background-color: #303030 !important;"/>
<button type="submit" style="height: 24px; width: 30px; padding: 5px; vertical-align: bottom;">Go</button>
</form>
</div>
';
} // END

You can view it at https://www.montetrumbull.com/ (if it is very narrow, a css change hasn't updated yet. Inspect to turn off maxwidth.).

Thanks - Monte

rod barbee · 2016-03-26 10:12:30

I can get it to work in the masthead on my test site until I float it to the right. Not sure why that's the problem. Yet.

I'm using your code (changed colors) except for the float: right; and it works.

On your site, using developer tools, if I disable the float: right; in your styling, then it works, although it looks like the text color you've set is being overwritten.

rod barbee · 2016-03-26 10:29:32

seems that floating to the right puts the form field "under" the element it's next to. On your page, that's the navigation container. On my page it's the masthead H1 element. It's like there's a barrier on top. I tried adding z-index to the search div but that didn't help.

Matthew · 2016-03-26 10:31:35

The problem is that #search appears above #navigation-container in the source. When #search get's floated, then #navigation-container is actually overlaying it. So you're not actually clicking on #search; you're clicking on #navigation-container, and can only see #search behind it.

You can probably fix this by adding a position:relative and z-index:2 to the #search element.

rod barbee · 2016-03-26 10:40:07

Ooh. That worked for my test site, which has the search div coming in before the masthead container.
Doesn't seem to work on Monte's site though.

would placing it in the navigation container work? and positioning it in the upper right?

Matthew · 2016-03-26 11:27:55

Probably so. Another option would be to set position:absolute, again with the z-index, and move it into position that way, rather than with the float. In this case, it would appear at the bottom of the navigation container, or possibly outside of it. Needs to be within a parent having position:relative.

trummonte · 2016-03-26 11:45:05

Thanks for the ideas Rod and Matt. I will play with it tomorrow.

Monte

trummonte · 2016-03-27 00:13:49

I got it to work by moving the code down to the beginning of my navigation.

Thanks - Monte

rod barbee · 2016-03-27 00:28:57

Great. You need to set the input color to #ffffff !important though as it's being overridden by some other rule and text is not visible in the search form. At least in Firefox it is. (also Chrome)
And maybe increase the height from 24px to, say, 28px or so. The letters are being cut off top and bottom. (In Firefox)

Community @ The Turning Gate

#1 2016-03-26 09:09:24

Search form in masthead not accepting input

#2 2016-03-26 10:12:30

Re: Search form in masthead not accepting input

#3 2016-03-26 10:29:32

Re: Search form in masthead not accepting input

#4 2016-03-26 10:31:35

Re: Search form in masthead not accepting input

#5 2016-03-26 10:40:07

Re: Search form in masthead not accepting input

#6 2016-03-26 11:27:55

Re: Search form in masthead not accepting input

#7 2016-03-26 11:45:05

Re: Search form in masthead not accepting input

#8 2016-03-27 00:13:49

Re: Search form in masthead not accepting input

#9 2016-03-27 00:28:57

Re: Search form in masthead not accepting input

Board footer