4 Replies Latest reply on Apr 26, 2021 12:37 AM by Stefan Reinhardt

    Editable Previews - Style Sheet Issue

    Sascha Reppel New Member

      We are trying to format an editable preview template and while the layout looks great when using the prepared stylesheets the preview will not have any styles anymore as soon as we add a editable field.

       

      We found the root cause. The header seems to be replaced removing our style section. Does anybody have an idea how to ensure this is not happening?

       

      BEFORE:

       

      <html>

      <head>

      <style>

      table {

      width:600px;

          height:25px;

          border:0px;

          text-align:left;

      }

      th.DummyLine {

          height:20px;

          font-size:11px;

          border:0px;

      }

      th.DocHeader {

          height:30px;

          font-size:20px;

          color:#000000;

          border:0px;

          text-align:left;

      }

      </Style>

       

       

      After adding an editable preview field

       

      <html>

      <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=10;chrome=1">

        <style type="text/css">html, body {height:100%;margin:0;}</style>

        <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/pim/VAADIN/themes/customtheme/favicon.ico">

        <link rel="icon" type="image/vnd.microsoft.icon" href="/pim/VAADIN/themes/customtheme/favicon.ico">

        <script type="text/javascript" src="/pim/jquery/jstz-1.0.4.min.js"></script>

        <script type="text/javascript" src="/pim/jquery/jstz-wrapper.js"></script>

        <link rel="stylesheet" type="text/css" href="/pim/charts/css/nv.d3.css">

        <script type="text/javascript" src="/pim/infostatic/browserinfo.js"></script>

        <script type="text/javascript" src="/pim/charts/js/d3.v3.min.js"></script>

        <script type="text/javascript" src="/pim/charts/js/nv.d3.min.js"></script>

        <script type="text/javascript" src="/pim/charts/js/utils.js"></script>

        <script type="text/javascript" src="/pim/charts/js/tooltip.js"></script>

        <script type="text/javascript" src="/pim/charts/models/axis.js"></script>

        <script type="text/javascript" src="/pim/charts/models/discreteBar.js"></script>

        <script type="text/javascript" src="/pim/charts/models/discreteBarChart.js"></script>

        <script type="text/javascript" src="/pim/charts/models/multiBarHorizontal.js"></script>

        <script type="text/javascript" src="/pim/charts/models/multiBarHorizontalChart.js"></script>

        <script type="text/javascript" src="/pim/charts/models/pie.js"></script>

        <script type="text/javascript" src="/pim/charts/models/pieChart.js"></script>

        <script type="text/javascript" src="/pim/charts/models/legend.js"></script>

        <script type="text/javascript" src="/pim/charts/js/hpmw-hbar.js"></script>

        <script type="text/javascript" src="/pim/charts/js/hpmw-donut.js"></script>

        <script type="text/javascript" src="/pim/charts/js/hpmw-vbar.js"></script>

        <script type="text/javascript" src="/pim/yfiles/lang.js"></script>

        <script type="text/javascript" src="/pim/yfiles/yfiles-merged.js"></script>

      </head>