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):
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:
Any ideas, anyone? Thanks in advance.
Note divs and side menus in HTML5 top navigation output
-
- 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
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
Flare 2022 r3 (18.2.8431.26678) :: TopNav HTML5 / PDF output
Re: Note divs and side menus in HTML5 top navigation output
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.)
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.)
You do not have the required permissions to view the files attached to this post.
-
- Senior Propellus Maximus
- Posts: 3669
- Joined: Thu Feb 02, 2006 9:57 am
- Location: Pittsford, NY
Re: Note divs and side menus in HTML5 top navigation output
I just confirmed that adding overflow: auto; to the CSS for the div.note will work.
Nita
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
-
- 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
@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!
(Sorry for the delayed response. I was out of the office for a few days and didn't see your posts.)
Thanks for your valuable feedback. The addition of "overflow: auto" to the "div.note" selector in my style sheet did the trick!
(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
Flare 2022 r3 (18.2.8431.26678) :: TopNav HTML5 / PDF output
Re: Note divs and side menus in HTML5 top navigation output
Hehe, I just re-read my sample text, and now I have an image of a fox waggling giant feathery eyebrows at everyone.
-
- Sr. Propeller Head
- Posts: 346
- Joined: Fri Nov 05, 2010 3:30 am
Re: Note divs and side menus in HTML5 top navigation output
Thank you - the magic has done the trick for my displaced divs too.
Code: Select all
overflow: auto;