Skip to main content

When I click the "SEARCH" tag at the top of the page, the Search Box appears as expected. But when you move the cursor to the box, it disappears.

Note also that this only occurs on some pages and that the "SEARCH" tag itself is not underlined like the other tags.

As it is now, I have to return to my profile page to do any kind of search. What gives?

Original Post

Replies sorted oldest to newest

I can see how cursor movement has to be monitored to determine if it has moved to the search box or to somewhere else; in which case, you want it to disappear. But from what I've tried, it's hit and miss. Sometimes moving quickly works and sometimes if you can get to the text box within the search box in one quick movement it works as well. That's the behavior on this page as I type this reply. I'm using Microsoft Edge as my browser. That could make a difference. Maybe that's why they called it the edge.

This browser (Microsoft Edge) has a zoom feature which I normally have set at 100%. If I change it to 110%, it moves the whole menu off the top of the page and you have to click on the left-top dashed lines to get the menu to come up. Only now it appears down the left side of the screen. The "SEARCH" tag is near the top and clicking it (now it's underlined) brings the search box up underneath the tag in the menu blue area. Moving the cursor to it is not a problem.

So I changed the zoom to 90% to see if that would make a difference. The menu is back at the top of the page but the "SEARCH" tag is not underlined. With that browser setting, the search box is disappearing again. Same as 100% zoom.

So the problem appears to be with this browser when the SEARCH is at the top of the page. I noticed that there is a small sliver of gray background color between the search box and the blue area of the menu. Moving the cursor from the blue area, over that gray sliver, to the search box may be enough to trigger the disappearing act. That might explain why a quicker movement sometimes does not set it off.

When I click the "SEARCH" tag at the top of the page, the Search Box appears as expected. But when you move the cursor to the box, it disappears.

Note also that this only occurs on some pages and that the "SEARCH" tag itself is not underlined like the other tags.

As it is now, I have to return to my profile page to do any kind of search. What gives?

There is a CSS error that causes this. It also causes weird issues with the nav bar wrapping instead of collapsing.  Its why the SEARCH shows up in a different font in the nav bar too.

A few points...

  • The first line of defense with EVERY computer when it does something unexpected or different is to shut it down and reboot. About 90% of the time this will fix whatever was the problem.
  • In this case, since it is related to a web site, the next action to take is to clear the cache and cookies in your web browser, then open the page again.
  • There is no "CSS error" in play here. If you are seeing a different font on the "SEARCH" working, it is a browser issue. Here's what the top bar looks like on my machine in Firefox, Safari, and Internet Exploder:

Attachments

Images (2)
  • mceclip0
  • mceclip1
@Rich Melvin posted:

A few points...

  • The first line of defense with EVERY computer when it does something unexpected or different is to shut it down and reboot. About 90% of the time this will fix whatever was the problem.
  • In this case, since it is related to a web site, the next action to take is to clear the cache and cookies in your web browser, then open the page again.
  • There is no "CSS error" in play here. If you are seeing a different font on the "SEARCH" working, it is a browser issue. Here's what the top bar looks like on my machine in Firefox, Safari, and Internet Exploder:


Rich, I respectfully disagree.  In your screen grab, the fonts are closer but on close inspection you can see the S, E, and R are different from from those in other places in the nav bar.  It's evident also in the kerning.

Here are three screen grabs from my PC.  One from FireFox, one from Chrome, and one from Edge.

firefoxchromeedge

As you can see, in each snip the SEARCH menu item has a font with serifs - different from that of the rest nav bar...

The reason this is happening is because of either a CSS error or possibly an issue with the a font library used for symbols like the "plus" and "bell" seen to the right of SEARCH.

The reason this is the case is follows:

As you can see, the anchor tag with in the last list item element has an idiomatic element that is using a FontAwesome class "fa-plus" which causes a plus to be shown in the nav menu to create new content.  In the <li> tag above it, it's using fa-search with an aria-label (used by screen readers for those with a disability) of "Search".  For whatever reason (CSS issue or issue in packaging the FontAwesome library) the browser can not find the the fa-search icon (should look like this: https://fontawesome.com/v4.7.0/icon/search) and instead defaults to showing the aria-label text.  Defaulting like this will cause the browser to pick a default font.  You might be on a Mac, Linux box, or an older Windows computer (I have no way of knowing) that is using a different set of default fonts that mine (and others).

The other problem with this is, is that this throws off the width calculation and then breaks the resize points, which is why this happens:

BTW, the wrap occurs at a window width of 1100 pixels!

Shrinking the width a little more yields the following with the collapsible sliding left menu:

I think this is likely also messing with the positioning of the pop-up box under "SEARCH" and calculating the overlay map for mouse movements.  I can confirm that the disappearing search box that @Consolidated Leo mentioned happens for me too when the page is scrolled down from the top, and the window width is less than than 1144px.  It also happens at higher widths depending on how fast I move my mouse.

Attachments

Images (9)
  • firefox
  • mceclip1
  • mceclip2
  • mceclip3
  • mceclip4
  • mceclip5
  • mceclip6
  • chrome
  • edge
Last edited by rplst8

So it’s been a while, but I finally got around to asking Crowdstack about this issue like Rich recommended.  I sent them all the details I posted in this thread and this was the response...

Thanks for reaching out and providing so many details. The O Gauge Railroading forum has significant customizations to the layout and styling which likely all of the issues you've pointed out can be attributed to. We don't have any level of management responsibility over the Crowdstack itself, so these are issues that would need to be addressed by the administrators. So, unfortunately there is nothing within our power to do to address them.
To address a couple of your specific points:
  • The "SEARCH" text in the menu is customized through CSS. The standard, off-the-shelf behavior in Crowdstack is to show the Font Awesome search icon. The custom CSS on OGR is what is changing the text to "Search", so they would need to change the font-family if they want it to appear in a different font. So, to be clear: there is no issue with not finding the fa-search icon (nor the aria-label). The standard behavior has simply been overridden, which is the cause of the behavior you're seeing.
  • The wrapping of menus can happen when too many items and/or too many long menu items are added to the menu. The recommendation here is to always shorten the menu to avoid wrapping.
My recommendation to you is to go back to the administrators and have them get with their web development team to address these issues however they best see fit.
Last edited by rplst8

Add Reply

Post

OGR Publishing, Inc., 1310 Eastside Centre Ct, Suite 6, Mountain Home, AR 72653
800-980-OGRR (6477)
www.ogaugerr.com

×
×
×
×
Link copied to your clipboard.
×
×