Note divs and side menus in HTML5 top navigation output

This forum is for all Flare issues related to styles, stylesheets and XML.

Note divs and side menus in HTML5 top navigation output

Postby TheGreatAndPowerfulOz on Thu Nov 02, 2017 1:08 pm

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 2019 r2 (15.1.7216.26628) :: TopNav HTML5 / PDF output
TheGreatAndPowerfulOz
Sr. Propeller Head
 
Posts: 108
Joined: Mon Apr 24, 2006 12:52 pm
Location: Glen Mills, PA

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

Postby Psider on Thu Nov 02, 2017 7:10 pm

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.
Psider
Propellus Maximus
 
Posts: 600
Joined: Wed Jul 06, 2011 1:32 am

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

Postby Nita Beck on Fri Nov 03, 2017 6:39 am

I just confirmed that adding overflow: auto; to the CSS for the div.note will work.
Nita
Image
Content Strategist / Information Architect / Flare Consultant: http://beck-communications.com
Manager, Rochester Flare User Group: http://www.facebook.com/RochesterFlareUserGroup
Nita Beck
Senior Propellus Maximus
 
Posts: 3295
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

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

Postby TheGreatAndPowerfulOz on Tue Nov 07, 2017 12:01 pm

@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 2019 r2 (15.1.7216.26628) :: TopNav HTML5 / PDF output
TheGreatAndPowerfulOz
Sr. Propeller Head
 
Posts: 108
Joined: Mon Apr 24, 2006 12:52 pm
Location: Glen Mills, PA

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

Postby Psider on Tue Nov 07, 2017 5:06 pm

Hehe, I just re-read my sample text, and now I have an image of a fox waggling giant feathery eyebrows at everyone. :P
Psider
Propellus Maximus
 
Posts: 600
Joined: Wed Jul 06, 2011 1:32 am

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

Postby ajturnersurrey on Wed Feb 28, 2018 3:14 am

Thank you - the magic
Code: Select all
overflow: auto;
has done the trick for my displaced divs too.
ajturnersurrey
Sr. Propeller Head
 
Posts: 328
Joined: Fri Nov 05, 2010 3:30 am


Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: No registered users and 1 guest

cron