Increasing the white space around a sidenav output

rogersm · Post by **rogersm** » Wed Aug 22, 2018 8:26 am

Hi there,

We want to produce a side navigation output in flare. We have used top navigation before and people like the white space that displays on either side of the content so that the content is narrow, making it more readable. So in the side navigation, I have tried adding padding left and right in the SideNav skin file and I have also tried setting the maximum width to something smaller than the default 100%. However, when I try this, the output for longer topics displays a scrollbar to the right of the topic (instead of in the normal place that the browser scrollbar should be).

scrolbaragain.PNG

Does anyone have any advice or tips on including white space on either side of the content in side nav, without having the scroll bar changing position?

Note: I have also tried editing the body-container class to include more padding on the right, but the text content seems to then display at different lengths in laptop and desktop screens, but I am not sure why.

thanks,
mark

TaylorTalkington · Post by **TaylorTalkington** » Wed Aug 22, 2018 11:00 am

I have something similar, and I use a div in the MasterPage, with margins set, for this.

So for the style:

Code: Select all

div.sidenav_content {
	margin-left: 50px;
	margin-right: 50px;
}

And then I put the topic body proxy inside of a div with that class in the master page. I.e.:

Code: Select all

....
<body>
    <MadCap:breadcrumbsProxy />
    <div class="sidenav_content">
        <MadCap:bodyProxy />
    </div>
</body>
....

The scroll bar is still at the far right edge of the window.

Note: this only puts the margin on the body content....the breadcrumb is still has no spacing. If you want to have space around everything, you'll have to put the rest inside the div, possibly nesting divs or using a table to arrange all of the elements.

rogersm · Post by **rogersm** » Thu Aug 23, 2018 3:20 am

Thanks very much Taylor, I gave that a try. Does the amount of text per line vary for you on different sized screens?

TaylorTalkington · Post by **TaylorTalkington** » Thu Aug 23, 2018 4:15 am

rogersm wrote:Does the amount of text per line vary for you on different sized screens?

I don't have a good way of testing what different DPI and font scaling would look like (which I think that is what you are getting at), but I think your issue there may be related to using pixels for the margin.

The px margins won't scale, so on a phone or tablet with a high DPI (ie. the same resolution as a large computer monitor). If you want the margins to be proportional to the font size, use ems, something like this:

Code: Select all

div.sidenav_content {
   margin-left: 4em;
   margin-right: 4em;
}

Even that isn't going to guarantee that the text will be broken at exactly the same spots on a screen of any size, even assuming the resolution is the same. The end user has the capability to change text scaling to their liking, which will completely change the size of the text relative to the screen.

If you do mean different screen resolutions, then yes of course the text will be different as the space to display it is also different.

rogersm · Post by **rogersm** » Thu Aug 23, 2018 9:14 am

Thanks again, I will give ems a go so.

MadCap Software Forums

Increasing the white space around a sidenav output

Increasing the white space around a sidenav output

Re: Increasing the white space around a sidenav output

Re: Increasing the white space around a sidenav output

Re: Increasing the white space around a sidenav output

Re: Increasing the white space around a sidenav output