Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

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

trummonte
Member
From: Buena Vista, Colorado
Registered: 2012-11-11
Posts: 164
Website

Search form in masthead not accepting input

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

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,498
Website

Re: Search form in masthead not accepting input

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 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,498
Website

Re: Search form in masthead not accepting input

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.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

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

Matthew
Administrator
From: Seoul, South Korea
Registered: 2012-09-24
Posts: 5,079
Website

Re: Search form in masthead not accepting input

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.


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,498
Website

Re: Search form in masthead not accepting input

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?


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

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

Matthew
Administrator
From: Seoul, South Korea
Registered: 2012-09-24
Posts: 5,079
Website

Re: Search form in masthead not accepting input

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.


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

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

trummonte
Member
From: Buena Vista, Colorado
Registered: 2012-11-11
Posts: 164
Website

Re: Search form in masthead not accepting input

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

Monte

Offline

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

trummonte
Member
From: Buena Vista, Colorado
Registered: 2012-11-11
Posts: 164
Website

Re: Search form in masthead not accepting input

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

Thanks - Monte

Offline

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

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,498
Website

Re: Search form in masthead not accepting input

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)


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

Board footer

Powered by FluxBB