Search…

X3 Photo Gallery Support Forums

Search…
 
Armitage2k
Topic Author
Posts: 3
Joined: 24 Aug 2021, 09:31

html header on top of files editor - css issues

24 Aug 2021, 22:05

Hi,
I am running a bootstrap 3 website and am looking to implement the files explorer. To match the browser with the overall website design, I added a navbar and it's CSS to the files.php file, but as a side effect have the issue where my navbar overlaps with the file browsers navbar, essentially covering the search field, buttons, etc.

iframe is not a good solution for me since I am getting a bug when previewing an image, and the user scrolls (due to the iframe being too high/short), the lightbox image closes itself.

This very much looks like a CSS issue, not sure how to best approach this? Also, there is supposed to be a custom CSS file somewhere in the _files folder, which I also cannot find? Where would that one be?

Thanks
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: html header on top of files editor - css issues

24 Aug 2021, 23:38

Hi!
Armitage2k wrote:I am running a bootstrap 3 website and am looking to implement the files explorer. To match the browser with the overall website design, I added a navbar and it's CSS to the files.php file, but as a side effect have the issue where my navbar overlaps with the file browsers navbar, essentially covering the search field, buttons, etc.
For starters, I would need to see a link to be able to diagnose any customization like this. Files app is an advanced single-page app, amongst other things using javascript+CSS "sticky" to show/hide the navbar on scroll. You can't just add custom elements and hope that it works, but I can always take a look ...

On a side note, I did already create a separate app call EMBED, meant specifically for embedding galleries of files (similar to Files app) into any website.
https://embed.photo.gallery/

No it doesn't have all the same features as Files app, at least not yet, but it is designed specifically to be embedded directly into any website. Files app no, you can't just add html elements and expect it to work.
Armitage2k wrote:iframe is not a good solution for me since I am getting a bug when previewing an image, and the user scrolls (due to the iframe being too high/short), the lightbox image closes itself.
I understand that of course, since iframe is a very cheap solution. Another reason why we created Embed app.
Armitage2k wrote:This very much looks like a CSS issue, not sure how to best approach this?
Well, yes it's a CSS/javascript issue naturally, but Files isn't just a simple html "website" where everything gets pushed down if you add custom elements. For intance (just to mention some things from the top of my head), topbar uses "sticky" to attach to top of screen, and the sidebar menu uses flexbox and overflow to allow scrolling when the items in menu expand beyond viewport height (this, the height of the sidebar needs to take your custom element into consideration). If you have a link, I will take a look, but at best we can get it working with a "hack".
Armitage2k wrote:Also, there is supposed to be a custom CSS file somewhere in the _files folder, which I also cannot find? Where would that one be?
No, CSS files will get loaded into Files app IF they exist. We don't add empty custom CSS files by default. If you want to add a custom CSS files that loads into Files app, create a file in path _files/css/custom.css. You can call it whatever you want, but it needs to be in path _files/custom/*.

New big Files update coming soon!
 
Armitage2k
Topic Author
Posts: 3
Joined: 24 Aug 2021, 09:31

Re: html header on top of files editor - css issues

25 Aug 2021, 02:31

Hi Mjau-Mjau (now thats a sentence I did not think I'd ever write... :D ),

thank you for your kind reply.
I did look at Embed already, but since I need to display both images and various other documents, Files simply better fits my need at this time.

Yes, CSS / JS seems to be culprit here since I am indeed using navbar-sticky to have the bar remain on top. I put together a sample link for you below, please note the following:

- after the page load, please wait 3 seconds and then press ESC on your keyboard to close the popup modal. Due to CSS / z-index issues, the modal is not actually visible, but you still need to "close" it by pressing ESC otherwise you cannot scroll the content.
- the top navbar is 50px in height and due to it having a higher z-index than your topbar, it covers it up to point where the topbar, icons and first folder in the sidebar are not visible anymore
- I am currently loading CSS from 3 different files (bootstrap.min.css / theme.css / custom.css), which  may cause certain interference, but I am in the process of picking out the required elements and place everything into a single CSS file. Not sure if this will fix anything, but I am giving it a go.

Sample: <removed>

I think a hack is probably the way to go, this little issue is the only thing keeping me from buying that license and doing my share to make you a millionaire ;)

Thanks!
Last edited by Armitage2k on 25 Aug 2021, 04:09, edited 1 time in total.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: html header on top of files editor - css issues

25 Aug 2021, 03:38

Armitage2k wrote:I did look at Embed already, but since I need to display both images and various other documents, Files simply better fits my need at this time.
Sure, but just for reference, Embed app also supports all file types, I just don't have that in any examples. The main difference is that Embed app is "headless" and doesn't include the sidebar menu or various buttons in the topbar.
Armitage2k wrote:- the top navbar is 50px in height and due to it having a higher z-index than your topbar, it covers it up to point where the topbar, icons and first folder in the sidebar are not visible anymore
I think 100px? It's 100px here at least. You have set your custom header to position fixed, and that means it will live its own life floating above Files app elements.

The obvious solution would be to try and "push" everything down 100px. Try this in your custom CSS file:
Code
#sidebar {
  top: 100px;
  height: calc(100% - 100px);
}
#main {
  top: 100px;
  position: relative;
}
.topbar-sticky {
  top: 100px;
}
Seems to work fine here, although I can't be sure 100% sure about side effects.
Image
Armitage2k wrote:- I am currently loading CSS from 3 different files (bootstrap.min.css / theme.css / custom.css), which  may cause certain interference, but I am in the process of picking out the required elements and place everything into a single CSS file. Not sure if this will fix anything, but I am giving it a go.
Yes they are definitely affecting the design, as you can see in the screenshot, affecting buttons, fonts and correct alignment of items (topbar vs sidebar). It won't break anything, but the less custom CSS, the better of course.
 
Armitage2k
Topic Author
Posts: 3
Joined: 24 Aug 2021, 09:31

Re: html header on top of files editor - css issues

25 Aug 2021, 04:09

#sidebar {
  top: 100px;
  height: calc(100% - 100px);
}
#main {
  top: 100px;
  position: relative;
}
.topbar-sticky {
  top: 100px;
}
Fantastic, thank you very much, this did the trick already.

Files is exactly what I need and with this sorted out, I will get busy with the implementation. You will have my money soon ;)

Thank you very much!