3 Replies Latest reply on Jun 19, 2017 10:30 AM by TSGal

    WebViewer Render Fails in WebDirect with Inline-CSS

    chaseholden

      Product and version FMS 16.0.1; FMPA 16.0.1

      OS/version macOS Sierra 10.12.5

      Browser/version Safari 10.1.2 (12603.3.3); Safari Technology Preview 32 (Safari 11.0, WebKit 12604.1.23.0.4); Firefox 53.0.3

      Hardware: Mac Mini (Late 2012) 16GB RAM FMS 16.0.1 via iMac (Late 2013) FMPA 16.0.1 48GB RAM

       

      Description: Attempting to include inline-CSS below prevents a Web Viewer from rendering basic HTML content when viewed in WebDirect, even though it renders within Filemaker. This bug or lack of functionality is not documented on Filemaker 16 WebDirect Guide.

       

      Workaround: When removing the inline-CSS and linking to an external CSS file, WebDirect WebViewer renders successfully.

      Example workaround linked CSS: <link rel=\"stylesheet\" type=\"text/css\" href=\"https://mservicegroup.com/css/quote.css\" />

       

      Inline-CSS that fails:

      How to replicate

      "<HTML><HEAD><STYLE>
          body {
              background: #fff;
              margin: 0 auto;
              padding: 5px 20px 0 20px;
              font-family: \"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;
                 font-weight: 300;
               vertical-align: text-top;text-align:center;
          }
          #table {
              display: table;
              width: 66%;
              background: #fff;
              margin: 0 auto;
              box-sizing: border-box;
              vertical-align: text-top;
              text-align:center;
           }
           .caption {
               display: block;
               width: 66%;
               background: #fff;
               height: 55px;
               padding-left: 10px;
               color: #000;
               font-size: 16px;
               line-height: 55px;
               box-sizing: border-box;
              text-align:left;
              margin: -1em auto;
           }
           .header-row {
               background: #00C93C;
               color: #fff;
           }
          .row {
              display: table-row;
          }
          .cell {
              display: table-cell;       
              padding: 6px;
              border-bottom: 1px solid #e5e5e5;
              text-align: center;
          }
          .primary {
              text-align: left;
          }
          input[type=\"radio\"],
          input[type=\"checkbox\"]{
              display: none;
          }
      sup {
          position: relative;
          font-size: 40%;
          line-height: 0;
          vertical-align: baseline;
          top: -1.2em;
      }
          @media only screen and (max-width: 760px)  {
              body {
                  padding: 0 20px 0;text-align:center;
              #table {
                  display: block;
                  margin: 0 auto;
                  text-align:center;}
              .caption {
                  position: fixed;
                  top: 1em;
                  text-align: left;
                  height: 44px;
                  line-height: 36px;
                  z-index: 5;
                  border-bottom: 2px solid #999;
              }
              .row {
                  position: relative;
                  display: block;
                  border-bottom: 1px solid #ccc;
              }
              .header-row {
                  display: none;
              }       
              .cell {
                  display: block;
                  border: none;
                  position: relative;
                  height: 45px;
                  line-height: 45px;
                  text-align: center;
              }
              .primary:after {
                  content: \"\";
                  display: block;
                  position: absolute;
                  right:10px;
                  top:18px;
                  z-index: 2;
                  width: 0;
                  height: 0;
                  border-top: 10px solid transparent;
                  border-bottom: 10px solid transparent;
                  border-right:10px solid #ccc;
              }
              .cell:nth-of-type(n+2) {
                  display: none;
              }
              input[type=\"radio\"],
              input[type=\"checkbox\"] {
                  display: block;
                  position: absolute;
                  z-index: 1;
                  width: 99%;
                  height: 100%;
                  opacity: 0;
              }
              input[type=\"radio\"]:checked,
              input[type=\"checkbox\"]:checked {
                z-index: -1;
              }
              input[type=\"radio\"]:checked ~ .cell,
              input[type=\"checkbox\"]:checked ~ .cell {
                  display: block;
                  border-bottom: 1px solid #eee;
              }
              input[type=\"radio\"]:checked ~ .cell:nth-of-type(n+2),
              input[type=\"checkbox\"]:checked ~ .cell:nth-of-type(n+2) {   
                  background: #e0e0e0;
              }
              input[type=\"radio\"]:checked ~ .cell:nth-of-type(n+2):before,
              input[type=\"checkbox\"]:checked ~ .cell:nth-of-type(n+2):before {
                  content: attr(data-label);
                  display: inline-block;
                  width: 20px;
                  background: #999;
                  border-radius: 10px;
                  height: 20px;
                  margin-right: 10px;
                  font-size: 12px;
                  line-height: 20px;
                  text-align: center;
                  color: white;
              }
              input[type=\"radio\"]:checked ~ .primary,
              input[type=\"checkbox\"]:checked ~ .primary  {
                  border-bottom: 2px solid #999;
              }
              input[type=\"radio\"]:checked ~ .primary:after,
              input[type=\"checkbox\"]:checked ~ .primary:after {
                   position: absolute;
                  right:222px;
                  top:22px;
                  border-right: 10px solid transparent;
                  border-left: 10px solid transparent;
                  border-top:10px solid #ccc;
                  z-index: 2;
              }
          }
      </style>
        • 1. Re: WebViewer Render Fails in WebDirect with Inline-CSS
          TSGal

          chaseholden:

           

          Thank you for your post.

           

          Your example appears to be truncated.  Please post the remainder that follows </style>.

           

          TSGal

          FileMaker, Inc.

          • 2. Re: WebViewer Render Fails in WebDirect with Inline-CSS
            chaseholden

            </head>

            <body>

            <div class=\"caption\">" & DBA_Company & " Proposal: Forever Low Rate Guarantee<sup>&trade;</sup>

            </div>

            <div id=\"table\">

              <div class=\"header-row row\">

                <span class=\"cell primary\">Description</span>

                 <span class=\"cell\">Our Rate</span>

              </div>"

            &

            ¢HTMLPricing ( Fee_Pricing_x ; "Pricing Structure" ; Fee_Pricing ; "text" ) &

            ¢HTMLPricing ( Fee_DR_x ; "Discount Rate" ; Fee_DR ; "%" ) &

            ¢HTMLPricing ( Fee_NQFlat_x ; "Flat/Non-Qualified Rate" ; Fee_NQFlat ; "%" ) &

            ¢HTMLPricing ( Fee_MidQual_x ; "Mid-Qualified Rate" ; Fee_MidQual ; "%" ) &

            ¢HTMLPricing ( Fee_Qual_x ; "Qualified Rate" ; Fee_Qual ;"%" ) &

            ¢HTMLPricing ( Fee_Per_x ; "Per Item" ; Fee_Per ; "$" ) &

            ¢HTMLPricing ( Fee_Debit_x ; "Debit Per Item" ; Fee_Debit ; "$" ) &

            ¢HTMLPricing ( Fee_Auth_x ; "Authorization" ; Fee_Auth ; "$" ) &

            ¢HTMLPricing ( Fee_Cancel_x ; "Cancellation Fee/ETF" ; Fee_Cancel ; "$" ) &

            ¢HTMLPricing ( Fee_CB_x ; "Chargeback" ; Fee_CB ; "$" ) &

            ¢HTMLPricing ( Fee_BH_x ; "Batch Header" ; Fee_BH ; "$" ) &

            ¢HTMLPricing ( Fee_Min_x ; "Minimum Fee" ; Fee_Min ; "$" ) &

            ¢HTMLPricing ( Fee_Annual_x ; "Annual" ; Fee_Annual ; "$" ) &

            ¢HTMLPricing ( Fee_App_x ; "Application" ; Fee_App ; "$" ) &

            ¢HTMLPricing ( Fee_Access_x ; "Access Fee" ; Fee_Access ; "$" ) &

            ¢HTMLPricing ( Fee_ACH_x ; "ACH Rate" ; Fee_ACH ; "%" ) &

            ¢HTMLPricing ( Fee_ACH_Monthly_x ; "ACH Monthly" ; Fee_ACH_Monthly ; "$" ) &

            ¢HTMLPricing ( Fee_ACH_Per_x ; "ACH Per Item" ; Fee_ACH_Per ;  "$" ) &

            ¢HTMLPricing ( Fee_ACH_Return_x ; "ACH Return/NSF" ; Fee_ACH_Return ;"$" ) &

            ¢HTMLPricing ( Fee_Gateway_Annual_x ; "Gateway Annual" ; Fee_Gateway_Annual ; "$" ) &

            ¢HTMLPricing ( Fee_Gateway_Batch_x ; "Gateway Batch" ; Fee_Gateway_Batch ; "$" ) &

            ¢HTMLPricing ( Fee_Gateway_Monthly_x ; "Gateway Monthly" ; Fee_Gateway_Monthly ; "$" ) &

            ¢HTMLPricing ( Fee_Gateway_Per_x ; "Gateway Per Item" ; Fee_Gateway_Per; "$" ) &

            ¢HTMLPricing ( Fee_Gateway_Reject_x ; "Gateway Rejection" ; Fee_Gateway_Reject ; "$" ) &

            ¢HTMLPricing ( Fee_Gateway_Setup_x ; "Gateway Setup" ; Fee_Gateway_Setup ; "$" ) &

            ¢HTMLPricing ( Fee_IRS_x ; "IRS Reporting" ; Fee_IRS ; "$" ) &

            ¢HTMLPricing ( Fee_PCI_Annual_x ; "PCI Annual" ; Fee_PCI_Annual ; "$" ) &

            ¢HTMLPricing ( Fee_PCI_Mo_x ; "PCI Monthly" ; Fee_PCI_Mo; "$" ) &

            ¢HTMLPricing ( Fee_PCI_Qtr_x ; "PCI Quarterly" ; Fee_PCI_Qtr ; "$" ) &

            ¢HTMLPricing ( Fee_Retrieval_x ; "Retrieval Fee" ; Fee_Retrieval ; "$" ) &

            ¢HTMLPricing ( Fee_Reserve_x ; "Reserve Total" ; Fee_Reserve ; "$" ) &

            ¢HTMLPricing ( Fee_Reserve_Rate_x ; "Reserve Rate" ; Fee_Reserve_Rate ; "%" ) &

            ¢HTMLPricing ( Fee_Reserve_Terms_x ; "Reserve Terms" ; Fee_Reserve_Terms ; "text" ) &

            ¢HTMLPricing ( Fee_Risk_MVCap_x ; "Reserve Monthly Cap" ; Fee_Risk_MVCap ; "$" ) &

            ¢HTMLPricing ( Fee_Statement_x ; "Statement Fee" ; Fee_Statement ; "$" ) &

            ¢HTMLPricing ( Fee_ARU_x ; "ARU Fee" ; Fee_ARU ; "$" ) &

            ¢HTMLPricing ( Fee_Voice_x ; "Voice Authorization" ; Fee_Voice ;"$" ) &

            ¢HTMLPricing ( Fee_Simulator_x ; "<b>Total Projected Fees on $" & (Fee_Vol_Estim)/1000 & "K Volume" ; Int(Fee_Simulator_1) & "</b>" ;"$" ) &

            "</DIV>

            </BODY></HTML>"

             

            This uses a Custom Function which is defined as follows:

             

            ¢HTMLPricing (toggleField, label, fieldOurRate, kind)

             

            /* kind = dollar, percent, text, number */

            Let ([

            £Kind = Lower (kind);

            £OurRate = Case (

            IsEmpty(fieldOurRate) ; "&mdash;";

            fieldOurRate = "0"; "0";

            £Kind = "$" and fieldOurRate< 1; fieldOurRate*100 & "¢";

            £Kind = "$"; "$ " & fieldOurRate;

            £Kind = "%" and fieldOurRate< .01; "0" & (fieldOurRate * 100) & "%";

            £Kind = "%"; (fieldOurRate * 100) & "%";

            fieldOurRate);

            $HMTL = "

            <div class=\"row\">

                <input type=\"radio\" name=\"expand\">

                <span class=\"cell primary\" data-label=\"Description\">*LABEL*</span>

                <span class=\"cell\" data-label=\"Our Rate\">*OURRATE*</span></div>"];

            Case (toggleField = 1;

            Substitute ($HMTL;

            ["*LABEL*"; label];

            ["*OURRATE*"; £OurRate]);

            ))

            • 3. Re: WebViewer Render Fails in WebDirect with Inline-CSS
              TSGal

              chaseholden:

               

              Thank you for the remainder of the code.  Now that I see there are many fields and a custom function involved, rather than create a file with the fields and custom function, it would be best if you send in a clone of the file with some sample data so I can test it here.  I have sent you a private message with instructions where to send the file.

               

              TSGal

              FileMaker, Inc.