Note divs and side menus in HTML5 top navigation output

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
TheGreatAndPowerfulOz
Sr. Propeller Head
Posts: 130
Joined: Mon Apr 24, 2006 12:52 pm
Location: Glen Mills, PA

Note divs and side menus in HTML5 top navigation output

Post by TheGreatAndPowerfulOz »

Hello, all.

I've recently begun using HTML5 top navigation output for one of my Flare projects, and I noticed a curious issue with the way "note" divs (don't) wrap around the side menu. I'm using one of the out-of-the box templates from MadCap, so it just looks like an oversight in design.

Here's an example of what I'm talking about (I set the color of the side menu to "ugly blue" for the sake of contrast with the "note" div):
DivOverlap.png
Notice how the side menu overlaps the "note" div element, rather than the div width adjusting to be narrower (similar to how inline text automatically wraps around the menu). I'm wondering if anyone else has seen this issue and figured out a good way around it...

One method I tried is to add "display: inline-block" to the "div.note" rule set in the main style sheet. This doesn't have the truly desired effect (making the div auto-adjust its width to accommodate the side menu), but it at least ensures that the full-width div is always beneath the side menu and not obstructed by it. If the side menu were any lengthier, it might start to look a little weird, with the div being considerably further down the page and a large gap between it and its preceding text:
DivInlineBlockFix.png
Any ideas, anyone? Thanks in advance.
You do not have the required permissions to view the files attached to this post.
Austin Wright

Flare 2022 r3 (18.2.8431.26678) :: TopNav HTML5 / PDF output
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Note divs and side menus in HTML5 top navigation output

Post by Psider »

This seems to be a limitation with divs, because the div seems to be a solid rectangle which can't wrap like the individual lines of p rectangles. The best I managed (using *cough*robohelp*cough*) was using overflow: auto or overflow: hidden on my note divs, which results in the div "contracting" to fit on the left of the menu rather than below.

Here's a screenshot of plain html done in notepad with Overflow: auto on the yellow div. The same principle should apply in Flare. (P.S. I think you should use auto, but I used hidden to work around an RH editor display bug, just fyi.)
div_overflow_setting.png
You do not have the required permissions to view the files attached to this post.
Nita Beck
Senior Propellus Maximus
Posts: 3667
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Note divs and side menus in HTML5 top navigation output

Post by Nita Beck »

I just confirmed that adding overflow: auto; to the CSS for the div.note will work.
Nita
Image
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
TheGreatAndPowerfulOz
Sr. Propeller Head
Posts: 130
Joined: Mon Apr 24, 2006 12:52 pm
Location: Glen Mills, PA

Re: Note divs and side menus in HTML5 top navigation output

Post by TheGreatAndPowerfulOz »

@Psider / @Nita Beck,

Thanks for your valuable feedback. The addition of "overflow: auto" to the "div.note" selector in my style sheet did the trick! :D

(Sorry for the delayed response. I was out of the office for a few days and didn't see your posts.)
Austin Wright

Flare 2022 r3 (18.2.8431.26678) :: TopNav HTML5 / PDF output
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Note divs and side menus in HTML5 top navigation output

Post by Psider »

Hehe, I just re-read my sample text, and now I have an image of a fox waggling giant feathery eyebrows at everyone. :P
ajturnersurrey
Sr. Propeller Head
Posts: 346
Joined: Fri Nov 05, 2010 3:30 am

Re: Note divs and side menus in HTML5 top navigation output

Post by ajturnersurrey »

Thank you - the magic

Code: Select all

overflow: auto;
has done the trick for my displaced divs too.
Post Reply