Breadcrumb bar covering top of scroll bar

[rjplano]

I want my breadcrumb box, with a gray background, to extend across the entire with of the page. I can do that (width: 100%;), but I can't get it to not cover the top of the scroll bar. How do I make sure the vertical scroll bar is on top of the breadcrumb block? Setting a specific width or percentage for the breadcrumb block doesn't work when the browser window changes size.

Thanks.

[NorthEast]

You haven't provided much information to work with - it'd be useful to know any relevant details like the target and skin used, skin settings, CSS settings that might affect it (like position), where the breadcrumbs proxy is located, a screenshot.

I'd expect the breadcrumbs to just fill the available width of the container that they're inside. So perhaps explain what's currently restricting the width of the breadcrumbs.

Note that you can use calculations in dimensions, so for example if you want to remove 16px from the full width you could use - width: calc(100% - 16px);

[rjplano]

Despite the lack of information, you got the solution exactly correct, Dave. Thanks!

The only remaining problem is that the calculation appears to be applied only after the browser window is minimized to below the Tablet Breakpoint size as specified in the Target > Skin tab. I am not as familiar with responsive output as I should be, so I don't know why this is happening or how to fix it. I'll take a closer look through the Flare help system.

Update: Here are some hopefully relevant images. At top left are the style settings applied to the breadcrumb proxy directly in the master page (MadCap:breadcrumbsProxy class="breadcrumb"), using the medium specified in the target, with the associated output directly below. The gray bar holds the breadcrumb itself. At top right is the default tablet medium, showing that the width value for the breadcrumb class is set to default. Directly below that is the screen shot showing that the gray breadcrumb bar has been shortened by 16px when the browser medium is reduced below the tablet breakpoint setting.

Responsive Settings.png

As I said, my understanding of responsive output is incomplete, so I don't know why this is happening or how to fix it and any suggestions are appreciated.

Thanks!

[NorthEast]

Like I said, it'd be useful to know some more details - that's still not much to work with.

Perhaps post a sample of the full CSS for the .breadcrumb element, and maybe a sample of the HTML to show the .breadcrumb element and other elements around it.

[rjplano]

The full CSS for .breadcrumb:

.breadcrumb
{
background-color: #D5D5D5;
color: #24334D;
display: block;
padding: 6pt;
width: calc(100% - 16px);
}

And here is hopefully enough relevant HTML from the associated Master Page:

<MadCap:breadcrumbsProxy class="breadcrumb" />
<p style="position: fixed; right: 0.25in; top: 1.25in;"><a href="https://sharepoint.ews.int/Departments/ ... px">Return to Doc Depot</a>
</p>
<div style="width: 75%;">
<MadCap:bodyProxy style="font-size: 9pt;" />
<MadCap:miniTocProxy style="mc-toc-depth: 1;" MadCap:conditions="General.Exclude from All" />
</div>

What other specific settings might be useful?
Thanks.

[rjplano]

I finally figured out that I need to take into account the width of the Side Navigation window in the total width of the window. The Side Nav window is set to a width of 20%, so my calculation for the width of the breadcrumb element needs to be:
width: calc(80% - 15px);

The 15px is the width of the vertical scroll bar, as best as I can tell.

Of course, for those windows where there is no vertical scroll bar, the breadcrumb element is now 15px too short, leaving a white space between it and the edge of the window.

[NorthEast]

Ok, but there must be other CSS being applied to the breadcrumbs.
Setting a width 100% on the breadcrumbs would not cause them to overlap the scroll bar, as it'd only occupy 100% of its parent container.
My guess is you have position: fixed set somewhere on the breadcrumbs, like MadCap|breadcrumbsProxy.

[rjplano]

Thanks Dave, you are absolutely correct, there is a position: fixed in the MadCap|breadcrumbsProxy CSS, good catch. I put it there so the breadcrumb would remain visible as the page is scrolled down.

Here is the complete CSS for the breadcrumb class and the breadcrumb proxy.

Code: Select all

	.breadcrumb
	{
		background-color: #D5D5D5;
		color: #24334D;
		display: block;
		padding: 6pt;
	}

	MadCap|breadcrumbsProxy
	{
		margin-top: -15px;
		margin-left: -11pt;
		/* position: fixed; */
		z-index: 99;
		width: 100%;
	}

As far as I know, that's the only code affecting the breadcrumb. Nothing is applied to it on the master page.

What I don't understand now, with the position: fixed commented out, is why the breadcrumb does not extend the entire width of the page.

100pct width.png

If I increase the width parameter for the breadcrumbs proxy to 150%, then the breadcrumb is displayed correctly behind the scroll bar.

150pct width.png

But then the breadcrumb doesn't stay in view as the page is scrolled down, which is behavior I don't want.

[NorthEast]

Thanks Dave, you are absolutely correct, there is a position: fixed in the MadCap|breadcrumbsProxy CSS, good catch. I put it there so the breadcrumb would remain visible as the page is scrolled down.

That makes more sense, and it's why I asked in my first post if there were "CSS settings that might affect it (like position)".

What I don't understand now, with the position: fixed commented out, is why the breadcrumb does not extend the entire width of the page.

That's because you've set margin-left: -11pt; in MadCap|breadcrumbsProxy, so the whole thing is being moved 11pt to the left. Get rid of that.

[rjplano]

Thanks Dave, you are absolutely correct, there is a position: fixed in the MadCap|breadcrumbsProxy CSS, good catch. I put it there so the breadcrumb would remain visible as the page is scrolled down.

That makes more sense, and it's why I asked in my first post if there were "CSS settings that might affect it (like position)".

What I don't understand now, with the position: fixed commented out, is why the breadcrumb does not extend the entire width of the page.

That's because you've set margin-left: -11pt; in MadCap|breadcrumbsProxy, so the whole thing is being moved 11pt to the left. Get rid of that.

Believe it or not, I had already thought about the margin-left attribute. It's in there so there is no white space on the left edge of the breadcrumb.

Left edge of breadcrumb with margin-left: -11pt;

with margin-left.png

Left edge of breadcrumb without margin-left: -11pt;

without margin-left.png

And either way, there's still the gap on the right end of the breadcrumb.

Right end, with margin-left: -11pt;

right edge with margin-left.png

Right end, without margin-left: -11pt;

right edge without margin-left.png

And of course with the position: fixed; line removed, the breadcrumb scrolls up and off the page, which I don't want. Putting position: fixed; back in, the breadcrumb stays in place, and if I use z-index: -99, it goes behind the scroll bar. Unfortunately, the page content also scrolls over the top of the breadcrumb.

breadcrumb behind.png

Change to z-index: 99; places the breadcrumb in front of the scrolling content, but also in front of the scroll bar.
What else affects the width of the breadcrumb?