When working with your plugin, you may find that the text inside the location field of the search bar is cut off or completely invisible. It can make clicking into the field difficult for end users, and hinders the search experience. It might look like this:
There are 2 reasons that this might happen, both of which are theme conflicts, and luckily, this is usually an easy fix.
Option 1
If the text is cut off, it's most likely a conflict with your theme. Your theme may have some code that doesn't play nice, but you can override this.
Copy and paste the following code under Settings > Design in the custom CSS box:
.sidx-container .sidx-searchform .sidx-suggestions-input input {
margin: 0 !important;
}
You may need to clear your website cache (usually in the form of a plugin) and browser cache to be sure that it updates when you go to check it. You can always check the website in a browser you never use or in an incognito window.
This should fix the issue 99% of the time.
Option 2
Your theme may have some CSS that is making the text in the field white. This is less common but does happen. You can override this with CSS. You will want to express caution with updating with this option as the CSS you apply could affect your website in other areas not relating to the IDX.
Copy and paste the following code under Settings > Design in the custom CSS box:
input::placeholder, textarea::placeholder {
color: #hexcode !important;
}
Change the word "hexcode" to your desired color, something that will be visible to users. The default color for this text is a light grey (#cacaca).