Forum Discussion

QuickBaseCoachD's avatar
QuickBaseCoachD
Qrew Captain
8 years ago

HTML help on too much vertical space for a large font on a report.

I have the formula below and I'm writing an interesting app for Mobile use, but using the Desktop interface.  But the target device is a smartphone.  As an aside, I think my approach is an innovative method of getting around the shortcomings of Quick base Mobile without needing to resort to ViziApps.  All navigation lands the user on a form, even a navigation to a report is within a form so that I can have extra navigation buttons on the top of the form.  maybe when I'm done with the app I will post my screen shots.

But back to my question.

The landing page consists of two buttons,  but because I need to use formuals, the Buttons are actually on two reports on the Dashboard.

The buttons work fine, but they have about twice the vertical space on the single line of the report that they need.  How can I maintain the font size,  but have less white space top and bottom of the button within the 1 line, 1 column report. 

Here is my current formula text Hyperlink

var text URL = [Check In URL];

var text Words = "<b><p style=font-size:125px><font color=blue>"
& "Check In";

"<a href=" & $URL & ">" & $Words & "</a>
    • QuickBaseCoachD's avatar
      QuickBaseCoachD
      Qrew Captain
      8 years ago
      I have attached a screen shot. For the Sales Rep Role on a phone there would be no Tables showing on the Table Bar and the phone is vertical, so it looks much better.
    • _anomDiebolt_'s avatar
      _anomDiebolt_
      Qrew Elite
      8 years ago
      It is disorienting to look at with such a large font but I assume that is a report that is on the home page and it just has one record, one field and jumbo content. I need to see the HTML that immediately surrounds the HTML of your formula.

      Using Chrome hover the mouse over "Check In" and right click and select Inspect. This will bring up the Chrome Developer tools on the Elements tab and highlight the HTML element associated with where you pointed the mouse. You might land on the <a>, <b> or <p> tag or something very close to it.

      Now crawl up the HTML tree looking for a container element probably a <table> element. Right click on this <table> element and select EDIT AS HTML. You will see something like this where you could edit the HTML within the <table> tag:



      Copy this HTML and post it via a https://pastebin.com/ or email me it as a text file.

      Despite seeing your formula I need to see exactly what is in the page surrounding your formula to know what CSS to apply to shrink the space. The end result will probably be a formula text with some HTML allows and one of those crazy OEH (On Error HTML) formulas.
  • _anomDiebolt_'s avatar
    _anomDiebolt_
    Qrew Elite
    8 years ago
    Try this:

    var text URL = [Check In URL];
    var text Words = "<b><p style=font-size:125px;padding:0;margin:0><font color=blue>"
    & "Check In";
    "<a href=" & $URL & ">" & $Words & "</a>"
    • QuickBaseCoachD's avatar
      QuickBaseCoachD
      Qrew Captain
      8 years ago
      I know you�re joking, but actually I need to make my users feel that this is an app. So I need to figure out how to get an icon on their iPhone /Android screen and be able to set the icon. So that is my next project I�m thinking about now. :)
    • _anomDiebolt_'s avatar
      _anomDiebolt_
      Qrew Elite
      8 years ago
      That actually can be done using something called Web App Manifest and there is a generator for it:

      https://tomitm.github.io/appmanifest/

      It is part the the general PWA (Progressive Web Application) bundle of technologies that includes Service Workers and whose primary goal is to get Web Application to have the parity with native apps.