How to align multiple "Number within a Card" in a Row

Panel
1

Hi there,

My first time trying out panel. I saw a similar post How to align two widgets in a row (a simple example), but it didn’t solve my case :<

A simple example would demonstrate my case:

pn.Row(
    pn.Card(pn.indicators.Number(value=100, align='center')),
    pn.Card(pn.indicators.Number(value=100, align='center')),
    pn.Card(pn.indicators.Number(value=100, align='center'))
)

image
image3468×332 6.91 KB

As you can see, the numbers are not truly aligned to center.

Appreciate any help.

1 Like
2

Hi @MuseA and welcome !!!

Aligning things and styling sometimes is difficult (Customization — Panel v0.13.1), it has to be done with the css_classes parameter as explained with more detail in the link. In this particular case, the align parameter refers to how the Number indicator align inside the Card component. You can inspect the object of the html page to check each of the divs composing the row (How to Inspect Element: Simple Methods for Editing a Web Page). To align the numbers (which are simple text) inside the Number component you need to use some custom css.

import panel as pn

css = """
.bk .center_number  :first-child{
    color: blue !important;
    display: flex !important;
    flex-direction: column;
    align-items:center;
}

"""
pn.config.raw_css.append(css)
pn.extension()
#display:flex along with flex-direction:row and align-items:center
pn.Row(
    pn.Card(pn.indicators.Number(value=100, align='center', background='red', 
                                 css_classes=['center_number'])),
    pn.Card(pn.indicators.Number(value=100, align='center', sizing_mode='stretch_width')),
    pn.Card(pn.indicators.Number(value=100, align='center', sizing_mode='stretch_width'))
)

which results in

image
image936×710 29.7 KB

Note: there is some balance between make easy to use the components and provide easy styling without entering all the details of css. For a better undertanding you can see the structure of only one of the cards and see that there is a lot under the hood.

image

1 Like
3

It took me some time to understand and work out, but it helps a lot! Thanks again!

2 Likes
4

Hi @nghenzi, sorry for a follow-up question.

So I was trying out the FastGridTemplate, I noticed that by default the panels are rendered into a card in this template, and I failed to align the numbers again :<

When I was inspecting the page source, I found if I define the CSS text-align: -webkit-center; to the out most layer, the number can be aligned properly (as the screenshot shown below).

SCR-20220930-mmn
SCR-20220930-mmn1828×1886 399 KB

So I tried to define this CSS into the code and apply to the Number indicator, but it resulted this (which is not aligned to center):

image
image3186×600 38.8 KB

Below is the code I have tried, could you help to identify the problem?

import panel as pn

css = """
.bk.center-number {
    text-align: -webkit-center;
}
"""

pn.extension(raw_css=[css])
number = pn.indicators.Number(value=100, css_classes=["center-number"])
temp = pn.template.FastGridTemplate(main=number)

temp.servable()
5

You can check the size of the Number indicator, by default it is only 300 px or something like that with a fixed size. You can note in the picture you post the div.bk.center-number is not ocuppying all the width of the grid card. If you want that the Number indicator stretch to the card width (the blue box of your picture with the same width that the orange box), you need to specify the sizing_mode=‘stretch_width’.

number = pn.indicators.Number(value=100, css_classes=["center-number"], sizing_mode='stretch_width')

With that, the blue and the orange box will have the same width, and their centers will be aligned.

image
image1118×213 9.97 KB

6

Ah! I see. This helps me understand the parameter sizing_mode more. Love this community, and thanks for your quick reply!