Forum Discussion

MikeTamoush's avatar
MikeTamoush
Qrew Commander
2 years ago

Formula Rich Text Button on Mobile - Any clever way to max width?

Is there any tricks to be able to make a formula rich text button 'fill the mobile' screen (width) like a formula URL button does? Is there any sneaky CSS that somehow is 'maximum width' or anything clever?



------------------------------
Mike Tamoush
------------------------------
  • BrianSeymour's avatar
    BrianSeymour
    Qrew Assistant Captain

    Hey Mike,

    I popped open the hood using Safari Dev Tools and it looks like Quickbase adds the Vibrant class to its native buttons. Perhaps adding this class to your Formula Rich Text would resolve the issue? It's seemed to work during my test (see attached screenshot).

    If you dig further, it looks the Vibrant CSS Rule (style) has several declarations, including display: block; which should make the element stretch to the width of the page by default.  For example, this Formula Rich Text seems to mimic a native QB button making an anchor tag <a> (which is an inline element by default) display as a block element:

    // Intended result
    // <a href="your-url" class="Vibrant ui-link">Add Item Rich Text</a>

    var Text Url = [Add Item];

    "<a href=\""
    & $Url
    & "\" class=\"Vibrant ui-link\">Add Item Rich Text</a>"


    The \ is there to escape (ignore) the double quote " characters. There are other ways to write using using a single quotes ' too, but hopefully you get the idea.

    If adding the Vibrant class doesn't do the trick, then you could explicitly set CSS styles too in your Formula Rich Text:

    // The width: 100%; declaration shouldn't be necessary for block elements.

    var Text Style = "display: block; width: 100%; background-color: lightgray;";

    "<a style=\"" & $Style & "\"></a>"

    It would help to see at least part of your Formula Rich Text if you are still stuck!



    ------------------------------
    Brian Seymour
    ------------------------------
    • MikeTamoush's avatar
      MikeTamoush
      Qrew Commander

      Thanks!! Ill try both the Vibrant idea and the display block or width 100% and report back if I have success.



      ------------------------------
      Mike Tamoush
      ------------------------------
      • MikeTamoush's avatar
        MikeTamoush
        Qrew Commander

        I tried width:100% and that was all it took! I had to fuss with the padding and height to match the native, but that was easy enough. I suspect using the Vibrant Button would also work and set the height the same as well, but I didnt have time to test that yet.



        ------------------------------
        Mike Tamoush
        ------------------------------