Discussions

Custom Dropdown Menu for Mobile

  • 1.  Custom Dropdown Menu for Mobile

    Posted 08-25-2020 12:01
    Ok  smarty pants - I've got one for you!  I have been working on a drop down menu and it is amazing; however, when I try to use it on a report in mobile, it doesn't resize.  Does anyone know what I can do to help?

    Here what what the menu looks like in QB (desktop).  Unfortunately, it only shows the top option when viewing it on the mobile app.


    Here is my Rich Text Formula that I got from the All-Star Action Menu app on the App Exchange:

    If([Results]="",

    var text buttonone = [Complete]& "@Complete";
    var text buttontwo =[Deficient]& "@Deficient";
    var text buttonthree = [Not Completed] & "@Not Completed";
    var text buttonfour = [Not Due] & "@Not Due";
    var text buttonfive = [Not Available] & "@Not Available";
    var text buttonsix = [Not Equipped] & "@Not Equipped";
    var text buttonseven = "";

    var text longestlabel = "Not Completed";

    var text id = ToText([Record ID#]);

    var number width =
    Min(Max(Length($longestlabel),13.5)*8.1, 180);

    var text style= "\" style=\"position: absolute; display: block; height:37px; width: 98.5%; padding: 10px; text-decoration:none; color: #000;\" onmouseover=\"this.style.color='#fff'; this.style.backgroundColor='#365EBF' \" onmouseout=\"this.style.color='black'; this.style.backgroundColor='transparent'\"";

    var text nulllist = List("!", If($buttonone="","", $buttonone),
    If($buttontwo="","", $buttontwo),
    If($buttonthree="","", $buttonthree),
    If($buttonfour="","", $buttonfour),
    If($buttonfive="","", $buttonfive),
    If($buttonsix="","", $buttonsix),
    If($buttonseven="","", $buttonseven));

    "<div style=\"position: relative; height:25px; width:" & ToText($width) & "px; right: 1px;\"><span style=\"position: absolute; right: 32px; top: 2px; text-align:right; text-decoration:none;\"><a href=\"" & Left(Part($nulllist, 1, "!"), "@") & "\" style=\"text-align:right; text-decoration:none; color:#365EBF;\" onmouseover=\"this.style.textDecoration='underline'\" onmouseleave=\"this.style.textDecoration='none'\">" & Right(Part($nulllist, 1, "!"), "@") & "</a></span>" &

    If(Count($buttonone, $buttontwo, $buttonthree, $buttonfour, $buttonfive, $buttonsix, $buttonseven)>1,

    "<span id=\"box" & $id &"\" style=\"position: absolute; right:5px; width: 20px; height: 20px; background-color: transparent; border-radius: 2px; border-left: 1px solid #C7C7C7;\" onmouseenter=\"this.style.backgroundColor='#0070D2'; this.style.borderLeftColor='transparent'; getElementById('arrow" & $id &"').style.borderColor='#ffffff transparent transparent transparent'\" onmouseleave=\"this.style.backgroundColor='transparent'; this.style.borderLeftColor='#C7C7C7'; getElementById('arrow" & $id &"').style.borderColor='#404040 transparent transparent transparent'\" onmousedown=\"getElementById('dropdown" & $id &"').style.visibility='visible'; getElementById('boxSelected" & $id &"').style.visibility='visible'; this.style.backgroundColor='#0070D2'; this.style.borderLeftColor='transparent';\">"
    & "<span id=\"arrow" & $id &"\" style=\"position: absolute; left:25%; top:35%; width: 0; height: 0; border-style: solid; border-width: 6px 5px 0 5px; border-color: #404040 transparent transparent transparent; \"></span></span>"&


    "<span id=\"boxSelected" & $id & "\" style=\"position: absolute; right:5px; width: 20px; height: 20px; background-color: #0070D2; border-radius: 2px; visibility: hidden;\" onclick=\"getElementById('dropdown" & $id &"').style.visibility='hidden'; this.style.visibility='hidden'\">"
    & "<span id=\"arrowSelected" & $id &"\" style=\"position: absolute; left:25%; top:35%; width: 0; height: 0; border-style: solid; border-width: 6px 5px 0 5px; border-color: #fff transparent transparent transparent; \"></span></span>" &

    "<span id=\"dropdown" & $id &"\" style=\"position: relative; width: "& $width &"px; padding: 1px; display: block; visibility: hidden; background-color:white; z-index:1; border: 1px solid #55A0EF; box-shadow: 0 0 7px 2px rgba(102,102,102,.5); top: 25px; padding-bottom: 38px; text-decoration:none; right:5px; color: black\" onmouseleave=\"getElementById('boxSelected" & $id &"').style.visibility='hidden'; this.style.visibility='hidden'\">" &
    List("<br><br>", If(Part($nulllist, 2, "!")="", "", "<a href=\"" & Left(Part($nulllist, 2, "!"), "@") & $style & ">" & Right(Part($nulllist, 2, "!"), "@") & "</a>"),
    If(Part($nulllist, 3, "!")="", "", "<a href=\"" & Left(Part($nulllist, 3, "!"), "@") & $style & ">" & Right(Part($nulllist, 3, "!"), "@") & "</a>"),
    If(Part($nulllist, 4, "!")="", "", "<a href=\"" & Left(Part($nulllist, 4, "!"), "@") & $style & ">" & Right(Part($nulllist, 4, "!"), "@") & "</a>"),
    If(Part($nulllist, 5, "!")="", "", "<a href=\"" & Left(Part($nulllist, 5, "!"), "@") & $style & ">" & Right(Part($nulllist, 5, "!"), "@") & "</a>"),
    If(Part($nulllist, 6, "!")="", "", "<a href=\"" & Left(Part($nulllist, 6, "!"), "@") & $style & ">" & Right(Part($nulllist, 6, "!"), "@") & "</a>"),
    If(Part($nulllist, 7, "!")="", "", "<a href=\"" & Left(Part($nulllist, 7, "!"), "@") & $style & ">" & Right(Part($nulllist, 7, "!"), "@") & "</a>")) &
    "</span>","") & "</div>",

    "<div style='text-align:center; color:#FFFFFF; background-color:#003B70; '>" & [Results] & "</div>")

    ------------------------------
    Amber Polston
    ------------------------------