Visual Bug with certain Themes (bootstrap3)

[Appercy]

Certain Themes/Templates like the bootstrap3 Template are having an issue where over the whole text editor with this plugin enabled is a button?

im Not sure how to explain it properly, but ive managed to find the code thats causing this isssue, removing this line fixes the issue but im Not sure if that is intended/ can cause other issues. the line in Question is /action/editor.php line 23.

any idea why this is the Case and better fix it?

[jdehaan]

Bootstrap is a catastrophe because it comes with a very opinionated way of styling things and barely a way to escape from it. Internally is makes intensive use of !important styles. I cannot afford the time to workaround the bad design of bootstrap if there is a lot of work to do. Don't get me wrong bootstrap by itself is fine but then you need to stick to it and everything else to conform otherwise you're damned.

Speaking for us we decided to remove it from every project needing flexibility. This being said there might be a way to adjust the styles in some ways and I am willing also to merge PR-s that alleviate some compatibility issues with bootstrap if that doesn't cause excessive noise in the plugin code base. But unfortunately you would be on your own for that at the moment.

Maybe a good starter is this link: https://getbootstrap.com/docs/5.0/utilities/api/#importance and see with the inspector (built in the browser) and see if you can tune the css to make things appear as you want. The styles applied by this plugin would have to get integrated inside the code.

But what worries me a bit is your statement that removing a line of code in php seems to solve the issue. The line in question runs code that removes an node with id "edbtn__preview" from the DOM. It could be that a style has also this id?

I will also give it a try and see if I can discover more and maybe arrange my code to have more specific styles. CSS by essence is something global in the browser page, there will always be some risk that things go wrong. For instance as said this "!important" directive pins styles to a specific value and are not overridable. But making things specific makes some things win over others.

I hope that already helps. Just bare with some patience as I will be really busy next two weeks. But if a one line removal solves your issue it sounds like there is light for an easy solution (without 100% confidence)

[jdehaan]

I tested with latest dokuwiki release, lastest bootstrap3 theme and latest plugin code:

In the editor I cannot see any issue. Can you please be more precise on what is going wrong (make a screenshot) and tell me more about your environment: dokuwiki version, plugins used?

[Appercy]

Hello! Firstly thank you for the fast reply,

i can see how Bootstrap can be frustrating to use/implement and i understand this.

To further see the issue i have now provided some Screenshots, i used a clear Dokuwiki with the Bootstrap3 Template im not sure why this error appears on my end,

I am not at home right now and wanted to just give you a thank you and some more information regarding this issue. ill get Back to you when i tested everything (1-2 days)

The Plugin Works flawlessly except this style error >~>

With bpmnio

Without bpmnio

[jdehaan]

Interesting is also in your end some styles makes the text appear uppercase and not on my box. I had another ticket with discrepancies between what I see when I try to reproduce and the other person sees... This is a bit annoying. That should not be with web technologies since browsers SHOULD abstract everything in the same way across operating systems a.s.o... I am confident we'll find a way to analyze and find a solution for your problem too.

[Appercy]

Heyo! just a question regarding this issue, why are you removing the preview button anyways? i couldnt find any reason for it it works :o

because as soon as i Remove the preview button it gives the inputfield the Button Class thats whats happening, havent found a good way around it except leaving the preview button

[jdehaan]

I removed the preview button because the bpmnio is a wysiwyg editor, there is no use for the preview and it is broken. It does not show the result properly. So for me the easiest was to remove it in order for users to not face the misbehavior.

[jdehaan]

But thanks for this hint it will likely be a key point for fixing the problem you have.

I made an experiment to detect the changes between the state with the preview button (before.html) and withour (after.html). I just commented out the code between both states:

        $previewButtonPosition = $form->findPositionByAttribute('id', 'edbtn__preview');
        if ($previewButtonPosition !== false) {
            $form->removeElement($previewButtonPosition);
        }

In my case it does not lead to a broken UI. But there must be something else in the system influencing the outcome.

$ diff -u before.html before2.html

--- before.html 2025-05-07 21:35:00.428356395 +0200
+++ after.html        2025-05-07 21:36:02.542260818 +0200
@@ -57,12 +57,12 @@
   />
   <link
     rel="stylesheet"
-    href="/lib/exe/css.php?t=bootstrap3&amp;tseed=132f3085aa11cea38b56fba677bf51de"
+    href="/lib/exe/css.php?t=bootstrap3&amp;tseed=0c86f85b7568e65d8b14bac4053f8342"
   />
   <!--[if gte IE 9]><!-->
   <script>
     /*<![CDATA[*/ var NS = "write";
-    var SIG = " --- \/\/[[admin@example.org|Admin]] 2025\/05\/07 21:33\/\/";
+    var SIG = " --- \/\/[[admin@example.org|Admin]] 2025\/05\/07 21:35\/\/";
     var JSINFO = {
       bootstrap3: {
         mode: "edit",
@@ -98,7 +98,7 @@
     /*!]]>*/
   </script>
   <script
-    src="/lib/exe/js.php?t=bootstrap3&amp;tseed=132f3085aa11cea38b56fba677bf51de"
+    src="/lib/exe/js.php?t=bootstrap3&amp;tseed=0c86f85b7568e65d8b14bac4053f8342"
     defer="defer"
   >
     /*<![CDATA[*/
@@ -1231,37 +1231,6 @@
                               ></path></svg
                             >Speichern</button
                           ><button
-                            name="do[preview]"
-                            value="1"
-                            type="submit"
-                            accesskey="p"
-                            tabindex="5"
-                            id="edbtn__preview"
-                            class="btn btn-default mr-2 btn btn-default mr-2 btn btn-default"
-                            data-dw-icon="mdi:file-document-outline"
-                          >
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              xmlns:xlink="http://www.w3.org/1999/xlink"
-                              aria-hidden="true"
-                              focusable="false"
-                              width="1em"
-                              height="1em"
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 24 24"
-                              class="iconify mr-1"
-                              data-icon="mdi:file-document-outline"
-                              style="
-                                vertical-align: -0.125em;
-                                transform: rotate(360deg);
-                              "
-                            >
-                              <path
-                                d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6H6m0 2h7v5h5v11H6V4m2 8v2h8v-2H8m0 4v2h5v-2H8z"
-                                fill="currentColor"
-                              ></path></svg
-                            >Vorschau</button
-                          ><button
                             name="do[cancel]"
                             value="1"
                             type="submit"
@@ -1599,7 +1568,7 @@
     </div>
 
     <img
-      src="/lib/exe/taskrunner.php?id=write%3Astart2&amp;1746646399"
+      src="/lib/exe/taskrunner.php?id=write%3Astart2&amp;1746646528"
       width="2"
       height="1"
       alt=""

I'm a bit desperate currently and I could live with keeping the preview maybe I will just bring the button back again although this is dissatisfying to not know what is the cause of the trouble,,,

[jdehaan]

On my end the class btn is never applied to the text area but if I do apply it manually inside the inspector I can start to get closer to what you experience. Therefore I suspect something is changing the class in a bad manner on your side for an unknown reason...

[jdehaan]

I finally found a very likely reason of things that went wrong in exactly the described way here:

giterlizzi/dokuwiki-template-bootstrap3#611

The code reacts differently and gently on a missing preview button and formerly did not by adding the bad styles: see this diff giterlizzi/dokuwiki-template-bootstrap3@3c3e8e6

I believe that updating the bootstrap3 template should make things fit on your side. Can you confirm?

(I thus flagged the ticket as wontfix because the bug is not inside this code but inside the used theme code)