Excessive Padding Around Card

[maxdiegoduron]

The padding around the outside of the card is excessive. Can we make this a part of the function kwargs?

[OJddJO]

You can change the padding using CSS

from streamlit_card import card

res = card(
    title="Streamlit Card",
    text="This is a test card",
    image="https://placekitten.com/500/500",
    styles={
        "div": {
            "padding": "5px",
            ...
        }
    }
)

Something like this

[maxdiegoduron]

But even by doing this I still cant get rid of the unnecessary space top and bottom of the card

streamlit_card.card(title="You have selecteds ",
                    text=f"{len(wells_selected)} wells",
                    image="

https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJyPdNzgSGLTJmpJgCJSVFnmcPd9VMX40E3A&s ", styles={ "card": { "width": "250px", "height": "100px", "border-radius": "6px", "padding": "0px 0px 0px 0px", "box-shadow": "0 0 10px rgba(0,0,0,0.5)", }, "div": {"padding": "0px 10px 10px 0px"}, "title": {"padding": "0px 0px 0px 0px", "font-size": "20px"}, "text": {"font-size": "22px"} },

                    )

[image: image.png]

El lun, 29 abr 2024 a la(s) 12:15 p.m., OJddJO @.***) escribió:

You can change the padding using CSS

from streamlit_card import card res = card( title="Streamlit Card", text="This is a test card", image="https://placekitten.com/500/500", styles={ "div": { "padding": "5px", ... } } )

Something like this

— Reply to this email directly, view it on GitHub https://github.com/gamcoh/st-card/issues/32#issuecomment-2083362040, or unsubscribe https://github.com/notifications/unsubscribe-auth/BCV7AKF6OPHTS5AEPMA67G3Y72E5DAVCNFSM6AAAAABG6Y6BYGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAOBTGM3DEMBUGA . You are receiving this because you authored the thread.Message ID: @.***>

[OJddJO]

set the padding option in the div CSS to 0

[maxdiegoduron]

Can you send small example please with 2 card stacked on top of each other ?

On Mon, Apr 29, 2024 at 1:28 PM OJddJO @.***> wrote:

set the padding option in the div CSS

— Reply to this email directly, view it on GitHub https://github.com/gamcoh/st-card/issues/32#issuecomment-2083503371, or unsubscribe https://github.com/notifications/unsubscribe-auth/BCV7AKEUCPNPR4JQUCEH4SLY72NORAVCNFSM6AAAAABG6Y6BYGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAOBTGUYDGMZXGE . You are receiving this because you authored the thread.Message ID: @.***>

[OJddJO]

This is the minimum space between two cards. You cannot change that, I think it's due to streamlit itself. Look:

card(
    title="Streamlit Card",
    text="This is a test card",
    image="http://placekitten.com/200/300",
    key="card1",
    styles={
        "card": {
            "width": "500px",
            "height": "500px",
            "padding": "0px",
            "margin": "0px"
        },
        "div": {
            "padding": "0px"
        }
    }
)

card(
    title="Streamlit Card",
    text="This is a test card",
    image="http://placekitten.com/200/300",
    key="card2",
    styles={
        "card": {
            "width": "500px",
            "height": "500px",
            "padding": "0px",
            "margin": "0px"
        },
        "div": {
            "padding": "0px"
        }
    }
)```

[maxdiegoduron]

Perfect!!! you are awesome the Margin was the issue!!! Thank you so much for sharing!!!