Search submit button appearing above search bar

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
TopNavNewbie
Jr. Propeller Head
Posts: 5
Joined: Tue Mar 14, 2017 8:40 am

Search submit button appearing above search bar

Post by TopNavNewbie »

Hi all,

I'm creating a home page in a Top Nav output. However, I've run in to trouble with the search bar. For some reason, the search submit button is appearing slightly above the search bar:
Capture.PNG
When I build the project and inspect the code, it looks like this:

Code: Select all

<div class="search-bar search-bar-container needs-pie _Skins_HomeSearchBar mc-component">
                                                <input class="search-field needs-pie" type="search" placeholder="Search">
                                                <div class="search-filter-wrapper">
                                                    <div class="search-filter">
                                                        <div class="search-filter-content">
                                                            <ul>
                                                                <li>All Files</li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="search-submit-wrapper" dir="ltr">
                                                    <div class="search-submit" title="Search">
                                                    </div>
                                                </div>
                                            </div> 
Does anyone have any ideas why?

Kind regards,

Louise
You do not have the required permissions to view the files attached to this post.
Nita Beck
Senior Propellus Maximus
Posts: 3672
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Search submit button appearing above search bar

Post by Nita Beck »

I assume you're using a search bar component skin to style the home page search bar, right? (This is opposed to the search bar that appears on all the other pages; that search bar is styled via the main Top Nav skin.) Check out if there's any bottom padding or margin being set on the Submit button; be sure to check all three mediums: Web, Tablet, and Mobile. Or check to see if there's any top padding or margin being set on the Search box.

HTH
Nita
Image
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
RecPerch
Propeller Head
Posts: 43
Joined: Tue Jan 10, 2017 9:10 am
Location: Denver, CO

Re: Search submit button appearing above search bar

Post by RecPerch »

Curious to see the answer.

This happened to me, except the search button appeared partially below the search bar. I think the reason was because something in my css was causing all pages to have a width smaller than the width set in the skin. I tested using the default stylesheet and the search button was fine. So I searched through my custom css for all width attributes, removed the attribute set in body, but that didn't fix it (it kinda helped, the page did become wider, and the button did move closer to the search bar, but just not all the way). Removed widths set in other styles, but that didn't fix it. Played with the skin, setting it back to all the defaults. That didn't fix it.

After wasting a day or two (or probably more) trying to find the answer I decided to bite the bullet and throw out my css. It was a "legacy" css with multiple editors over the years, including myself, and was pretty convoluted by this time. After creating a default HTML5 Top Nav project, moving over my project files, the search button has been fine (so far). I created a new custom stylesheet and have added back in only those styles I'll be using (instead of keeping styles created by someone else for another project five years ago!!), making the css MUCH MORE LEAN 8)

Gary
cdschroeder
Sr. Propeller Head
Posts: 189
Joined: Mon Feb 22, 2016 9:18 am
Location: Cincinnati, OH

Re: Search submit button appearing above search bar

Post by cdschroeder »

Thought I'd pitch in an idea - This happened to me when I changed the font size of the TopNav Search Input without also changing the font size of the HomeSearchBar Search Input. It appears that those values must be the same, even though they are not directly linked.
Casey

Image
TopNavNewbie
Jr. Propeller Head
Posts: 5
Joined: Tue Mar 14, 2017 8:40 am

Re: Search submit button appearing above search bar

Post by TopNavNewbie »

Thank you so much to everyone who replied :)

I tried cdschroeder's suggestion of changing the font size to be the same. But that didn't work unfortunately.

In the end I resolved it by examining my CSS a bit closer. It turned out that the padding-top on some custom CSS I'd inserted into my main stylesheet was causing the issue.
Post Reply