Thumbnail behavior

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
benschatz
Propeller Head
Posts: 12
Joined: Wed Jun 13, 2018 12:27 am

Thumbnail behavior

Post by benschatz »

Hi all,
I've created a Help system in Flare 2018. The output is an HTML5 side navigation skin.
The Help contains multiple screenshots, so to avoid scrolling and to make it look a little sexier, I'm using thumbnails for the images.
The result looks really good, just what I need, but when the reader clicks a thumbnail the expanded image sometimes 'hides' behind the header bar, so the reader can't see the top part of the image.
is there a way to either:
a. Limit the image size so its top edge reaches the bottom of the header bar, or
b. Have the image appear in front of the header bar (as it appears in front of the TOC) and not behind it?
I tried playing with the Img properties in the CSS (like changing the z-index), but they affect only the thumbnail, not the expanded image.
Thanks,
Ben
benschatz
Propeller Head
Posts: 12
Joined: Wed Jun 13, 2018 12:27 am

Re: Thumbnail behavior

Post by benschatz »

Hi all,
I found the answer, quite by accident:
In the skin editor, in the Setup tab, change the Fixed Header dropdown from 'All' to 'Web'.
That's it! Works like a charm.
Ben
rogersm
Propeller Head
Posts: 97
Joined: Fri Nov 07, 2014 4:29 am

Re: Thumbnail behavior

Post by rogersm »

Hi there,

I had issues with cross-references to bookmarks when fixed header was set to Web. Madcap support offered the following solution:

1. Set Fixed Header to All
2. Open the css in a text editor
3. Scroll to the bottom and paste the following:

.MCPopupContainer
{
z-index: 1001;
}
atomdocs
Sr. Propeller Head
Posts: 308
Joined: Tue Jun 18, 2013 3:00 am
Location: Eastern Seaboard, Thailand
Contact:

Re: Thumbnail behavior

Post by atomdocs »

MadCap Support has accepted this as a bug (#141786). There is an associated bug that hides bookmark link targets under the header (#141799). The MadCap workaround for that is:

/*Workaround for the issue where bookmark link targets scroll behind web fixed header*/
h1, h2, h3, h4
{
padding-top: 5em;
margin-top: -5em;
}
Tom
Flare 2022, Capture 7
Image
Post Reply