If an interface element, say a button on your page, was styled differently in a particular browser, it would imply, that styling is being overridden by the browser’s (also known as the user agent) stylesheet. There was a similar situation with the styling of the default button in Bootstrap, in Google Chrome.
How the Bootstrap Buttons are actually Styled
But the Default Button Text was styled differently in Chrome…
The Bootstrap default button looked fine in other browsers, but in Google Chrome, the text color for the default button was white.
And since the button color is a gray gradient, this text was barely visible. This happened because the default styling was being overridden.
What is the case of this Problem?
We had to investigate a bit before finding the actual problem. This happened because we had the Redmine Extended v1.4 Chrome Extension installed in our browser. This extension also defined a class “.btn” in the stylesheet, which specifies a white font color, overriding the “.btn” class by Bootstrap stylesheets.
We could verify this by disabling the extension.
How to solve this problem
The easiest way to solve this is to change the classname “.btn”, to “.btn_redmine” (or any other non-generic class name), in redmine.js and style.css of the Redmine Extended Chrome Extension.
You can find these files at “\AppData\Local\Google\Chrome\UserData\Default\Extensions\mkpkclfhemlehfbeinbjnbjebbikgfpb\1.4_0”
Once you rename the class, you will be able to view the default button properly, at your end.
But….
Redmine Extended v1.4 could be one of many such extensions which use the “.btn” class.
Hence, if you are a web designer or developer, and using Bootstrap for your project, it is recommended that you do not edit the Redmine Extension files. You can instead, add a class “.btn-default”, in your own custom stylesheet, and specify a desired font color. This will be a more solid solution, because there maybe other extensions, which also specify a “.btn” class.
.btn-default{
color:#333!important;
}“.btn-default” class is already present in Bootstrap v3.1.1. The default Bootstrap button is styled with this class. By adding “!important” for an attribute, you can force this rule to be applied while styling a button with the class btn_default.
By adding the above code, you can ensure that other buttons in your website, won’t get affected, even if the end user is using Redmine Extended 1.4 extension for Google Chrome.
Reference:
http://stackoverflow.com/questions/9246896/twitter-bootsrap-button-text-is-white-on-chrome
Please note, some of the links in this blog post might be affiliate links. This means if you go on to purchase a product using such a link, we receive a small commission (at no additional cost to you). This helps us support the blog and produce free content. We only recommend products we work with or love. Thank you for your support!
Leave a Reply