Forum Discussion

BernardLucino's avatar
BernardLucino
Qrew Trainee
8 years ago

How to bold values in a Form?

I want to make the value of my field (PO TOTAL) in bold to emphasize it. Is it possible?
Please see the image the I attached for reference.
  • That string inside quotes is called the selector. To use multiple selectors you list both using a comma:

    $("td.label:has(label.fieldLabel b:contains(PO TOTAL)),
      td.label:has(label.fieldLabel b:contains(PO Currency)")
    ").next("td").wrapInner("<b></b>");
    • _anomDiebolt_'s avatar
      _anomDiebolt_
      Qrew Elite
      That  is because the PO Currency label is empty as you say. Try this:
      $("td.label:has(label.fieldLabel b:contains(PO TOTAL)),
         td.label:has(label.fieldLabel b:empty"))
      .next("td")
      .wrapInner("<b></b>");
      Let me know if it works.  I have never used :empty - that's why its worth answering questions! Through our combined efforts we have advanced the great corpus of QuickBase knowledge.

      Go Team QuickBase!

      BTW, this is how doctors learn their skills:
      1. See One
      2. Do One
      3. Teach One
    • BernardLucino's avatar
      BernardLucino
      Qrew Trainee
      I see.. thank you for your help Dan. You're such a great person.
    • BernardLucino's avatar
      BernardLucino
      Qrew Trainee
      $("td.label:has(label.fieldLabel b:contains(PO TOTAL)),
        td.label:has(label.fieldLabel b:contains(PO Currency)")") .next("td") .wrapInner("<b></b>");

      I tried using this but it didn't work. Is it because my PO Currency in the form uses an alt text which is just blank?
  • A cheap way to do it is to create a formula rich text field with the following definition:
    "<b>" & ToText([number]) & "</b>"
    But you may need a more complicated formula if you need (1) to preserver commas and (2) are worried about having right justification in reports (string justify the the left).
  • You can also do it with IOL without any additional data fields and keep the original commas and justification. You of course have to use and IOL field but you should have this in every application so you can immediately implement new script solutions without delay.

    Assuming the label is "number" this script finds the cell with the label, selects the next cell (which contains the value) and wraps in in bold tags.
    $("td.label:has(label.fieldLabel b:contains(number))").next("td").wrapInner("<b></b>");
    Reference the unmodified HTML:
    <tr class="formRow ">
      <td id="tdl_0" class="label lc">
        <label class="fieldLabel">
          <b>number</b>
        </label>
      </td>
      <td id="tdf_0" class="cell cc nowrap" colspan="100">5,029.36</td>
    </tr>
    and the modified HTML:
    <tr class="formRow ">
      <td id="tdl_0" class="label lc">
        <label class="fieldLabel">
          <b>number</b>
        </label>
      </td>
      <td id="tdf_0" class="cell cc nowrap" colspan="100"><b>5,029.36</b></td>
    </tr>
  • As to your other question about increasing the font you can add this:
    $("td.label:has(label.fieldLabel b:contains(number))")
      .next("td")
      .wrapInner("<b></b>")
      .css({fontSize: 20});
    But if you knowledgable of CSS you can just get rid of the <b> tag altogether (<b> is deprecated) and add the fontWeight property:
    $("td.label:has(label.fieldLabel b:contains(number))")
      .next("td")
      .css({fontSize: 20, fontWeight: "bold"});

    You will see <b> and <font> tags used in QuickBase formulas and in QuickBase's own HTML. They are considered deprecated by most of the web community today. But they still work and will continue to work for backward comparability. And the renegade in me sees the simplicity in their use - that's why it is called "markup" - like proofreader's marks that are inserted into the text of a manuscript to indicated formatting and layout:



    Sometimes using CSS gets outrageous in its complexity to do simple things..
    • HamzaAhmed's avatar
      HamzaAhmed
      Qrew Member
      Hi Dan,

      I have setup the IOL and have added the following to make a numeric value bold when viewing a record but it doesn't seem to be working. I only have the module.js page created as shown in the IOL setup

      (function(){
      //$("img[qbu=module]").remove();
      //$("img[qbu=module]").hide();

      var querystring=document.location.search;

      if(/a=dr/i.test(querystring)) {
      //DISPLAY RECORD PAGE

      $("td.label:has(label.fieldLabel b:contains(Test Field))")
      .next("td")
      .wrapInner("<b></b>")
      .css({fontSize: 20});
      }
      })();

      • RyanStanford1's avatar
        RyanStanford1
        Qrew Captain
        Hamza, is the label/fieldname for your field "Test Field"?

        You would need to change the b:contains(Test Field) to contain the label you're searching for.

        ------------------------------
        Ryan Stanford
        ------------------------------