CSS compatibilty problem

Hello, this is a problem that I found in both: Grav and Bludit.

The code that includes HTML, CSS and JS in one piece of code works well in web pages as well as other CMSs (and in CodePen)
However, here, it doesn`t work as intended.

Bludit wasnt able to fix it. I hope theres a fix here.

Let`s take this code as example:

It should return the same shape as in codepen`s output, instead of being garbled.

@ashraf, I’m afraid I do not quite understand the question. Please clarify…

  • Please use the lingua franca of the internet in your sample: English…
  • Explain what doesn’t work
  • Explain how it should work
  • Explain what the role of Grav is in pure html/js/css?
    Can you create a minimal and reproducible case using Grav?
  • If you think you have found a bug in Grav, please open an issue on the repo of Grav
1 Like

I am not sure if this is a bug in Grav.
I want to add the code above (of CodePen) in a grave page… I use “source code” button provided by TinyMCE.
The problem is that the view is garbled in Grav, while is nice in CodePen.

To reproduce the problem, just add the above-mentioned code in a Grav standard page.

If there is another way to add custom HTML blocks kindly tell me and I will give it a try.

This thread solved my problem.

Grav does not support this feature.

You are jumping into conclusion due to some limited knowledge of Grav… It can be done.

Two things we need to take care of:

  • TinyMCE does not allow javascript out-of-the-box.
    Two options:
    • Update the tinymce-editor plugin to accept javascript tags like onmousehover.
    • You also might consider removing the hardcoded onmousehover from the button and add it using javascripts addEventListener.
  • Separation of concerns.
    • The content of a page (the markdown) should not contain stylesheets and javascript.
      (The processing of markdown into HTML can also lead to issues with embedded stylesheets and javascript.)
    • Injecting stylesheets and javascript into HTML is the territory of Twig.

Steps to solve the problem:

  • Add the following line to user/plugins/tinymce-editor/templates/forms/fields/tinymce/tinymce.html.twig at line 23:
      extended_valid_elements: "button[onmouseover]",
  • Add the following to user/themes/quark/templates/default.html.twig:
    {% block stylesheets %}
      {{ parent() }}
      {% do assets.addInlineCss(
          * {box-sizing: border-box}
          body {font-family: "Lato", sans-serif;}
          /* Style the tab */
          .tab {
          float: right;
          border: 1px solid #ccc;
          background-color: #f1f1f1;
          width: 30%;
          height: 300px;
          letter-spacing: 0;
          /* Style the buttons inside the tab */
          .tab button {
          display: block;
          background-color: inherit;
          color: black;
          padding: 22px 16px;
          width: 100%;
          border: none;
          outline: none;
          text-align: right;
          cursor: pointer;
          font-size: 17px;
          letter-spacing: 0;
          /* Change background color of buttons on hover */
          .tab button:hover {
          background-color: #ddd;
          /* Create an active/current "tab button" class */
          .tab button.active {
          background-color: #ccc;
          /* Style the tab content */
          .tabcontent {
          float: left;
          padding: 0px 12px;
          border: 1px solid #ccc;
          width: 70%;
          border-left: none;
          height: 300px;
          display: none;
          /* Clear floats after the tab */
          .clearfix::after {
          content: "";
          clear: both;
          display: table;
      {% endblock %}
      {% block javascripts %}
        {{ parent() }}
        {% do assets.addInlineJs(
            function openService(evt, serviceName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            document.getElementById(serviceName).style.display = "block";
            evt.currentTarget.className += " active";
        ) %}
    {% endblock %}
  • Add the following in the page using tinymce editor using the menu tools/source code:
    <div dir="RTL">
    <div class="clearfix">&nbsp;</div>
    <p>نفخر بأن نقدم لكم سلسلة من خدماتنا كما يلي أدناه:</p>
    <div dir="RTL">
    <div class="tab"><button onmouseover="openService(event, 'الترجمة')">الترجمة</button> <button onmouseover="openService(event, 'الدورات')">الدورات</button> <button onmouseover="openService(event, 'الخدمات البحثية')">الخدمات البحثية</button></div>
    <div id="الترجمة" class="tabcontent">
    <h3>خدمات الترجمة</h3>
    <p>نقدم خدمات الترجمة للغات التالية: العربية، اليابانية، الانجليزية، الكورية.</p>
    <div id="الدورات" class="tabcontent">
    <h3>الدورات التدريبية</h3>
    <p>يسرنا تقديم دورات تدريبية متنوعة فى مجالات متعددة وفى مقرنا أو علي منصتنا التعليمية أو وفق النظام الهجين (المقر+ المنصة)</p>
    <div id="الخدمات البحثية" class="tabcontent">
    <h3>خدمات متنوعة للباحثين</h3>
    <p>.نقدم للباحثين خدمات متنوعة كما يلي أدناه وفيما لا يتعارض مع القوانين واللوائح</p>
    <div class="clearfix">&nbsp;</div>

The result will be:


  • Above setup is using Quark theme and plugin tinymce-editor. You might need to adopt to your own theme.
  • The css/js will be injected in every page using default.md. You might not want that, in which case you can define your own template.
  • It might be wiser to use a child theme and override the templates of the parent theme and of plugin tinemce-editor.