Discussions

 View Only
Expand all | Collapse all

Rich Text Field Button Not Working on Mobile

  • 1.  Rich Text Field Button Not Working on Mobile

    Posted 10-15-2019 21:12
    Hello everyone,

    I have a series of button bars via Rich Text Field that works great on the web experience.  I attached a screenshot of that.  However, on mobile it does not work at all.  Can mobile support this?  Anything I can do as it would be helpful to keep the button functionality but maybe I need a separate simpler form for the mobile experience?

    I included the code as a text file since it is so long to keep this post clean.

    ------------------------------
    Ivan Weiss
    ------------------------------

    Attachment(s)

    txt
    Code.txt   9 KB 1 version


  • 2.  RE: Rich Text Field Button Not Working on Mobile

    Posted 10-16-2019 10:23
    Wow that's alot to cram into a RichText field. If you have Chrome, open the dev tools F12 and you can switch to mobile view. You can select the elements on the page, would really need to see this code to debug it. 

    My buttons in a rich text field work on mobile, but I don't have as many characters in my formula.


    ------------------------------
    Everett Patterson
    ------------------------------



  • 3.  RE: Rich Text Field Button Not Working on Mobile

    Posted 10-18-2019 09:42
    So in Chrome via development tools they displayed just fine.  But once I clicked around it did stop working so I found the code section...  Here it is




    ------------------------------
    Ivan Weiss
    ------------------------------



  • 4.  RE: Rich Text Field Button Not Working on Mobile

    Posted 10-18-2019 10:12
    Since it's working for me, I assume you have syntax errors and I noticed a few errors. Check your code thoroughly and it should start displaying correctly. 

    border:1px solid green;border-radius: 0'" & "href='" & $URLSEVEN ​

    missing closing semicolon on the inline styles

    'border-radius: 0;'

    ------------------------------
    Everett Patterson
    ------------------------------



  • 5.  RE: Rich Text Field Button Not Working on Mobile

    Posted 10-18-2019 10:55
    I fixed that but it still does not work.  This is not my expertise here as I found some tutorials and am stretching the limits of my skill for sure :)  But I cant see to figure it out.  On the phone it doesnt work at all.  In developer tools it works when I first browse it, if I click on a button and refresh the page it no longer works.



    ------------------------------
    Ivan Weiss
    ------------------------------



  • 6.  RE: Rich Text Field Button Not Working on Mobile

    Posted 10-18-2019 12:13
    What is the formula you are using for [EliteButtonClass] and [EliteButtonFontColor]? The HTML inline styles are coming from those fields.

    ------------------------------
    Everett Patterson
    ------------------------------



  • 7.  RE: Rich Text Field Button Not Working on Mobile

    Posted 10-18-2019 14:22
    Elitebuttonclass = btn btn-success btn -sm

    Elitebuttonfontcolor = #FFFFFF

    ------------------------------
    Ivan Weiss
    ------------------------------



  • 8.  RE: Rich Text Field Button Not Working on Mobile

    Posted 10-18-2019 15:48
    This is the issue, you are calling an HTML style class that is not used in mobile. 

    Elitebuttonclass = btn btn-success btn -sm​


    Change it to this and see if it works on mobile AND desktop

    Elitebuttonclass = Vibrant ui-link


    ------------------------------
    Everett Patterson
    ------------------------------



  • 9.  RE: Rich Text Field Button Not Working on Mobile

    Posted 10-18-2019 16:07
    ahhh okay so that fixed the button issue.  The buttons are no longer attached as they were before (I was trying to just create a button bar).  I can deal with that.

    But the colors now are not the green.  How do I customize the color with the vibrant ui-link?  Am I still using all of those same style edits I have?  Or do they not work with this?

    ------------------------------
    Ivan Weiss
    ------------------------------



  • 10.  RE: Rich Text Field Button Not Working on Mobile

    Posted 10-27-2019 15:03
    Everett,

    That does work except now when I am not hovering over the button it is gray.  When I hover I have the control set to the blue I want.  How do I change the "resting" non hover color for the button?  I am using a white font so it is pretty tough to read it.

    ------------------------------
    Ivan Weiss
    ------------------------------



  • 11.  RE: Rich Text Field Button Not Working on Mobile

    Posted 10-28-2019 10:57
    Set the background color to green on the inline style for each button

    style="background: green; color: white; text-decoration: none; border:1px solid green; border-radius: 0;"​


    ------------------------------
    Everett Patterson
    ------------------------------



  • 12.  RE: Rich Text Field Button Not Working on Mobile

    Posted 10-28-2019 12:58
    OKay that change enabled the hover color change but I am fine with that.  However, now I have large spacing between my buttons.  How do I make that go away?  Trying to make it look nice and organized as a button bar but every tweak creates another problem lol

    var text STYLE="' style='color: " & [EliteButtonFontColor] & "; text-decoration: none; border-style: solid; border-color: #007BA5; border-width: 1px; border-radius: 0; background: #009ACE;'";



    ------------------------------
    Ivan Weiss
    ------------------------------



  • 13.  RE: Rich Text Field Button Not Working on Mobile

    Posted 10-28-2019 14:04
    Add it to your inline style and set the attribute for margin to 0px

    style='margin: 0px; color: white;text-decoration: none;border:1px solid green;border-radius: 0;'​


    ------------------------------
    Everett Patterson
    ------------------------------



  • 14.  RE: Rich Text Field Button Not Working on Mobile

    Posted 10-28-2019 21:24
    Ah perfect thanks!  It still looks a bit choppy but I think it works for my purposes.  I guess the right thing to do eventually would be to make a table or something to make the buttons uniform in size and organize them a bit.  But that might be for another day :)

    ------------------------------
    Ivan Weiss
    ------------------------------