Page 1 of 1
Force breadcrumbs to load before topic content?
Posted: Fri Jun 09, 2023 3:39 am
by scap
Is there a way to make the topic breadcrumbs load before the content?
Currently, the topic content loads first, then the breadcrumbs are added above. This pushes the already loaded content downwards, which creates a jerky effect on page load.
If there's no way to force the breabcrumbs to load first, perhaps there's some CSS/js that can 'reserve' the space that the breadcrumbs then loads into?
Thanks!
Re: Force breadcrumbs to load before topic content?
Posted: Wed Jun 14, 2023 7:14 pm
by doloremipsum
I have my breadcrumbs and toolbar icons in a div together - they're sitting next to each other using Flare's responsive formatting, although that might not be necessary. Essentially the toolbar loads in earlier and is larger than the breadcrumbs, so when the breadcrumbs load in there's already space for them. The code looks like:
Code: Select all
<div class="toolbarcontainer">
<div>
<MadCap:breadcrumbsProxy />
</div>
<div>
<MadCap:topicToolbarProxy data-mc-skin="/Project/Skins/Toolbar.flskn" />
</div>
</div>
And for the CSS, I'm just using the code generated by Flare's responsive formatting feature.
It may also help to have some text before the breadcrumbs (e.g. You are here: ). This will load in first and take up that line, so the rest of the breadcrumbs shouldn't cause distortion when they load in unless they're really long.
Re: Force breadcrumbs to load before topic content?
Posted: Thu Jun 15, 2023 5:36 am
by scap
doloremipsum wrote: ↑Wed Jun 14, 2023 7:14 pmIt may also help to have some text before the breadcrumbs (e.g. You are here: ). This will load in first and take up that line, so the rest of the breadcrumbs shouldn't cause distortion when they load in unless they're really long.
This did the trick, thank you!
I already had a space in the mc-breadcrumbs-prefix CSS setting, but it doesn't register as a space in the output, so the problem persists:
MadCap|breadcrumbsProxy
{
mc-breadcrumbs-prefix: ' ';
}
Solution was to replace the space with the \200b character code, which is a no-width space character.
MadCap|breadcrumbsProxy
{
mc-breadcrumbs-prefix: '\200b';
}
Re: Force breadcrumbs to load before topic content?
Posted: Thu Jun 15, 2023 3:00 pm
by doloremipsum
Nice, good thinking on using the dummy character!