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

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'))
)

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

Appreciate any help.

1 Like

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

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

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

2 Likes

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).

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):

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()

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.

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