CODEWITHSUNDEEP
htmlcss
Jay
Jay

Reputation: 258

How to add padding between buttons only?

I have an asp:Panel that contains dynamically added user address buttons. What I'm trying to do is add a CssClass to the 2nd, 3rd & nth buttons if there are more than one. I want the first button to stay put and any subsequent buttons to get the CssClass that simply adds a small amount of padding to the left side, but only if they're not the first button.

Here's my pseudo-code for what I'm trying to do:

if (user.address.Count > 1)
{
    foreach (UserAddress ua in user.addresses)
    {
        // Where the buttons are not the first button
        btnAddress.CssClass += " AddressButtonSpacing";
    }
}

It's the Where part that I'm having trouble with, I'm not sure how to write that. How do I write "For every button in this panel that isn't the first one, add this CssClass"?

I don't want to just bulk add padding to the left or right of all the buttons because that would throw off where the first one is or mess with the little divider and the other buttons and I'm trying to avoid that.

I'm also using Bootstrap and I tried setting these on the panel:

display: flex;
justify-content: space-between;

because space-between is exactly what I'm looking for, but it didn't work (I think because it's a panel and not a div?) Either that or space-between only works on div's and not buttons, idk. And yes I'm aware that panel's render as div's, but it's still not working so I'm trying other things.

After the panel is a small divider followed by another set of (static) buttons:

my address buttons

All I want is a little space between, and only between, those buttons.

Does anyone have any suggestions?

Upvotes: 1

Views: 1620

Answers (1)

VDWWD
VDWWD

Reputation: 35514

You could use CSS selectors for that.

<asp:Panel ID="Panel1" runat="server" CssClass="ButtonContainer">
    <asp:Button ID="Button1" runat="server" Text="Button" />
    <asp:Button ID="Button2" runat="server" Text="Button" />
    <asp:Button ID="Button3" runat="server" Text="Button" />
</asp:Panel>

<style>
    .ButtonContainer input:not(:first-child) {
        background-color: #ff0000;
        margin-left: 25px;
    }
</style>

Yoy could always do a simple margin-right if you do not mind the extra space after 1234 North Street

Upvotes: 1

Related Questions