Centering customized notice navContainer

[Trombones13]

I've customized my notices such that the navContainer is separated from the scrollContainer, with each individual notice title measuring 100x100 (see image below). I want to be able to center the notices instead of having them float to the left, as is shown on the bottom half of the attached image. However, I can't put a specific width since it will screw up if the number of notices changes. I know the width that makes the lower image work can be calculated as follows:

100*(number of notices) + 10*(number of notices)

Is there a way to calculate that with xen:calc? (Also, I presume xen:calc can be put in the custom CSS of a Style Property--in this case, @panelScrollerNavContainer--right?)

Hopefully that all makes sense--thanks!

 

[Jake Bunce]

Admin CP -> Appearance -> Templates -> notices

Add the red code:

<xen:if is="{$notices}">

<xen:require css="panel_scroller.css" />
<xen:edithint template="notice" />

<div class="{xen:if @scrollableNotices, PanelScroller, PanelScrollerOff}" id="Notices" data-vertical="@noticeVertical" data-speed="@noticeSpeed" data-interval="@noticeInterval">
	<div class="scrollContainer">
		<div class="PanelContainer">
			<ol class="Panels">
				<xen:foreach loop="$notices" key="$noticeId" value="$notice" count="$count">
					<xen:include template="notice">
						<xen:set var="$content">{xen:raw $notice.message}</xen:set>
					</xen:include>
				</xen:foreach>
			</ol>
		</div>
	</div>

Now you can use this within or after that foreach loop:

{xen:calc '100*{$count} + 10*{$count}'}

You would probably do inline styling in this case rather than CSS since the number of notices can change.

Hopefully that helps.

 

[Trombones13]

That worked perfectly! On the off-chance that anyone else comes across this later and needs it, I added this style attribute to the div with class "navContainer:"

<div class="navContainer" style="width:{xen:calc '100*{$count} + 10*{$count}'}px">

Thanks a lot, Jake!!