Bootstrap & Quickbase CSS question

  • 1
  • 2
  • Question
  • Updated 4 years ago
  • Answered
Hello,

I have leveraged the API_DoQueryCount call to grab the Total number of records from a quickbase report. (Thank you Dan!)....I then inserted the results into a qbase text page using BootStrap (list group with badges.....link to the bootstrap code "http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_list_group_badge&stacked=h")....

It worked!! Almost.......

Problem: The "Badge" text color should be white....but it is displaying blue..

See the attached image....the top image is the result of embeding bootstrap "list group with badges" code into a Qbase Text page.....and works great).......

The bottom image is the result of embeding the code below into a qbase text page....the docountquery results are correct.....which is great.....however.....is The "Badge" text color should be white....but it is displaying blue.



My QUESTION: How can I get the text color to display white?

Thank you!!

Code used:



<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">

</head>

<body>

<div class="container">

<h2>List Group With Badges</h2>

<ul class="list-group">

<li class="list-group-item"><span class="badge"><a id="QBU_TotalNewCustomers"></a></span> New</li>

</ul>

</div>

<script src="https://quickbase.intuitcdn.net/res/64673-13/js/jquery-1.7.2.min.js"></script>

<script>
var dbid = "your dbid";
var apptoken = "your apptoken";
var qid = "your qid";

var act = "API_DoQueryCount";

$.ajaxSetup({data: {apptoken: apptoken}});

var promise = $.get(dbid, {
act: act,
qid: qid
});

$.when(promise).then(function(xml){
var totalNewCustomers = $("numMatches" ,xml).text();
$("#QBU_TotalNewCustomers").html(totalNewCustomers);
});
</script>


</body>


</html>

Photo of George

George

  • 180 Points 100 badge 2x thumb

Posted 4 years ago

  • 1
  • 2
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
Enter your HTML and CSS into bootply.com and post url. I am in a lobby on a tablet so I can't debug but the <link ...> is being clipped by the forum son I can'tell see exactly what you code is.
Photo of George

George

  • 180 Points 100 badge 2x thumb
Dan, thank you for your reply. I referencing the bootstrap css hosted here: maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css. It seems that when I add the Quickbase (api_docountquery) code to the text page....the Quickbase css overrides the bootstrap css.

THanks again for any advice.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,204 Points 20k badge 2x thumb
If you are trying to use Bootstrap within a QuickBase page you have to use a trick to recompile the CSS using Less to specify that the Bootstrap CSS should only apply within a specific <div>. Details here:

How to use Bootstrap with QuickBase?
https://quickbase-community.intuit.com/questions/994665

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=345