Space above header bar #5005

Closed
opened 2026-02-05 09:32:49 +03:00 by OVERLORD · 10 comments
Owner

Originally created by @bfruben on GitHub (Oct 15, 2024).

Describe the Bug

When making my own theme and changing some phrases I ended up with extra space above the titlebar.
image

This space only appears when I change copy and change the entities.php in the themes folder.

Steps to Reproduce

  1. Make your own theme
  2. Copy the entities.php from */lang/sv to */themes/theme_name/lang/sv
  3. Change the entities.php file
  4. Reload Bookstack with the custom theme

Note: When copying entities.php to the themes folder and not changing it, the extra space does not appear.

Expected Behaviour

No extra space above the titlebar

Screenshots or Additional Context

No response

Browser Details

Edge

Exact BookStack Version

BookStack v24.05.4

Originally created by @bfruben on GitHub (Oct 15, 2024). ### Describe the Bug When making my own theme and changing some phrases I ended up with extra space above the titlebar. ![image](https://github.com/user-attachments/assets/212c193f-3fe0-40ae-8935-8cad1f83165e) This space only appears when I change copy and change the entities.php in the themes folder. ### Steps to Reproduce 1. Make your own theme 2. Copy the entities.php from */lang/sv to */themes/theme_name/lang/sv 3. Change the entities.php file 4. Reload Bookstack with the custom theme Note: When copying entities.php to the themes folder and not changing it, the extra space does not appear. ### Expected Behaviour No extra space above the titlebar ### Screenshots or Additional Context _No response_ ### Browser Details Edge ### Exact BookStack Version BookStack v24.05.4
OVERLORD added the 🐛 Bug label 2026-02-05 09:32:49 +03:00
Author
Owner

@ssddanbrown commented on GitHub (Oct 15, 2024):

Note: When copying entities.php to the themes folder and not changing it, the extra space does not appear.

  • What exactly are you changing which makes the space appear?
  • Are there any other files within your theme folder?

Just a note, you don't need to copy in the while file if you don't need to alter most translations, you can just add/override the translations as needed.

@ssddanbrown commented on GitHub (Oct 15, 2024): > Note: When copying entities.php to the themes folder and not changing it, the extra space does not appear. - What exactly are you changing which makes the space appear? - Are there any other files within your theme folder? Just a note, you don't need to copy in the while file if you don't need to alter most translations, you can just add/override the translations as needed.
Author
Owner

@bfruben commented on GitHub (Oct 15, 2024):

Note: When copying entities.php to the themes folder and not changing it, the extra space does not appear.

  • What exactly are you changing which makes the space appear?
  • Are there any other files within your theme folder?

Just a note, you don't need to copy in the while file if you don't need to alter most translations, you can just add/override the translations as needed.

  • Any change I make the space appears.
  • These are the only files I have in the themes folder right now:
    image

Thanks for the tip! I was removing everything that I didn't want to change. That's how I discovered this "bug". ;)

@bfruben commented on GitHub (Oct 15, 2024): > > Note: When copying entities.php to the themes folder and not changing it, the extra space does not appear. > > * What exactly are you changing which makes the space appear? > * Are there any other files within your theme folder? > > Just a note, you don't need to copy in the while file if you don't need to alter most translations, you can just add/override the translations as needed. - Any change I make the space appears. - These are the only files I have in the themes folder right now: ![image](https://github.com/user-attachments/assets/1a267553-2336-4ab2-9627-4b0191f57355) Thanks for the tip! I was removing everything that I didn't want to change. That's how I discovered this "bug". ;)
Author
Owner

@ssddanbrown commented on GitHub (Oct 15, 2024):

Thanks the the response @bfruben, I can't reproduce this, nor does it make sense really.
I can only think the structure of the file is being modified in some way, casing stray text to be emitted at the start of the page/document.

With just one language override file active:

  • Does the file still have just one <?php at the very very start of the file?
  • Does the text ?> exist in the file at all?
  • Is there any text in the top left corner within that added space (Try highlighting that area if you can't see any)?
@ssddanbrown commented on GitHub (Oct 15, 2024): Thanks the the response @bfruben, I can't reproduce this, nor does it make sense really. I can only think the structure of the file is being modified in some way, casing stray text to be emitted at the start of the page/document. With just one language override file active: - Does the file still have just one `<?php` **_at the very very start_** of the file? - Does the text `?>` exist in the file at all? - Is there any text in the top left corner within that added space (Try highlighting that area if you can't see any)?
Author
Owner

@bfruben commented on GitHub (Oct 16, 2024):

Does the file still have just one <?php at the very very start of the file?

Yes

Does the text ?> exist in the file at all?

No

Is there any text in the top left corner within that added space (Try highlighting that area if you can't see any)?

There is now visible text on the page but there is in the html, see picture:
image

@bfruben commented on GitHub (Oct 16, 2024): > Does the file still have just one <?php at the very very start of the file? Yes > Does the text ?> exist in the file at all? No > Is there any text in the top left corner within that added space (Try highlighting that area if you can't see any)? There is now visible text on the page but there is in the html, see picture: ![image](https://github.com/user-attachments/assets/25c34545-b285-4f61-9a1d-dd2b87f1d865)
Author
Owner

@ssddanbrown commented on GitHub (Oct 16, 2024):

@bfruben Yeah, that could cause space. The structure of the HTML in that screenshot also looks broken as I wouldn't expect those meta elements to be in that location reletive to the shortcut data.

  • Have you got anything in the "Custom HTML Head Content" customization setting within the app?
  • Does this space remain when viewing the customization settings page in the app?
@ssddanbrown commented on GitHub (Oct 16, 2024): @bfruben Yeah, that could cause space. The structure of the HTML in that screenshot also looks broken as I wouldn't expect those meta elements to be in that location reletive to the shortcut data. - Have you got anything in the "Custom HTML Head Content" customization setting within the app? - Does this space remain when viewing the customization settings page in the app?
Author
Owner

@bfruben commented on GitHub (Oct 17, 2024):

Have you got anything in the "Custom HTML Head Content" customization setting within the app?

Not anymore.

Does this space remain when viewing the customization settings page in the app?

No, it only shows on the books and shelves pages.

@bfruben commented on GitHub (Oct 17, 2024): > Have you got anything in the "Custom HTML Head Content" customization setting within the app? Not anymore. > Does this space remain when viewing the customization settings page in the app? No, it only shows on the books and shelves pages.
Author
Owner

@BFjimmy commented on GitHub (Nov 25, 2024):

This code fixes the problem:

(function () {
    const bom = '\uFEFF'; // Byte Order Mark (BOM)
    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, {
        acceptNode: (node) => (node.nodeValue.includes(bom) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT),
    });

    let count = 0; // Count of BOMs removed
    while (walker.nextNode()) {
        const node = walker.currentNode;
        const before = node.nodeValue;
        node.nodeValue = node.nodeValue.replace(new RegExp(bom, 'g'), '');
        count += (before.length - node.nodeValue.length) / bom.length;
    }

    console.log(`Removed ${count} BOM instance(s) from the DOM.`);
})();

Is there a way to add JavaScript snippets that is automatically loaded on page load?

Here's a quick test code. Creating a link with the code:

javascript:(function(){const bom='\uFEFF';const walker=document.createTreeWalker(document.body,NodeFilter.SHOW_TEXT,{acceptNode:(node)=>node.nodeValue.includes(bom)?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_REJECT});let count=0;while(walker.nextNode()){const node=walker.currentNode;const before=node.nodeValue;node.nodeValue=node.nodeValue.replace(new RegExp(bom,'g'),'');count+=(before.length-node.nodeValue.length)/bom.length;}console.log(`Removed ${count} BOM instance(s) from the DOM.`);})();

2024-11-25 10 06 56

@BFjimmy commented on GitHub (Nov 25, 2024): This code fixes the problem: ``` (function () { const bom = '\uFEFF'; // Byte Order Mark (BOM) const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, { acceptNode: (node) => (node.nodeValue.includes(bom) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT), }); let count = 0; // Count of BOMs removed while (walker.nextNode()) { const node = walker.currentNode; const before = node.nodeValue; node.nodeValue = node.nodeValue.replace(new RegExp(bom, 'g'), ''); count += (before.length - node.nodeValue.length) / bom.length; } console.log(`Removed ${count} BOM instance(s) from the DOM.`); })(); ``` Is there a way to add JavaScript snippets that is automatically loaded on page load? Here's a quick test code. Creating a link with the code: ``` javascript:(function(){const bom='\uFEFF';const walker=document.createTreeWalker(document.body,NodeFilter.SHOW_TEXT,{acceptNode:(node)=>node.nodeValue.includes(bom)?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_REJECT});let count=0;while(walker.nextNode()){const node=walker.currentNode;const before=node.nodeValue;node.nodeValue=node.nodeValue.replace(new RegExp(bom,'g'),'');count+=(before.length-node.nodeValue.length)/bom.length;}console.log(`Removed ${count} BOM instance(s) from the DOM.`);})(); ``` ![2024-11-25 10 06 56](https://github.com/user-attachments/assets/83060501-d641-42b7-98aa-bb50c5d548c2)
Author
Owner

@ssddanbrown commented on GitHub (Nov 25, 2024):

Is there a way to add JavaScript snippets that is automatically loaded on page load?

@bfruben You could add them in a module script, via the "Custom HTML Head Content" customization setting.
EG:

<script type="module">
// Code here
</script>

But a script to search and replace text of all text nodes is doing quite a lot on load, and it'd be better to address the actual issue.

It would be useful if a ZIP of a theme folder, which replicates this issue, could be shared so I can replicate and dig into this myself.

@ssddanbrown commented on GitHub (Nov 25, 2024): > Is there a way to add JavaScript snippets that is automatically loaded on page load? @bfruben You could add them in a module script, via the "Custom HTML Head Content" customization setting. EG: ```html <script type="module"> // Code here </script> ``` But a script to search and replace text of all text nodes is doing quite a lot on load, and it'd be better to address the actual issue. It would be useful if a ZIP of a theme folder, which replicates this issue, could be shared so I can replicate and dig into this myself.
Author
Owner

@BFjimmy commented on GitHub (Nov 25, 2024):

Yes, it's just a quick-and-dirty fix until we got the issue really fixed :)

@BFjimmy commented on GitHub (Nov 25, 2024): Yes, it's just a quick-and-dirty fix until we got the issue really fixed :)
Author
Owner

@ssddanbrown commented on GitHub (Feb 25, 2025):

Since no content has been provided to reproduce this I'll go ahead and close this off since there's nothing further I can look into on my side.

@ssddanbrown commented on GitHub (Feb 25, 2025): Since no content has been provided to reproduce this I'll go ahead and close this off since there's nothing further I can look into on my side.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/BookStack#5005