How to resolve Bootstrap clash with Salesforce

Is it possible to use Bootstrap in a Visualforce page without having to use standardStylesheets="false" and showHeader="false"?

Answer is YES.

Here is the actual problem being faced while using bootstrap with salesforce.

Is it possible to use Bootstrap in a VFP without having to use standardStylesheets="false" and showHeader="false"? When I solely add in the stylesheets tag, my whole page is altered a little bit. The font is much larger but that is the only change. Even if I put in a styleClass="btn btn-primary on a button, I get no response from Bootstrap. That is until I add in the two tags, standardStylesheet=false and showHeader=false. I also am unable to override the standard style with inline style editing or style tags in the header. So is it possible to use Bootstrap in conjunction with the standard Salesforce styles? Without having to overwrite the page with an iFrame?


The reason the CSS goes all over the place is that Salesforce uses the same class names and properties as Bootstrap. If there's a conflict, Salesforce wins. There's two reasons I can think of that this would happen, either Salesforce is using !important after each property, or Salesforce renders their stylesheets after everything else and because CSS literally cascades, the last properties rendered are used, any before it are ignored. The latter is most likely.
One way to do this would be to use namespacing within the CSS itself. This means you wouldn't be able to call Bootstrap from a CDN, rather you'd need to reference it as a static resource.
So here are the steps to make it work.

1. Download the bootstrap files.
2. open bootstrap.css file.
3. Navigate  to http://winless.org/online-less-compiler
4. copy paste bootstrap.css code like below in there.

.BS {
 //paste bootstrap.css code here
}

5. now take the generated code and save back in the bootstrap.css file.

Now you are good to use bootstrap inside salesforce.
Only thing is that you need to have a wrapping div with class 'BS' applied.






Comments

Post a Comment

Popular posts from this blog

IsVisibleInSelfService on Task salesforce

I was working on assignment which required me to access Tasks and show on customer portal. I written the apex code and fired SOQL, but to my surprise none of Tasks were fetched. I thought its a permission issue from profile or sharing access issue. However at the end I found that there is a field on task object called  IsVisibleInSelfService  which derives the visibility of the tasks for customer portals. Even Apex code can't find the task if this boolean field is not set to true. Probably its trivial information but usefull when you are not aware of this :)
Read more

Too many batch retries in the presence of Apex triggers and partial failures.

Too many batch retries in the presence of Apex triggers and partial failures If you write and execute batch scripts then some time you might end up with this error, which may be difficult to understand. However proper explanation is given in the Salesforce documentation as below. Bulk DML Exception Handling Exceptions that arise from a bulk DML call (including any recursive DML operations in triggers that are fired as a direct result of the call) are handled differently depending on where the original call came from: When errors occur because of a bulk DML call that originates directly from the  Apex  DML statements, or if the  all_or_none  parameter of a database DML method was specified as true, the runtime engine follows the “all or nothing” rule: during a single operation, all records must be updated successfully or the entire operation rolls back to the point immediately preceding the DML statement. When errors occur because of a bulk DML call that ...
Read more

Governor limit SOQL 101 being suppressed

System.LimitException: Too many SOQL queries: 101 Did anyone faced scenario where SOQL 101 governor limit is not being reported to user interface (UI), instead it is being logged into debug logs ? Please provide your thoughts in the comments if there exists any possible scenario. As far as I know, Governor limits can not be suppressed and will be shown to user on the UI. However I am facing below scenario where SOQL 101 limit is being logged into debug log and not being shown in the UI. 1.User converts the lead. 2.Account, Opportunity, Contact created. 3.User is successfully redirected to newly created account page. 4.All the references are correct. Like ConvertedAccountId, convertedOpptyId etc. When I go to the Debug logs, There SOQL 101 (System.LimitException: Too many SOQL queries: 101) is being shown. If dig more in the debug logs then I found that this exception came while Opportunity Before Update trigger. The question is, Since all this is happening in sing...
Read more