chaseholden

WebViewer Render Fails in WebDirect with Inline-CSS

Discussion created by chaseholden on Jun 15, 2017
Latest reply on Jun 19, 2017 by TSGal

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>

Outcomes