Display Block and Display None moves objects unintentionally

I am working on the Wikipedia Viewer. Bootstrap 4 got rid of glyphicons, so I kind of just made a clear input field icon with a font awesome icon. It’s probably not best practices, but I am having fun doing it. I have a search icon like the example and then a input field for searching. They both toggle between “display: none” and “display: block” on clicks. When I hit the clear icon, the search icon moves out of it’s original position and I am not sure why. Any help would be appreciated!

When you set display to block for the search icon, you are overriding the css placed on the icon via the “fas fa-search fa-10x” class. To prevent this from happening, you could try setting the display to a blank string in the $("#clear") click event like the following:

$("#searchIcon").css("display", "");

That’s working well @RandellDawson. Does an empty string set to default?

According to the jQuery documentation, setting the value of a style property to an empty string via the css function removes that property from an element if it has already been directly applied. The element’s style for that property will be restored to whatever value was applied originally.

1 Like