Aligning breadcrumbsProxy and topicToolbarProxy

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
WriterAndrew
Propeller Head
Posts: 50
Joined: Tue Mar 05, 2019 2:43 am

Aligning breadcrumbsProxy and topicToolbarProxy

Post by WriterAndrew »

Hi,
New to Flare, so please be gentle!
In my HTML5 - TopNav output, I want the breadcrumb proxy to appear at the top left of my content div, with the topic toolbar proxy to alight top right. I then want the body proxy to appear beneath the first two proxies...
I can get the breadcrumbs in the right place, but the topic toolbar either appears inside the body proxy content, or, if I add <div style="clear:both;"></div> between the topic toolbar proxy and the body proxy, the body gets pushed down the page, but leaves the topic toolbar in its same position.

Code: Select all

<body>
       
        <div class="sideContent">
            <MadCap:menuProxy style="mc-context-sensitive: True;" data-mc-skin="/Project/Skins/SideMenu.flskn" />
        </div>
        <div id="bodyContent">
            <MadCap:breadcrumbsProxy />
			<MadCap:topicToolbarProxy data-mc-skin="/Project/Skins/TopicToolBar.flskn" />
			<div style="clear:both;"></div>
			<MadCap:bodyProxy />
        </div>
    </body>
Any suggestions on how I can move just the topic toolbar, without altering either the breadcrumb proxy or the body proxy positions?
Thanks
WriterAndrew
Propeller Head
Posts: 50
Joined: Tue Mar 05, 2019 2:43 am

Re: Aligning breadcrumbsProxy and topicToolbarProxy

Post by WriterAndrew »

On a related issue, with the topicToolbarProxy added into the bodyContent area, the scrollbar jumps to the left of the bodyContent area by the width of the topicToolBarProxy - another reason for trying to get a toolbar outside of the topic area...
I understand that the Tripane layout has both a topicToolbar and a "normal" toolbar - is there a way to replicate this in TopNav?
lorynj
Propeller Head
Posts: 34
Joined: Mon Apr 23, 2018 6:17 pm
Location: Melbourne, Australia

Re: Aligning breadcrumbsProxy and topicToolbarProxy

Post by lorynj »

Hi Andrew

I'm pretty sure this is the effect you're wanting to achieve. Breadcrumbs aligned left, toolbar aligned right, both aligned horizontally.
TT Proxy Aligned with BC Proxy.jpg
To do this, set your Master Page resources up like so:
Master Page.png
Then add a toolbar skin, and configure it to align right and have a negative top margin. The negative top margin will "suck it up" into the region of the breadcrumb proxy.
Toolbar Proxy Skin.png
You do not have the required permissions to view the files attached to this post.
Loryn Jenkins
Technical Writer and Consultant
Franchise Cloud Solutions
WriterAndrew
Propeller Head
Posts: 50
Joined: Tue Mar 05, 2019 2:43 am

Re: Aligning breadcrumbsProxy and topicToolbarProxy

Post by WriterAndrew »

Many thanks, Loryn, another leap forward for my project and my own learning!

A follow-on question - in my responsive output, this works fine on "web medium" and "tablet medium" outputs - but as soon as I get to "mobile medium" sizes, the toolbar vanishes - but the breadcrumbs stay put as I want!

I can't see anything obviously different in the toolbar skin that would cause this....
lorynj
Propeller Head
Posts: 34
Joined: Mon Apr 23, 2018 6:17 pm
Location: Melbourne, Australia

Re: Aligning breadcrumbsProxy and topicToolbarProxy

Post by lorynj »

I would play with the dimensions to see if the toolbar is being set off-screen or check the stylesheet to see whether you're setting display: none. If neither suggestion sheds any light, feel free to post a sample project.
Loryn Jenkins
Technical Writer and Consultant
Franchise Cloud Solutions
Post Reply