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

  • 0
  • 1
  • Question
  • Updated 1 year ago
  • In Progress
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>"
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 51,006 Points 50k badge 2x thumb

Posted 1 year ago

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

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,302 Points 20k badge 2x thumb
let me screenshot that for you!
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 51,006 Points 50k badge 2x thumb
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.
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,302 Points 20k badge 2x thumb
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.
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,302 Points 20k badge 2x thumb
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>"
(Edited)
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 51,006 Points 50k badge 2x thumb
That worked very nicely
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,302 Points 20k badge 2x thumb
I will for it in the app store.
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 51,006 Points 50k badge 2x thumb
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. :)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,302 Points 20k badge 2x thumb
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.
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,302 Points 20k badge 2x thumb
Actually there are a bunch of these Web App Manifest generators:

https://www.google.com/search?q=web+manifest+generator

I can't remember which one I used but in general they either scan your website or you enter some information or both and the manifest.json file and <head> markup is auto generated.
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 51,006 Points 50k badge 2x thumb
Actually I realized that on an iPhone I just need to go to the app on the web and use the button to "Add to Home Screen", and it will create a icon, like an "app".  The icon is the old Quick Base "broken box" logo, but it will be updated to the purple Q> logo on the November release.