SOLVED: Pagination element: Alignment issue

Bugs
1

Bricks Version: 1.4

Hi,

Center and right alignments are broken for Pagination element.
It seems alignment applies to first number.

Besides, why a ul li and not a simple flex div?

ul is very archaic element, and (maybe justfor me?) has some kind of semantic meaning, more like text list (padding, bullets…), it should not be used for this.

image
image1475Ă—426 37.8 KB

image
image794Ă—229 2.86 KB

2

Hi Yan,
the alignment works for both inline styles and external files - but your “fix” from your previous report probably breaks it.

Currently, the ul got the .page-numbers class as well as the span and a inside of the li (one of the things I noticed that could be improved) and accordingly the ul breaks. You can use the following CSS instead (line-height instead of height is another thing I noticed ^^):

span.page-numbers,
a.page-numbers {
  width: inherit;
  line-height: inherit;
  display: grid;
  place-items: center;
}

As for the choice of the list as markup: there are no hard and fast rules about this, some people use buttons, others simple divs and flex, and others a list (bootstrap for example). Even the W3 Consortium suggests the list for paginations, so there is nothing at all against it: Pagination - W3C Design System

Best regards,
timmse

3

Ooops sorry, you’re right, without my previous fix, alignment is OK :wink:

About the ul thing, I agree that a lot of navigation menus or links lists use div ul li a… I can’t understand why, since more direct div a is less bloat and less complexity. Maybe a legacy from when flex didn’t exist?

About the .page-numbers class, yes, there’s a design issue that needs to be adressed :wink:

Your fix is OK in the meantime, event if height is not exact.

Thanks!!!