nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How can I centre align the Livesearch macro?

James Scott_vd76pk

Does anyone know how I can centre align the Livesearch macro?

I've tried lots of different things in the Stylesheet, the source editor and the Custom HTML. None are working. Is it even possible to align this macro? At the moment it just drags itself over to the left and looks ridiculous on a nicely formatted page where everything is central.

Accepted answers

All comments

Sandy Johnson

Have you tried using the section and column macros. You could create 3 columns, leave the left and right columns blank and put your search in the center. You can set the sizes for the column widths by percentages so you can make the center column small enough to just fit the search (say that was 20%) and then split the remaining percent between the left and right columns (in this example 40% each)

Milo Test

Just put the Livesearch macro in the body of a Div macro and add this to the Div macro's Styles field:

margin-left: auto; margin-right: auto; width: 18em

James Scott_vd76pk

I don't really want to install more third party plugins as there is no guarantee they will be supported in the future...

James Scott_vd76pk

Okay, I was able to fix this. If anyone else is interested, I opened the Confluence Source Editor < > and created a new div class (call it whatever you want - I called mine "livesearch-centrealign":

<div class="livesearch-centeralign">
<ac:structured-macro ac:macro-id="1809e123-21d9-49e8-a2bc-278724a5bd6d" ac:name="livesearch" ac:schema-version="1">
<ac:parameter ac:name="spaceKey">
<ri:space ri:space-key="010000"/>
</ac:parameter>
<ac:parameter ac:name="placeholder">Can't find what you're looking for?</ac:parameter>
</ac:structured-macro>
</div>

Then under Space Tools > Look and Feel > Stylesheet:

.livesearch-centeralign {
margin: 0px auto;
display: inline-block;
}

with-additional {
height:auto;
padding-top:3px;
padding-bottom:3px;
text-align: left;
}

Sindhu Bardipur

It worked for me, thanks

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence