I feel like I’m crazy. I have very basic styling on a Searchbox input and definitely no conditions, settings, etc that would make this Searchbox input red. I’m not using any HTML elements that would overwrite the standard HTML of bubble but this input remains red! Anyone have any suggestions here?
It’s hard to tell what’s wrong based on what you’re providing. Have you tried creating another search input and seeing if that one also has the same issue? If not, then just replace the original with your new search input.
@yousif yea, I even copied one from another page on my app that isn’t showing red and on this page it does…
I checked the HTML and it looks like bubble is inserting this in the Styles but I don’t know why…
input.tt-input {
/* background-color: red !important;
Conditionals?
@chris.williamson1996 all i have is a condition to set the font to bold when an option has been selected. Nothing with this red.
Hover preview and click run without plugins.
Maybe one of your installed plugins have CSS that’s interfering.
Also check your page level HTML and app level HTML to verify you don’t have anything in there. If so temporarily remove scripts and test.
@chris.williamson1996 great suggestion. I previewed without community plugins and the input is still red. But I previewed “Safe - No Custom HTML” and the input is regular…but I’m not using any custom html and I don’t have anything set in the app level html either…
I know you have already said this, but none of your style variables that could be impacting the searchbox?
Last thing I can think of is running chrome inspect element and see which styles is being applied and try to trace back in bubble.
Since you previewed without custom HTML and fixed it but running without plugins didn’t we know it’s source.
Check these places
-page level HTML
-settings - SEO - Header html
-Click the search icon by the preview button, search for elements - HTML element.
-any JavaScript actions/elements
You’re looking for a < script >or < style > in one of those places. Copy everything found, paste it in a Google doc. Delete each one from in the app. Then put them back in their original location one by one and preview the app. You will find one that triggers it.
Once you know its source you can go about fixing it.
Remove the custom id attribute on that element.
2 Likes
I had the same problem.
It is because on a certain Bubble template, this custom header is defined on index
This topic was automatically closed after 70 days. New replies are no longer allowed.